title: JavaScript can't read propriety previously used
body: <p>Im trying to make a simple game , snake to be more exact. Anyway , so here I am stuck with an error into the console that it cannot read <code>snake[0].x</code> propriety from the line with <code>snake[score].x = snake[0].x;</code> that has been preciously used </p>
  
  <pre><code>function scoreManager(){
      if(snake[0].x==food.x &amp;&amp; snake[0].y==food.y){
          score++;
          snake[score].x = snake[0].x;
          snake[score].y = snake[0].y;
          food = {
              x:Math.floor(Math.random()*30+1)*cell,
              y:Math.floor(Math.random()*29+1)*cell
          };
      }
  }
  </code></pre>
  
  <p>It reads it just fine in the if statement ( I know that because the score increases if the statement is true ) .</p>
  
  <p>The exact error I get is : </p>
  
  <pre><code>&gt; game_engine.js:86 Uncaught TypeError: Cannot set property 'x' of
  &gt; undefined
  &gt;     at scoreManager (game_engine.js:86)
  &gt;     at draw (game_engine.js:110) scoreManager @ game_engine.js:86 draw @ game_engine.js:110 setInterval (async) (anonymous) @
  &gt; game_engine.js:127
  </code></pre>
  
  <p>Why does this happen ?
  Oh , and also for some reason the new food coordinate is allways the same for some reason :/ </p>
  
  <p>This is the full code </p>
  
  <pre><code>const cvs = document.getElementById("gameArea");
  const ctx = cvs.getContext("2d");
  
  var playGround = new Image();
  var foodSprite = new Image();
  var sandSprite = new Image();
  var snakeSprite = new Image();
  var tailSprite = new Image();
  
  playGround.src = './Textures/play_area.png';
  foodSprite.src = './Textures/Food.png';
  sandSprite.src = './Textures/sand.png';
  snakeSprite.src = './Textures/snake_head.png';
  tailSprite.src = './Textures/Snake_body.png';
  
  //variables
  const cell = 32;
  let score = 1;
  let direction;
  
  //objects
  let snake = [];
  snake[0] = { x: 1 * cell, y: 1 * cell };
  
  let food = {
      x:Math.floor(Math.random()*30+1)*cell,
      y:Math.floor(Math.random()*29+1)*cell
  };
  
  //controls
  
  document.addEventListener('keydown',directionGo);
  function directionGo(event){
      if(event.keyCode == 37 &amp;&amp; direction != 'RIGHT'){
          direction = 'LEFT';
      } else
      if(event.keyCode == 38 &amp;&amp; direction != 'DOWN'){
          direction = 'UP';
      } else
      if(event.keyCode == 39 &amp;&amp; direction != 'LEFT'){
          direction = 'RIGHT';
      } else
      if(event.keyCode == 40 &amp;&amp; direction != 'UP'){
          direction = 'DOWN';
      }
  }
  function directionManager(){
      if(direction=="LEFT"){
          snake[0].x-=cell;
      } else 
      if(direction=="RIGHT"){
          snake[0].x+=cell;
      } else 
      if(direction=="UP"){
          snake[0].y-=cell;
      } else 
      if(direction=="DOWN"){
          snake[0].y+=cell;
      } 
  }
  
  //in case u mess up
  function gameOver (){
      for (let i = 1; i&lt;snake.length; i++){
          if(snake[0].x == snake[i].x &amp;&amp; snake[0].y == snake[i].y){
              return true;
          }
      }
      if(snake[0].x == 0*cell || snake[0].x == 32*cell || snake[0].y == 0*cell || snake[0].y == 31*cell){
          return true;
      }
  }
  function respawn (){
      if(gameOver() == true){
          snake = [];
          snake[0] = { x: 1 * cell, y: 1 * cell };
          score = 0;
          direction='RIGHT';
      }
  }
  
  //in case u a gud boy
  function scoreManager(){
      if(snake[0].x==food.x &amp;&amp; snake[0].y==food.y){
          score++;
          snake[score].x = snake[0].x;
          snake[score].y = snake[0].y;
          food = {
              x:Math.floor(Math.random()*30+1)*cell,
              y:Math.floor(Math.random()*29+1)*cell
          };
      }
  }
  
  function tail(){
  }
  
  //Drawing function that manages the food , map and the player
  function draw() {
      ctx.drawImage(playGround, 0, 0); // ground
  
      //drawing snake
      ctx.drawImage(snakeSprite, snake[0].x, snake[0].y);
      for(let i = 1; i &lt; snake.length; i++){
          ctx.drawImage(snakeSprite, snake[i].x, snake[i].y);
      }
  
      //direction o.o
      directionManager();
      scoreManager();
  
      //food
      ctx.drawImage(foodSprite,food.x,food.y);
  
      //score
      ctx.fillStyle='white';
      ctx.font = '40px Changa One';
      ctx.fillText(score,16*cell+5,1*cell+15);
  
      //loops the animation
      //window.requestAnimationFrame(draw);
  
      respawn();
  }
  
  //draw();
  let game = setInterval (draw,100);
  </code></pre>