
在开发井字棋(tic tac toe)这类棋盘游戏时,实现一个准确且高效的赢家检测功能是核心环节。然而,不正确的循环逻辑和数组索引常常导致运行时错误,其中最常见的就是typeerror: cannot read properties of undefined (reading '0')。这个问题通常发生在尝试访问数组中不存在的索引时,例如越界访问。
考虑以下用于检测井字棋赢家的JavaScript代码片段,它试图同时检测垂直和水平方向的赢家:
function checkWinner (bd) { // bd代表游戏棋盘,一个二维数组
// 检查垂直方向
for (r = 0; r < 3; r++) // 外部循环遍历行
for (c = 0; c < 3; c++) // 内部循环遍历列
if (checkLine(bd[r][c], bd[r+1][c], bd[r+2][c])) { // 尝试检查三个连续的垂直单元格
return bd[r][c];
}
// 检查水平方向
for (r = 0; r < 3; r++) // 外部循环遍历行
for (c = 0; c < 3; c++) // 内部循环遍历列
if (checkLine(bd[r][c], bd[r][c+1], bd[r][c+2])) { // 尝试检查三个连续的水平单元格
return bd[r][c];
}
return 0; // 没有赢家
};当单独运行其中一个循环时,代码可能看起来正常,但一旦两个循环同时启用,就会出现TypeError。其根本原因在于循环的边界条件和数组索引计算方式不适用于一个3x3的井字棋盘。
以垂直方向的检查为例:if (checkLine(bd[r][c], bd[r+1][c], bd[r+2][c]))。 当外部循环变量r等于0时,我们检查bd[0][c], bd[1][c], bd[2][c],这对应于棋盘的第一、第二、第三行,是有效的。 然而,当r递增到1时,表达式会尝试访问bd[1][c], bd[2][c], bd[3][c]。由于一个3x3的棋盘只有0、1、2这三个行索引,bd[3]是undefined。尝试从undefined中读取属性(例如undefined[c])就会抛出TypeError: Cannot read properties of undefined (reading '0')。水平方向的检查也存在类似的问题,当c递增时会越界访问bd[r][3]。
这个问题源于将“连续N个棋子”的通用检查逻辑(如四子棋)直接应用于井字棋的“整行/整列/整对角线”检查,而没有正确调整循环边界。
对于一个标准的3x3井字棋盘,赢家检测的逻辑更为直接:只需检查三条水平线、三条垂直线以及两条对角线。这意味着我们不需要复杂的嵌套循环来寻找“起始点”并检查其后的N个单元格,而是直接检查固定的三元组。
立即学习“Java免费学习笔记(深入)”;
正确的垂直赢家检测应遍历每一列,并检查该列的所有三个单元格。对于3x3棋盘,这意味着我们只需要一个循环来遍历列索引c,而行索引始终是0, 1, 2。
// 修正后的垂直赢家检测
for (let c = 0; c < 3; c++) { // 遍历每一列
// 检查当前列的 (0,c), (1,c), (2,c) 是否连成一线
if (checkLine(bd[0][c], bd[1][c], bd[2][c])) {
return bd[0][c]; // 返回赢家标志
}
}这里,r不再是循环变量,而是固定为0, 1, 2,避免了越界问题。
同理,正确的水平赢家检测应遍历每一行,并检查该行的所有三个单元格。对于3x3棋盘,我们只需要一个循环来遍历行索引r,而列索引始终是0, 1, 2。
// 修正后的水平赢家检测
for (let r = 0; r < 3; r++) { // 遍历每一行
// 检查当前行的 (r,0), (r,1), (r,2) 是否连成一线
if (checkLine(bd[r][0], bd[r][1], bd[r][2])) {
return bd[r][0]; // 返回赢家标志
}
}这里,c不再是循环变量,而是固定为0, 1, 2,避免了越界问题。
为了完整的赢家检测,还需要包括两条对角线的检查。这两条对角线是固定的,不需要循环:
// 修正后的对角线赢家检测
// 主对角线: (0,0), (1,1), (2,2)
if (checkLine(bd[0][0], bd[1][1], bd[2][2])) {
return bd[0][0];
}
// 副对角线: (0,2), (1,1), (2,0)
if (checkLine(bd[0][2], bd[1][1], bd[2][0])) {
return bd[0][2];
}结合上述修正,完整的checkWinner函数应如下所示:
function checkWinner (bd) {
// 辅助函数:检查三个单元格是否相同且不为0
// 假设 checkLine(a, b, c) 已在外部定义,例如:
// function checkLine (a,b,c) {
// return ((a != 0) && (a == b) && (a == c));
// }
// 1. 检查所有垂直线
for (let c = 0; c < 3; c++) {
if (checkLine(bd[0][c], bd[1][c], bd[2][c])) {
return bd[0][c];
}
}
// 2. 检查所有水平线
for (let r = 0; r < 3; r++) {
if (checkLine(bd[r][0], bd[r][1], bd[r][2])) {
return bd[r][0];
}
}
// 3. 检查主对角线
if (checkLine(bd[0][0], bd[1][1], bd[2][2])) {
return bd[0][0];
}
// 4. 检查副对角线
if (checkLine(bd[0][2], bd[1][1], bd[2][0])) {
return bd[0][2];
}
return 0; // 如果没有赢家,返回0
}以上就是JavaScript井字棋赢家判断逻辑优化:解决多循环中的TypeError的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号