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

---

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

问题分析

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

解决方案

核心思路是：先判断输赢，再判断平局。

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

修改后的代码

以下是修改后的 J*aScript 代码示例：

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

359 查看详情

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" 按钮。

以上就是解决井字棋游戏中的平局判断错误的详细内容，更多请关注其它相关文章！

# 复选框  # 铜山区运营网站推广优势  # 安踏营销与推广资源  # 济南网站建设和制作  # 网站建设导航优化  # 做产品网站营销推广  # 小红书营销推广机构  # 商丘哪里有网站推广优化  # 天等辣椒酱营销推广文案  # 保定汽车网站建设  # 晋中seo优化资费  # 并在  # 遍历  # 判断是否  # css  # 为空  # 如何实现  # 正确地  # 时才  # 如果没有  # 游戏中  # 点击事件  # win  # ai  # go  # html  # java  # javascript 

相关栏目： 【 Google疑问12 】 【 Facebook疑问10 】 【 优化推广96088 】 【 技术知识133117 】 【 IDC资讯59369 】 【 网络运营7196 】 【 IT资讯61894 】

相关推荐： 睡觉时心跳快是什么原因 夜间心悸如何应对  composer 提示 "requires ext-soap" 缺少 SOAP 扩展怎么办？  J*aScript包管理器_Npm与Yarn对比  发布小红书怎么屏蔽粉丝？屏蔽粉丝能看到吗？  Mac怎么关闭按键声音_Mac键盘打字音效设置  如何在CSS中使用伪类选择器_hover实现悬停效果  Linux如何优化系统启动流程_Linux启动项优化方案  谷歌邮箱怎么换绑定邮箱Gmail安全备份邮箱修改方法  Golang中的rune与byte类型区别是什么_Golang字符与字节处理详解  Composer reinstall命令重装损坏的包  在Django单元测试中优雅处理信号：基于环境的条件执行策略  手机耗电快是什么原因 延长手机电池续航时间的设置方法【详解】  支付宝网页版在线入口 支付宝官网电脑登录入口  芒果TV官网登录入口 芒果TV官方网站登录入口  毒蘑菇VOLUMESHADER_BM官网首页登录入口 毒蘑菇VOLUMESHADER_BM官网首页登录入口说明  Microsoft Edge网页字体太淡看不清怎么办_Microsoft Edge字体渲染优化技巧  鸿蒙单条备忘录如何加密  《KARDS》冬季扩展包“国土阵线”上线！全新“协力”机制改变战场格局  《雷电模拟器》自动点击设置方法  聚水潭ERP后台管理系统登录 聚水潭ERP官方登录通道  小米civi如何设置锁屏时间  解决Pandas DataFrame高度碎片化警告：高效创建多列的策略  Win10如何关闭操作中心通知 Win10免打扰设置全攻略【清爽】  HTML中多图片上传与预览：解决ID冲突的专业指南  抖音火山版如何进行提现  喜茶GO更换登录账号方法  《我的恋爱逃生攻略》中文名字输入方法  《领英》查看屏蔽名单方法  百度输入法在AutoCAD中无法输入中文怎么办_百度输入法CAD输入异常解决方法  Highcharts雷达图径向轴数值标签实现教程  c++如何掌握指针的核心用法_c++指针入门到精通指南  怎么恢复删除的电脑文件_数据恢复软件使用教程  天天漫画2025最新入口 天天漫画永久有效登录入口  鲨鱼剧场app金币获取方法  《环球网校》设置报考省市方法  解决J*aScript动态图片上传中ID重复问题：在同一页面显示多张独立图片  Win10锁屏时间怎么设置 Win10调整自动锁屏时间方法  QQ邮箱PC端登录页面_QQ邮箱网页版登录界面  《下一站江湖2》心法融合技巧  PHP与SQL实践：高效实现数据复制与特定列值修改  Windows Audio服务启动失败怎么办_电脑没声音的终极服务修复法【修复】  123网页端官方登录页 123邮箱网页版即时通讯服务  使用TinyButStrong生成HTML并结合Dompdf创建PDF教程  Excel如何设置动态下拉菜单_Excel表格下拉选项快速方法  Symfony路由参数转换器：实体存在性验证与错误处理策略  韩小圈网页版PC端入口 韩小圈网页版官方网站入口  如何使用 Optional 类型并满足 Pylint 的类型检查  如何自定义苹果手机铃声  mysql如何配置从库只读_mysql从库只读设置方法  b站怎么用微信登录_b站微信登录方法 

 2025-11-15