title: Collision detection problems in Java Script
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var u = 8;
  var x = [];
  var y = [];
  var s = {
      x: 20,
      y: 20,
      l: 1,
  };
  var e = {
      e: false,
      x: 0,
      y: 0,
  };
  
  function setup() {
      makefood();
      lime;
  }
  
  document.onkeydown = keydown;
  
  function keydown(e) {
      ctrls(e.keyCode, true);
  }
  
  function ctrls(keyCode, bool) {
      if (keyCode == 37) {
          s.a = true;
          s.w = false;
          s.d = false;
          s.s = false;
      }
      if (keyCode == 38) {
          s.a = false;
          s.w = true;
          s.d = false;
          s.s = false;
      }
      if (keyCode == 39) {
          s.a = false;
          s.w = false;
          s.d = true;
          s.s = false;
      }
      if(keyCode == 40) {
          s.a = false;
          s.w = false;
          s.d = false;
          s.s = true;
      }
  }
  
  function calc() {
      if (s.a === true) {
          s.x -= 1;
      }
      if (s.w === true) {
          s.y -= 1;
      }
      if (s.d === true) {
          s.x += 1;
      }
      if (s.s === true) {
          s.y += 1;
      }
      x.push(s.x);
      y.push(s.y);
  }
  
  function makefood() {
      e.x = Math.round(Math.random() * 41);
      e.y = Math.round(Math.random() * 41);
      ctx.fillRect(e.x * u, e.y * u, u, u);
  }
  
  function eat() {
      makefood();
      e = false;
      x.push(s.x);
      y.push(s.y);
      s.l++;
      
  }
  
  function ctest() {
      if (s.x * u == e.x * u &amp;&amp; s.y * u == e.y * u) {
          eat();
      }
  }
  
  function draw() {
      for (i = 0; i &lt; s.l; i++) {
          ctx.fillRect(x[i] * u, y[i] * u, u, u);
      }
  }
  
  function clear() {
      ctx.clearRect(x[0] * u, y[0] * u, u, u);
      if (e === true) {
          x.shift();
          y.shift();
      }
      e = true;
  }
  
  function timer() {
      clear();
      ctest();
      calc();
      draw();
  }
  
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var lime = ctx.fillStyle = 'lime';
  setup();
  
  setInterval(timer, 100);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      background-color: black;
      text-align: center;
  }
  
  #canvas {
      background-color: black;
      border: 1px solid lime;
      margin-top: 20%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
      &lt;link href="index.css" type="text/css" rel="stylesheet"&gt;
      &lt;title&gt;Index&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;canvas id="canvas" height="328px" width="328"&gt;&lt;/canvas&gt;
      &lt;script src="index.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I am trying to call the function makefood() when s.x and s.y are = to e.x and e.y respectively but for some reason it won't work, I have been trying for the longest time, and still nothing.  I am just trying to code the snake game, you can look at the code below. If you need more info just let me know! Thanks to all who help.</p>