未捕获的类型错误:无法读取未定义的 [JavaScript] 的属性“长度”

Uncaught TypeError: Cannot read property 'length' of undefined [JavaScript]

本文关键字：JavaScript 属性长度未定义类型错误读取更新时间：2023-09-26

所以我正在尝试制作一个俄罗斯方块游戏，但是当我在浏览器中打开它时，我在JavaScript控制台中得到了Uncaught TypeError: Cannot read property 'length' of undefined. Tetris.html:245。然后我去看看它，它看起来是正确的，所以我把它发布在Stackoverflow上，因为我无法弄清楚出了什么问题。第 245 行在 checkMove(xpos, ypos, newState) 函数中，这就是该行的代码。 for (var r = 0, len = curPiece.states[newState].length; r < len; r++) {//code goes here} 这是整个 HTML/

<!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 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 < 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.requestAnimationFrame || 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);
				
				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>

JS文件，如果你需要它。

简而言之，curPiece.states[newState]是未定义的。你放在那里的代码有很多东西需要看，但你应该回答为什么没有定义的问题。可能是 newState 不正确，也可能是状态完全未定义。也许操作顺序错误，尚未创建。

在 for 循环之前对 curPiece.states 的值进行一些调试。还要检查什么是新状态。然后报告更新，以便人们在需要时为您提供进一步的帮助。