JavaScript无法正常运行我的游戏

时间：2016-02-24 21:12:24

标签： javascript html tetris

我正在开发俄罗斯方块游戏，但每当我在浏览器中打开它时，它都无效。所以我打开了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;
	}	
}

1 个答案:

答案 0 :(得分：2)

如你所说，第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

希望有所帮助！

相关问题
最新问题