首页 > web前端 > js教程 > 正文

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

心靈之曲
发布: 2025-10-10 09:45:15
原创
858人浏览过

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 < 3; r++) 循环是多余的,并且会导致 r+1 和 r+2 在 r 为 1 或 2 时越界。

立即学习Java免费学习笔记(深入)”;

问题分析: 当 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创意设计工具

家作 37
查看详情 家作

2. 水平赢线检查的修正

同理,对于一个3x3的井字棋盘,每行也只有一条水平赢线需要检查:即bd[r][0], bd[r][1], bd[r][2]。原代码中的内层 for (c = 0; c < 3; c++) 循环是多余的,并且会导致 c+1 和 c+2 在 c 为 1 或 2 时越界。

问题分析: 当 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
    };
}
登录后复制

注意事项与总结

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

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

以上就是JavaScript井字棋赢家判断逻辑优化:避免多循环导致的TypeError的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号