JavaScript 我的游戏无法正常工作

Question

我正在开发俄罗斯方块游戏，但无论何时在浏览器中打开它都无法运行。所以我打开了 JavaScript 控制台。它说 Uncaught SyntaxError: missing ) after argument list Tetris.html:229。然后我显然去看了看，一切看起来都很好，只是行不通，这是我的代码。

<!DOCTYPE HTML>
<HTML lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="description" content="null">
  <meta name="author" content="null">
  <meta name="title" content="Tetris Clone">
  <title title="Tetris - HTML5">
   Tetris - HTML5
  </title>
  <link rel="apple-touch-icon" href="null">
  <link rel="shortcut icon" href="null">
  <link rel="stylesheet" type="text/css" href="css/tetris.css">
  <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.js"></script>
  <script type="text/javascript" src="http://gigaboywebdesigns.com/ClassStyles.js"></script>
  <script type="text/javascript" src="js/style.js"></script>
 </head>
 <body class = "body">
  <center>
   <div id = "gameboard">
    <canvas id = "gameCanvas" class = "gameCanvas" width = "320" height = "640"></canvas>
   </div>
   
   <div id = "score" class = "score">
    <p>Lines: <span id = "lines" class = "lines"></span></p>
   </div>
  </center>
  
  <script type = "text/javascript" src = "js/pieces.js"></script>
  <script type = "text/javascript" src = "js/BulkImageLoader.js"></script>
  
  <script type = "text/javascript">
   var ORWS = 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 BulkImageLoaded();
    imgLoader.addImage("blocks.png", "blocks");
    imgLoader.addImage("bg.png", "bg");
    imgLoader.addImage("over.png", "gameover");
    imgLoader.onReadyCallback = onImagesLoaded;
    imgLoader.loadImages();
    
    canvas.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 = imgL.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 < ROWS; r++) {
      gameData[r] = new Array();
      
      for (c = 0; c < COLS; c++) {
       gameData[r].push(0);
      }
     }
    } else {
     for (r = 0; r < ROWS; r++) {
      for (c = 0; c < COLS; c++) {
       gameData[r][c] = 0;
      }
     }
    }
    
    curPiece = getRandomPiece();
    lineSpan.innerHTML = curLines.toString();
    
    var requestAnimFrame = window.requestAnimFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    
    window.requestAnimationFrame = requestAnimFrame;
    
    requestAnimationFrame(update);
   }
   
   function update() {
    curTime = new Date().getTime();
    
    if (curTime - prevTime > 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 < len; r++) {
     for (var c = 0, len2 = p.states[state][r].length; c < len2; c++) {
      if (p.states[state][r][c] == 1 && ypos >= 0) {
       gameData[ypos][xpos] = (p.color + 1);
      }
      
      xpos += 1;
     }
     
     xpos = p.gridx;
     ypos += 1;
    }
    
    checkLines();
    
    if (p.gridy < 0) {
     isGameOver == true;
    }
   }
   
   function checkLines() {
    var lineFound = false;
    var fullRow = true;
    var r = ROWS - 1;
    var c = COLS -1;
    
    while(r >= 0) {
     while(c >= 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 >= 0) {
     while (c < COLS) {
      if (r > 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, 0, 0, 320, 640);
    
    for (var r = 0; r < ROWS; r++) {
     for (var c = 0; c < 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 < len; r++) {
     for (var c = 0, len2 = p.states[state][r].length; c < len2; c++) {
      if (p.states[state][r][c] == 1 && drawY >= 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 < len; r++) {
     for (var c = 0, len2 = curPiece.states[newState][r].length; c < len2; c++) {
      if (newx < 0 || newx >= COLS) {
       result = false;
       c = len2
       r = len;
      }
      
      if (gameData[newy] != undefined && gameData[newy][newx] != 0 && curPiece.states[newState][r] != undefined && curPiece.states[newState[r][c] != 0) {
       result = false;
       c = len2;
       r = len;
      }
      
      newx += 1;
     }
     
     newx = xpos;
     newy += 1;
     
     if (newy > ROWS) {
      r = len;
      result = false;
     }
    }
    
    return result;
   }
  </script>
 </body>
</HTML>

function LPiece() {
 this.stae1 = [ [1, 0],
     [1, 0],
     [1, 1] ];
     
 this.state2 = [ [0, 0, 1],
     [1, 1, 1] ];
     
 this.state3 = [ [1, 1],
     [0, 1],
     [0, 1] ];
     
 this.state4 = [ [1, 1, 1],
     [1, 0, 0] ];
     
 this.states = [this.state1, this.state2, this.state3, this.state4];
 this.curState = 0;
 
 this.color = 0;
 this.gridx = 4;
 this.gridy = -3;
}

function ReverseLPiece() {
 this.stae1 = [ [0, 1],
     [0, 1],
     [1, 1] ];
     
 this.state2 = [ [1, 1, 1],
     [1, 0, 0] ];
     
 this.state3 = [ [1, 1],
     [1, 0],
     [1, 0] ];
     
 this.state4 = [ [1, 0, 0],
     [1, 1, 1] ];
     
 this.states = [this.state1, this.state2, this.state3, this.state4];
 this.curState = 0;
 
 this.color = 0;
 this.gridx = 4;
 this.gridy = -3;
}

function BlockPiece() {
 this.state1 = [ [1, 1],
     [1, 1] ];
     
 this.states = [this.state1];
 this.curState = 0;
 
 this.color = 0;
 this.gridx = 4;
 this.gridy = -2;
}

function LinePiece() {
 this.state1 = [ [1],
     [1],
     [1],
     [1] ];
     
 this.state2 = [ [1, 1, 1, 1] ];
 
 this.states = [this.state1, this.state2];
 this.curState = 0;
 
 this.color = 0;
 this.gridx = 5;
 this.gridy = -4;
}

function TPiece() {
 this.state1 = [ [1, 1, 1],
     [0, 1, 0] ];
     
 this.state2 = [ [1, 0],
     [1, 1],
     [1, 0] ];
     
 this.state3 = [ [0, 1, 0],
     [1, 1, 1] ];
     
 this.state4 = [ [0, 1],
     [1, 1],
     [0, 1] ];
     
 this.states = [this.state1, this.state2, this.state3, this.state4];
 this.curState = 0;
 
 this.color = 0;
 this.gridx = 4;
 this.gridy = -2;
}

function ZPiece() {
 this.state1 = [ [1, 1, 0],
     [0, 1, 1] ];
     
 this.state2 = [ [0, 1],
     [1, 1],
     [1, 0] ];
     
 this.states = [this.state1, this.state2];
 this.curState = 0;
 
 this.color = 0;
 this.gridx = 4;
 this.gridy = -2;
}

function ReverseZPiece() {
 this.state1 = [ [0, 1, 1],
     [1, 1, 0] ];
     
 this.state2 = [ [1, 0],
     [1, 1],
     [0, 1] ];
     
 this.states = [this.state1, this.state2];
 this.curState = 0;
 
 this.color = 0;
 this.gridx = 4;
 this.gridy = -2;
}

function getRandomPiece() {
 var result = Math.floor(Math.random() * 7);
 var piece;
 
 switch (result) {
  case 0: piece = new LPiece(); break;
  case 1: piece = new ReverseLPiece(); break;
  case 2: piece = new BlockPiece(); break;
  case 3: piece = new ZPiece(); break;
  case 4: piece = new ReverseZPiece(); break;
  case 5: piece = new TPiece(); break;
  case 6: piece = new LinePiece(); break;
 }
 
 piece.color = Math.floor(Math.random() * 8);
 return piece;
}

function BulkImageLoader()
{
 this.images = [];
 this.imagesLoaded = 0;
 this.isReady = false;
 
 this.onReadyCallback = function() { throw new Error("BulkImageLoader.onReadyCallback was not set"); };
 this.onProgressCallback = function() 
 {
  var result;
  if(this.images.length > 0)
   result = this.imagesLoaded / this.images.length 
  else
   result = 0;
   
  return result;
 };
 
 this.onImageLoaded = function() {
  this.loader.imagesLoaded++;
  if(this.loader.imagesLoaded == this.loader.images.length)
  {
   this.loader.isReady = true;
   this.loader.onReadyCallback();
  }
 };
 
 this.addImage = function (src, name) {
  var img  = new Image();
  img.loader = this;
  this.images.push( {image:img, source:src, imgName:name} );
 };
 
 this.loadImages = function() {
  for(var i = 0, len = this.images.length; i < len; i++)
  {
   this.images[i].image.src = this.images[i].source;   
   this.images[i].image.onload = this.onImageLoaded;
   this.images[i].image.name = this.images[i].imgName;
  }
 }
 
 this.getImageAtIndex = function(index) {
  return this.images[index].image;
 }
 
 this.getImageByName = function(name) {
  var img;
  
  for(var i = 0, len = this.images.length; i < len; i++)
  {
   if( this.images[i].imgName == name )
   {
    img = this.images[i].image;
    i = len;
   }
  }
  
  return img;
 } 
}

Answer 1

正如您所说，第 229 行是您的问题。

ctx.drawImage(blockImg, p.color * SIZE, 0, SIZE, SIZE drawX * SIZE, drawY * SIZE, SIZE, SIZE);

SIZE 和 drawX 之间好像少了一个逗号。检查语法和参考：http://www.w3schools.com/tags/canvas_drawimage.asp

希望对您有所帮助！

JavaScript 我的游戏无法正常工作

JavaScript not working correctly for my game

html

javascript

tetris