JavaScript 井字棋赢家检测逻辑：避免多循环中的越界错误-js教程-PHP中文网

JavaScript 井字棋赢家检测逻辑：避免多循环中的越界错误

聖光之護

发布： 2025-10-09 13:03:14

原创

724人浏览过

JavaScript 井字棋赢家检测逻辑：避免多循环中的越界错误

本文探讨了在JavaSc++ript井字棋游戏中，赢家检测逻辑中因循环边界设置不当导致的TypeError: Cannot read properties of undefined错误。通过分析垂直和水平胜利条件的检查机制，我们指出了原始代码中循环迭代范围过大的问题，并提供了修正后的代码示例，确保了游戏逻辑的健壮性和正确性。

理解井字棋赢家检测的挑战

在开发井字棋（tic tac toe）这类棋盘游戏时，核心逻辑之一是判断当前游戏状态是否存在赢家。这通常涉及到遍历棋盘，检查行、列以及对角线上的特定模式。当从其他棋盘游戏（如四子棋）的赢家检测逻辑进行改编时，如果不仔细调整循环边界和索引，很容易引入越界错误，导致程序崩溃。

本教程将详细分析一个常见的TypeError: Cannot read properties of undefined (reading '0')错误，该错误发生在一个井字棋游戏的赢家检测函数中，并提供正确的解决方案。

错误分析：TypeError: Cannot read properties of undefined

当JavaScript代码尝试访问一个undefined值的属性时，就会抛出TypeError: Cannot read properties of undefined错误。在棋盘游戏上下文中，这通常意味着程序试图访问一个超出棋盘边界的单元格，例如board[row_index][column_index]，而row_index或column_index超出了棋盘的实际尺寸，导致board[row_index]返回undefined。

考虑以下原始的赢家检测函数 checkWinner 的部分代码，它旨在检查垂直（向下）和水平（向右）的胜利条件：

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; // 没有赢家
}

登录后复制

问题出在循环的边界条件与 checkLine 函数中访问的数组索引不匹配。对于一个3x3的井字棋盘，其行索引范围是0到2，列索引范围也是0到2。

立即学习“Java免费学习笔记（深入）”；

垂直胜利条件检查的修正

原始代码中，检查垂直胜利的逻辑如下：

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++)。当 r 等于 1 时，r+2 将变为 3。此时，代码会尝试访问 bd[3][c]。然而，对于一个3x3的棋盘，bd 只有索引为 0、1、2 的行，bd[3] 是 undefined。接着，尝试读取 undefined 的属性 [c] 就会导致 TypeError。

对于一个3x3的井字棋盘，垂直胜利意味着在某一列上，第0行、第1行和第2行的棋子相同。因此，我们只需要遍历每一列，并检查该列的所有三行。行索引始终是固定的 0、1、2。

修正后的垂直胜利检查逻辑应为：

// 检查垂直胜利
for (c = 0; c < 3; c++) { // 只需要遍历列
    // 检查 bd[0][c], bd[1][c], bd[2][c] 是否形成一条线
    if (checkLine(bd[0][c], bd[1][c], bd[2][c])) {
        return bd[0][c];
    }
}

登录后复制

通过这种方式，我们确保了所有行索引都在有效范围内（0、1、2），从而避免了越界错误。

挖错网

一款支持文本、图片、视频纠错和AIGC检测的内容审核校对平台。

查看详情

水平胜利条件检查的修正

类似地，原始代码中检查水平胜利的逻辑如下：

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];
        }

登录后复制

这里的核心问题是内层循环 for (c = 0; c < 3; c++)。当 c 等于 1 时，c+2 将变为 3。此时，代码会尝试访问 bd[r][3]。对于一个3x3的棋盘，每行只有索引为 0、1、2 的列，bd[r][3] 是 undefined。这同样会导致 TypeError。

对于一个3x3的井字棋盘，水平胜利意味着在某一行上，第0列、第1列和第2列的棋子相同。因此，我们只需要遍历每一行，并检查该行的所有三列。列索引始终是固定的 0、1、2。

修正后的水平胜利检查逻辑应为：

// 检查水平胜利
for (r = 0; r < 3; r++) { // 只需要遍历行
    // 检查 bd[r][0], bd[r][1], bd[r][2] 是否形成一条线
    if (checkLine(bd[r][0], bd[r][1], bd[r][2])) {
        return bd[r][0];
    }
}

登录后复制

通过这种方式，我们确保了所有列索引都在有效范围内（0、1、2），避免了越界错误。

完整的修正版 checkWinner 函数

结合上述修正，完整的 checkWinner 函数应该如下所示：

function checkWinner (bd) {
    // 检查垂直胜利
    for (let c = 0; c < 3; c++) { // 遍历每一列
        if (checkLine(bd[0][c], bd[1][c], bd[2][c])) {
            return bd[0][c]; // 返回赢家标记
        }
    }

    // 检查水平胜利
    for (let r = 0; r < 3; r++) { // 遍历每一行
        if (checkLine(bd[r][0], bd[r][1], bd[r][2])) {
            return bd[r][0]; // 返回赢家标记
        }
    }

    // 检查对角线胜利（从左上到右下）
    if (checkLine(bd[0][0], bd[1][1], bd[2][2])) {
        return bd[0][0];
    }

    // 检查对角线胜利（从右上到左下）
    if (checkLine(bd[0][2], bd[1][1], bd[2][0])) {
        return bd[0][2];
    }

    return 0; // 没有赢家
}

// 辅助函数 checkLine 保持不变
function checkLine (a, b, c) {
    // 确保三个单元格都不为0（即已被标记），并且它们的值相同
    return ((a !== 0) && (a === b) && (a === c));
}

登录后复制

注意： 上述代码中添加了对角线胜利的检查，这是井字棋赢家检测中不可或缺的一部分，原始问题中并未提及但通常是必需的。

总结与最佳实践

精确循环边界： 在处理数组或矩阵时，务必仔细检查循环的起始、结束条件以及内部索引计算，确保它们不会超出数据结构的实际边界。
理解游戏规则与棋盘结构： 井字棋（3x3）与四子棋（通常是6x7）的赢家检测逻辑有本质区别。四子棋需要检查连续四个棋子，因此其循环需要考虑“滑动窗口”式的检查，而井字棋只需检查固定三子线。
调试 TypeError： 当遇到 TypeError: Cannot read properties of undefined 时，第一步是定位到报错行，然后向上追溯，找出哪个变量在被访问属性时是 undefined。这通常指向一个越界的数组访问或未初始化的变量。
逐步测试： 在开发复杂逻辑时，分阶段测试是至关重要的。例如，可以先单独测试垂直胜利检测，确保其无误后再添加水平检测，以此类推。

通过以上修正和对循环边界的理解，可以有效地解决井字棋赢家检测中的越界错误，使游戏逻辑更加健壮和可靠。

以上就是JavaScript 井字棋赢家检测逻辑：避免多循环中的越界错误的详细内容，更多请关注php中文网其它相关文章！