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

解决井字棋游戏中的平局判断错误

碧海醫心
发布: 2025-11-15 22:01:00
原创
874人浏览过

解决井字棋游戏中的平局判断错误

本文旨在解决JavaScript井字棋游戏中,当棋盘填满时,平局判断与胜负判断冲突的问题。我们将分析现有代码,找出问题根源,并提供修改后的代码示例,确保游戏在正确判断胜负后,才进行平局判断,从而避免错误地将胜利判定为平局。

问题分析

原代码中,checkWin() 函数和 draw() 函数是独立调用的,没有明确的先后顺序。这意味着即使 checkWin() 检测到胜利,draw() 函数仍然会执行,并可能错误地输出“Tie Game”。

解决方案

核心思路是:先判断输赢,再判断平局。

我们需要修改 checkWin() 函数,使其返回胜利者('X' 或 'O')或者 null(如果没有胜利者)。然后,在主循环中,先调用 checkWin(),如果返回了胜利者,则显示胜利信息;否则,再调用 draw() 函数判断是否平局。

修改后的代码

以下是修改后的 JavaScript 代码示例:

挖错网
挖错网

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

挖错网 28
查看详情 挖错网
const clear = document.getElementById("clear");
const message = document.querySelector('h2');
const allDiv = document.querySelectorAll('#board div');
const squares = Array.from(allDiv);
let player = 'O';
let gameActive = true; // 添加一个变量来跟踪游戏是否仍在进行

function board() {
    squares.forEach(function(e, i) {
        squares[i].onclick = () => {
            if (gameActive && squares[i].textContent === '') { // 只有在游戏进行中且格子为空时才允许落子
                squares[i].textContent = player = player === 'O' ? 'X' : 'O';
                squares[i].textContent === 'X' ? message.textContent = "It's O's turn" :
                    message.textContent = "It's X's turn";
                const winner = checkWin();
                if (winner) {
                    message.textContent = winner + ' Wins!';
                    gameActive = false; // 游戏结束
                } else if (isDraw()) {
                    message.textContent = 'Draw!';
                    gameActive = false; // 游戏结束
                }
            }
        }
    });
}
board();

function checkWin() {
    const winPatterns = [
        [0, 1, 2], [3, 4, 5], [6, 7, 8], // Rows
        [0, 3, 6], [1, 4, 7], [2, 5, 8], // Columns
        [0, 4, 8], [2, 4, 6]             // Diagonals
    ];

    for (let pattern of winPatterns) {
        const [a, b, c] = pattern;
        if (squares[a].textContent && squares[a].textContent === squares[b].textContent && squares[a].textContent === squares[c].textContent) {
            return squares[a].textContent; // 返回胜利者
        }
    }
    return null; // 没有胜利者
}

clear.onclick = () => {
    squares.forEach(function(e, i) {
        squares[i].textContent = '';
        squares[i].style.color = '';
    });
    message.textContent = "It's X's turn!"; // 重置消息
    player = 'O'; // 重置玩家
    gameActive = true; // 重置游戏状态
};

function isDraw() {
    return squares.every(square => square.textContent !== '');
}
登录后复制

代码解释:

  1. checkWin() 函数修改:
    • 不再直接修改 message.textContent。
    • 遍历所有可能的获胜组合。
    • 如果找到获胜者,返回 'X' 或 'O'。
    • 如果没有获胜者,返回 null。
  2. isDraw() 函数:
    • 如果所有格子都被填充,则返回 true,否则返回 false。
  3. 主循环修改:
    • 在每个格子的点击事件中,首先调用 checkWin()。
    • 如果 checkWin() 返回了胜利者,则显示胜利信息,并停止游戏。
    • 如果 checkWin() 没有返回胜利者,则调用 isDraw() 判断是否平局。
    • 如果 isDraw() 返回 true,则显示平局信息,并停止游戏。
  4. 添加 gameActive 变量:
    • 使用 gameActive 变量来跟踪游戏是否仍在进行。
    • 只有在游戏进行中且格子为空时才允许落子。
    • 当游戏结束(胜利或平局)时,将 gameActive 设置为 false。
    • 在 "Play Again" 按钮的点击事件中,将 gameActive 重置为 true。

HTML 和 CSS (无修改)

HTML 和 CSS 部分的代码保持不变,因为它们不影响游戏逻辑。

总结

通过修改 checkWin() 函数的返回值,并调整主循环中的判断逻辑,我们成功解决了井字棋游戏中平局判断与胜负判断冲突的问题。 现在,游戏可以正确地判断胜负,并在没有胜者的情况下,正确地判定为平局。 此外,通过添加 gameActive 变量,我们确保了游戏结束后,玩家不能再进行操作,直到点击 "Play Again" 按钮。

以上就是解决井字棋游戏中的平局判断错误的详细内容,更多请关注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号