title: Uncaught TypeError: Cannot read property 'length' of undefined [JavaScript]
body: <p>So I'm trying to make a Tetris game but when I open it in my browser I get <code>Uncaught TypeError: Cannot read property 'length' of undefined. Tetris.html:245</code> in the JavaScript console. Then I go and take a look at it and it looks right so I posted it on Stackoverflow because I can't figure out what's wrong. Line 245 is in the <code>checkMove(xpos, ypos, newState)</code> function this is what the code for that line is. <code>for (var r = 0, len = curPiece.states[newState].length; r &lt; len; r++) {//code goes here}</code> Here's the whole HTML/</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;HTML lang="en"&gt;
   &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="description" content="null"&gt;
    &lt;meta name="author" content="null"&gt;
    &lt;meta name="title" content="Tetris Clone"&gt;
    &lt;title title="Tetris - HTML5"&gt;
     Tetris - HTML5
    &lt;/title&gt;
    &lt;link rel="apple-touch-icon" href="null"&gt;
    &lt;link rel="shortcut icon" href="null"&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/tetris.css"&gt;
    &lt;script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="http://gigaboywebdesigns.com/ClassStyles.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/style.js"&gt;&lt;/script&gt;
   &lt;/head&gt;
   &lt;body class = "body"&gt;
    &lt;center&gt;
     &lt;div id = "gameboard"&gt;
      &lt;canvas id = "gameCanvas" class = "gameCanvas" width = "320" height = "640"&gt;&lt;/canvas&gt;
     &lt;/div&gt;
     
     &lt;div id = "score" class = "score"&gt;
      &lt;p&gt;Lines: &lt;span id = "lines" class = "lines"&gt;&lt;/span&gt;&lt;/p&gt;
     &lt;/div&gt;
    &lt;/center&gt;
    
    &lt;script type = "text/javascript" src = "js/pieces.js"&gt;&lt;/script&gt;
    &lt;script type = "text/javascript" src = "js/BulkImageLoader.js"&gt;&lt;/script&gt;
    
    &lt;script type = "text/javascript"&gt;
     var ROWS = 20;
     var COLS = 10;
     var SIZE = 32;
     
     var canvas
     var ctx;
     var blockImg;
     var bgImg;
     var gameOverImg;
     var curPiece;
     var gameData;
     var imgLoader;
     var prevTime;
     var curTime;
     var isGameOver;
     var lineSpan;
     var curLines;
     
     window.onload = onReady;
     
     function onReady() {
      imgLoader = new BulkImageLoader();
      imgLoader.addImage("blocks.png", "blocks");
      imgLoader.addImage("bg.png", "bg");
      imgLoader.addImage("over.png", "gameover");
      imgLoader.onReadyCallback = onImagesLoaded;
      imgLoader.loadImages();
      
      canvas = document.getElementById("gameCanvas");
      ctx = canvas.getContext("2d");
      lineSpan = document.getElementById("lines");
      
      prevTime = curTime = 0;
      
      document.onkeydown = getInput;
     }
     
     function getInput(e) {
      
     }
     
     function onImagesLoaded(e) {
      blockImg = imgLoader.getImageAtIndex(0);
      bgImg = imgLoader.getImageAtIndex(1);
      gameOverImg = imgLoader.getImageAtIndex(2);
      initGame();
     }
     
     function initGame() {
      var r, c;
      curLines = 0;
      isGameOver = false;
      
      if (gameData == undefined) {
       gameData = new Array();
       
       for (r = 0; r &lt; ROWS; r++) {
        gameData[r] = new Array();
        
        for (c = 0; c &lt; COLS; c++) {
         gameData[r].push(0);
        }
       }
      } else {
       for (r = 0; r &lt; ROWS; r++) {
        for (c = 0; c &lt; COLS; c++) {
         gameData[r][c] = 0;
        }
       }
      }
      
      curPiece = getRandomPiece();
      lineSpan.innerHTML = curLines.toString();
      
      var requestAnimFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      
      window.requestAnimationFrame = requestAnimFrame;
      
      requestAnimationFrame(update);
     }
     
     function update() {
      curTime = new Date().getTime();
      
      if (curTime - prevTime &gt; 500) {
       if (checkMove(curPiece.gridx, curPiece.gridy + 1, curPiece.curState)) {
        curPiece.gridy += 1;
       } else {
        copyData(curPiece);
        curPiece = getRandomPiece();
       }
       
       prevTime = curTime;
      }
      
      ctx.clearRect(0, 0, 320, 640);
      drawBoard();
      drawPiece(curPiece);
      
      if (isGameOver == false) {
       requestAnimationFrame(update);
      } else {
       ctx.drawImage(gameOverImg, 0, 0, 320, 640, 0, 0, 320, 640);
      }
     }
     
     function copyData(p) {
      var xpos = p.gridx;
      var ypos = p.gridy;
      var state = p.curState;
      
      for (var r = 0, len = p.states[state].length; r &lt; len; r++) {
       for (var c = 0, len2 = p.states[state][r].length; c &lt; len2; c++) {
        if (p.states[state][r][c] == 1 &amp;&amp; ypos &gt;= 0) {
         gameData[ypos][xpos] = (p.color + 1);
        }
        
        xpos += 1;
       }
       
       xpos = p.gridx;
       ypos += 1;
      }
      
      checkLines();
      
      if (p.gridy &lt; 0) {
       isGameOver == true;
      }
     }
     
     function checkLines() {
      var lineFound = false;
      var fullRow = true;
      var r = ROWS - 1;
      var c = COLS -1;
      
      while(r &gt;= 0) {
       while(c &gt;= 0) {
        if (gameData[r][c] == 0) {
         fullRow = false;
         c = -1;
        }
        c--;
       }
       
       if (fullRow == true) {
        zeroRow(r);
        r++;
        lineFound = true;
        curLines++;
       }
       
       fullRow = true;
       c = COLS - 1;
       r--;
      }
     }
     
     function zeroRow(row) {
      var r = row;
      var c = 0;
      
      while (r &gt;= 0) {
       while (c &lt; COLS) {
        if (r &gt; 0) {
         gameData[r][c] = gameData[r-1][c];
        } else {
         gameData[r][c] = 0;
        }
        c++;
       }
       
       c = 0;
       r--;
      }
     }
     
     function drawBoard() {
      ctx.drawImage(bgImg, 0, 0, 320, 640);
      
      for (var r = 0; r &lt; ROWS; r++) {
       for (var c = 0; c &lt; COLS; c++) {
        ctx.drawImage(blockImg, (gameData[r][c] - 1) * SIZE, 0, SIZE, SIZE, c * SIZE, r * SIZE, SIZE);
       }
      }
     }
     
     function drawPiece(p) {
      var drawX = p.gridx;
      var drawY = p.gridy;
      var state = p.curState;
      
      for (var r = 0, len = p.states[state].length; r &lt; len; r++) {
       for (var c = 0, len2 = p.states[state][r].length; c &lt; len2; c++) {
        if (p.states[state][r][c] == 1 &amp;&amp; drawY &gt;= 0) {
         ctx.drawImage(blockImg, p.color * SIZE, 0, SIZE, SIZE, drawX * SIZE, drawY * SIZE, SIZE, SIZE);
        }
        
        drawX += 1;
       }
       
       drawX = p.gridx;
       drawY += 1;
      }
     }
     
     function checkMove(xpos, ypos, newState) {
      var result = true;
      var newx = xpos;
      var newy = ypos;
      
      for (var r = 0, len = curPiece.states[newState].length; r &lt; len; r++) {
       for (var c = 0, len2 = curPiece.states[newState][r].length; c &lt; len2; c++) {
        if (newx &lt; 0 || newx &gt;= COLS) {
         result = false;
         c = len2
         r = len;
        }
        
        if (gameData[newy] != undefined &amp;&amp; gameData[newy][newx] != 0 &amp;&amp; curPiece.states[newState][r] != undefined &amp;&amp; curPiece.states[newState[r][c]] != 0) {
         result = false;
         c = len2;
         r = len;
        }
        
        newx += 1;
       }
       
       newx = xpos;
       newy += 1;
       
       if (newy &gt; ROWS) {
        r = len;
        result = false;
       }
      }
      
      return result;
     }
    &lt;/script&gt;
   &lt;/body&gt;
  &lt;/HTML&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>JS file if you need it.</p>