J*aScript井字棋赢家判断逻辑优化：避免多循环导致的TypeError

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript井字棋赢家判断逻辑优化：避免多循环导致的TypeError

2025-10-10

浏览次数：次

返回列表

JavaScript井字棋赢家判断逻辑优化：避免多循环导致的TypeError

在开发井字棋游戏时，实现赢家判断逻辑是关键一环。本文将深入探讨在检查固定长度赢线时，因循环边界设置不当而导致的TypeError: Cannot read properties of undefined错误。我们将分析常见错误模式，并通过代码示例演示如何正确地遍历棋盘，精准判断横向和纵向赢线，从而构建健壮的游戏逻辑。

理解 TypeError: Cannot read properties of undefined

当#%#$#%@%@%$#%$#%#%#$%@_de9b9ed78d7e2e1dc++eeffee780e2f919尝试访问一个undefined值的属性时，就会抛出typeerror: cannot read properties of undefined错误。在处理二维数组（如游戏棋盘）时，这通常意味着你试图访问一个不存在的行或列索引，即发生了“数组越界”错误。

在井字棋的赢家判断场景中，如果你的代码尝试访问bd[r+1]或bd[r+2]，而此时r+1或r+2超出了棋盘的行数范围，那么bd[r+1]或bd[r+2]将是undefined，随后的[c]访问操作就会触发这个错误。

井字棋赢家判断逻辑分析与修正

井字棋（3x3棋盘）的赢家判断涉及检查三条横线、三条竖线和两条对角线。每条赢线都由三个连续的相同标记组成。问题的核心在于，当检查这些固定长度的赢线时，不应过度迭代。

让我们以原代码中的 checkWinner 函数为例，分析并修正其中的错误。

function checkWinner (bd) {
    // 辅助函数，检查三个单元格是否构成赢线
    function checkLine (a,b,c) {
        return ((a != 0) && (a == b) && (a == c));
    }

    // 原始的垂直赢线检查（存在问题）
    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; // 没有赢家
};

1. 垂直赢线检查的修正

对于一个3x3的井字棋盘，每列只有一条垂直赢线需要检查：即bd[0][c], bd[1][c], bd[2][c]。原代码中的外层 for (r = 0; r

立即学习“J*a免费学习笔记（深入）”；

问题分析： 当 r 为 0 时，检查 bd[0][c], bd[1][c], bd[2][c]，这是正确的。当 r 为 1 时，检查 bd[1][c], bd[2][c], bd[3][c]。此时 bd[3] 是 undefined，导致 bd[3][c] 抛出 TypeError。当 r 为 2 时，检查 bd[2][c], bd[3][c], bd[4][c]。同样会越界。

修正后的代码：

// 修正后的垂直赢线检查
for (let c = 0; c < 3; c++) { // 只需遍历列
    // 对于每一列，固定检查第0、1、2行
    if (checkLine(bd[0][c], bd[1][c], bd[2][c])) {
        return bd[0][c];
    }
}

这里，我们只用一个循环遍历列 c，对于每一列，我们直接检查其第0、1、2行的单元格。这样就避免了越界问题。

万相营造

阿里妈妈推出的AI电商营销工具

168 查看详情万相营造

2. 水平赢线检查的修正

同理，对于一个3x3的井字棋盘，每行也只有一条水平赢线需要检查：即bd[r][0], bd[r][1], bd[r][2]。原代码中的内层 for (c = 0; c

问题分析： 当 c 为 0 时，检查 bd[r][0], bd[r][1], bd[r][2]，这是正确的。当 c 为 1 时，检查 bd[r][1], bd[r][2], bd[r][3]。此时 bd[r][3] 是 undefined，导致 TypeError。当 c 为 2 时，检查 bd[r][2], bd[r][3], bd[r][4]。同样会越界。

修正后的代码：

// 修正后的水平赢线检查
for (let r = 0; r < 3; r++) { // 只需遍历行
    // 对于每一行，固定检查第0、1、2列
    if (checkLine(bd[r][0], bd[r][1], bd[r][2])) {
        return bd[r][0];
    }
}

这里，我们只用一个循环遍历行 r，对于每一行，我们直接检查其第0、1、2列的单元格。

3. 对角线赢线检查（补充）

井字棋还需要检查两条对角线。这两条对角线也是固定长度的，因此不需要循环，直接检查即可。

主对角线： bd[0][0], bd[1][1], bd[2][2]
副对角线： bd[0][2], bd[1][1], bd[2][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];
}

完整的 checkWinner 函数

综合以上修正和补充，一个完整的 checkWinner 函数应该如下所示：

function gameController(
    playerOneName = "Player One",
    playerTwoName = "Player Two"
) {
    // ... 其他游戏控制器代码 ...

    function checkLine (a,b,c) {
        // 确保单元格不为初始值0，并且三个单元格值相同
        return ((a !== 0) && (a === b) && (a === c));
    }

    function checkWinner (bd) { // bd 是游戏棋盘的二维数组
        // 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
    };

    // ... 其他游戏控制器代码 ...

    return {
        // ... 返回其他函数和属性 ...
        checkWinner
    };
}

注意事项与总结

循环边界与棋盘尺寸： 在处理网格类游戏（如井字棋、四子棋等）的赢家判断逻辑时，务必根据赢线的实际长度和棋盘尺寸来精确设置循环边界。对于固定长度的赢线（例如井字棋的3个棋子），通常只需要遍历起始点，而不是遍历赢线中的每一个棋子。
避免冗余循环： 如果赢线长度与棋盘维度相同（如3x3井字棋的横竖线），则不需要嵌套循环来检查整条线，一个循环遍历行或列即可。
调试技巧： 当遇到 TypeError: Cannot read properties of undefined 错误时，首先检查代码中所有涉及数组索引访问的地方，特别是那些使用了 i+1、j+2 等表达式的索引，确认它们在循环的任何迭代中都不会超出数组的实际边界。使用 console.log() 打印出循环变量和数组访问表达式的值，可以帮助快速定位问题。
模块化设计： 将 checkLine 这样的辅助函数独立出来，可以提高代码的可读性和复用性。

通过以上修正，checkWinner 函数将能够正确、高效地判断井字棋的赢家，同时避免因数组越界导致的运行时错误。掌握正确的循环和索引处理方式，是开发健壮游戏逻辑的基础。

以上就是J*aScript井字棋赢家判断逻辑优化：避免多循环导致的TypeError的详细内容，更多请关注其它相关文章！

# 怎么做 # 株洲网站优化 # 视频号怎么营销推广的 # 乌市好网站建设哪家强 # 网站如何优化使用小钢炮 # 网页嵌套过多对seo # 运筹学论文关键词排名 # 如何解决地方网站建设 # 住房与建设部网站 # 铜陵网络推广seo优化 # 网页收录数据seo # 三条 # javascript # 两条 # 只需 # 不需要 # 就会 # 这是 # 不应 # 单元格 # 遍历 # win # c++ # java