title: Snake game: how to check if the head collides with its own body
body: <p>You may have played Snake, a game where you have to eat food to grow and you fail if you collide with the snake's body or certain obstacles. The first part was easy, but the latter seems impossible to achieve.</p>
  
  <p>I have tried to make a <code>for</code> loop check if the last element of my snake array is colliding with its other parts. My condition was like this: if the <code>x</code> position of the last item in my array is bigger than any of the array items' <code>x</code> position, and smaller than their <code>x</code> position plus their width, and so on. That didn't work.</p>
  
  <p>Here's my code :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;canvas id="myCanvas" width="200px" height="200px" style="border:1px solid black"/&gt;
  &lt;script&gt;
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  var yPos = 20;
  var width = 15;
  var variable = 1;
  var currentDir = 1;
  //var xPos = (width+5)*variable;
  var xPos = 20;
  var myArr = [{myX:xPos,myY:yPos},{myX:xPos,myY:yPos},{myX:xPos,myY:yPos}];
  var downPressed = false;
  var upPressed = false;
  var leftPressed = false;
  var rightPressed = false;
  var first = [0,20,40,60,80,100,120,140,160,180];
  var firstX = Math.floor(Math.random()*10);
  var firstY = Math.floor(Math.random()*10);
  var okayed = first[firstX];
  var notOkayed = first[firstY];
  var maths = myArr[myArr.length-1];
  function drawFood() {
  ctx.beginPath();
  ctx.rect(okayed,notOkayed,15,15);
  ctx.fillStyle = "red";
  ctx.fill();
  ctx.closePath();    
  }
  
  function drawRectangle() {
  
      ctx.clearRect(0,0,200,200);
      drawFood();
  
      for(var i = 0;i&lt;myArr.length;i++) {
      ctx.beginPath();
      ctx.rect(myArr[i].myX,myArr[i].myY,width,15);
      ctx.fillStyle = "blue";
      ctx.fill();
      ctx.closePath();
      }
  
      requestAnimationFrame(drawRectangle);
  }
  
  
  setInterval("calledin()",100);
  function calledin() {
      var secondX = Math.floor(Math.random()*10);
      var secondY = Math.floor(Math.random()*10);
      var newobj = {myX:myArr[myArr.length-1].myX+20,myY:myArr[myArr.length-1].myY};
      var newobjTwo = {myX:myArr[myArr.length-1].myX,myY:myArr[myArr.length-1].myY+20};
      var newobjLeft = {myX:myArr[myArr.length-1].myX-20,myY:myArr[myArr.length-1].myY};
      var newobjUp = {myX:myArr[myArr.length-1].myX,myY:myArr[myArr.length-1].myY-20};
      var okayNewObj = {myX:myArr[1].myX - 20,myY:myArr[1].myY};
  
  
  if(myArr[myArr.length-1].myX &gt; 180 || myArr[myArr.length-1].myX &lt; 0 || myArr[myArr.length-1].myY &gt; 180 || myArr[myArr.length-1].myY &lt; 0)
          {alert("Game Over");window.location.reload();}
  
      if(myArr[myArr.length-1].myX &gt; okayed-5 &amp;&amp; myArr[myArr.length-1].myX &lt; okayed+20 &amp;&amp; myArr[myArr.length-1].myY &lt; notOkayed+20 &amp;&amp;
      myArr[myArr.length-1].myY &gt; notOkayed-5) {
          okayed = first[secondX];
          notOkayed = first[secondY];
          myArr.unshift(okayNewObj);
      }
  
      if(currentDir == 1) {
      myArr.push(newobj);
      myArr.shift();}
  
      if(currentDir == 2) {
          myArr.push(newobjTwo);
          myArr.shift();
      }
  
      if(currentDir == 4) {
          myArr.push(newobjLeft);
          myArr.shift();
      }
  
  
      if(currentDir == 3) {
          myArr.push(newobjUp);
          myArr.shift();
      }
  
       for(var i = 0;i&lt;myArr.length-2;i++) {
       if(myArr[myArr.length-1].myX &gt; myArr[i].myX &amp;&amp;
       myArr[myArr.length-1].myX &lt; myArr[i].myX + 15 &amp;&amp; myArr[myArr.length-1].myY &gt; myArr[i].myY &amp;&amp; myArr[myArr.length-1].myY &gt; myArr[i].myY + 15)
       {alert("Game over");window.location.reload();} 
   }
  
  }
  
  
  function downed(e) {
      if(e.keyCode==40) {if(currentDir != 3) {currentDir = 2;}}
      if(e.keyCode==38) {if(currentDir != 2) {currentDir = 3;}}
      if(e.keyCode==39) {if(currentDir != 4) {currentDir = 1;}}
      if(e.keyCode==37) {if(currentDir != 1) {currentDir = 4;}}
  
  }
  
  function upped(e) {
      if(e.keyCode == 40) {downPressed = false;}
  }
  document.addEventListener("keydown",downed,false);
  document.addEventListener("keyup",upped,false);
  
  drawRectangle();
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>