title: Cannot read property 'x' of undefined (JavaScript)
body: <p>I am currently trying to build a snake game from a <a href="https://www.youtube.com/watch?v=uU5YPIvJ24Y" rel="nofollow">tutorial</a> in JavaScript and Canvas. Currently I am a receiving an error on this line: <code>grid.set(FOOD, randPos.x, randPos.y);</code> which is part of the <code>setFood</code> function towards the bottom.  I dont understand where the <code>.x</code> is coming from because I dont see a X or Y defined within that scope. Would really appreciate it if someone could point me in the right direction so I can finish my first game!!! Thanks.  </p>
  
  <pre><code>&lt;script&gt;
      //CONSTANTS
      var COLS=26;
      var ROWS=26;
  
      //ID's
      var EMPTY=0;
      var SNAKE=1;
      var FOOD=2;
  
      //Direction
      var LEFT=0;
      var UP=1;
      var RIGHT=2;
      var DOWN=3;
  
      var grid = {
          width: null, 
          height: null,
          _grid: null,
  
          init: function(d,c,r){
              this.width = c;
              this.height = r;
  
              this._grid = [];
              for(var x=0; x&lt;c; x++){
                  this._grid.push([]);
                  for(var y=0; y &lt; r; y++){
                      this._grid[x].push(d);
                  }
              }
          },
  
          set: function(val,x,y){
              this._grid[x][y] = val;
          },
  
          get: function(x,y){
              this._grid[x][y];
          }
      }
  
      var snake = {
          direction: null,
          last: null,
          _queue: null,
  
          init: function(d,x,y){
              this.direction = d;
              this._queue = [];
              this.insert(x,y);
          },
  
          insert: function(x,y){
              this._queue.unshift({x:x, y:y});
              this.last = this._queue[0];
          },
  
          remove: function(){
              return this._queue.pop();
          }
      }
  
      function setFood(){
          var empty = [];
          for(var x=0; x&lt;grid.width; x++){
              for(var y=0; y&lt;grid.height; y++){
                  if(grid.get(x,y)===EMPTY){
                      empty.push({x:x, y:y});
                  }
              }
          }
          var randPos = empty[Math.floor(Math.random()*empty.length)];
          console.log("working");
          grid.set(FOOD, randPos.x, randPos.y);
          console.log("working???")
      }
  
      //Game objects
      var canvas, ctx, keystate, frames;
  
      function main(){
          canvas = document.createElement('canvas');
          canvas.width = COLS*20;
          canvas.height = ROWS*20;
          ctx = canvas.getContext('2D');
          document.body.appendChild(canvas);
  
          frames = 0;
          keystate = {};
  
          init();
          loop();
      }
  
      function init(){
          grid.init(EMPTY, COLS, ROWS);
  
          var sp = {x:Math.floor(COLS/2), y:ROWS-1};
          snake.init(UP, sp.x, sp.y);
          grid.set(SNAKE, sp.x, sp.y);
  
          setFood();
      }
  
      function loop(){
          update();
          draw();
  
          window.requestAnimationFrame(loop, canvas);
      }
  
      function update(){
          frames++;
      }
  
      function draw(){
          var tw = canvas.width/grid.width;
          var th = canvas.height/grid.height;
  
          for(var x=0; x&lt;grid.width; x++){
              for(var y=0; y&lt;grid.height; y++){
                  switch(grid.get(x,y)){
                      case EMPTY:
                          ctx.fillStyle = "#fff";
                          break;
                      case SNAKE:
                          ctx.fillStyle = "#0ff";
                          break;
                      case FOOD:
                          ctx.fillStyle = "#f00";
                          break;
                  }
                  ctx.fillRect(x*tw, y*th, tw, th);
              }
          }
      }
  
      main();
  &lt;/script&gt;
  </code></pre>