解决井字棋游戏中的平局判断问题

碧海醫心

发布时间：2025-11-15 23:22:02

746人浏览过

来源于php中文网

原创

解决井字棋游戏中的平局判断问题

本文旨在帮助开发者解决在JavaScript井字棋游戏中，当棋盘填满时，平局判断与胜负判断冲突的问题。通过修改`checkWin()`和`draw()`函数，确保在棋盘填满且没有玩家获胜时，正确地判定为平局，避免胜负判断的错误覆盖。

在开发井字棋游戏时，一个常见的挑战是如何正确地判断平局，尤其是在棋盘填满的同时，还要避免与胜负判断产生冲突。以下提供一种解决方案，通过修改 checkWin() 和 draw() 函数，确保逻辑的正确性。

问题分析

原代码中，draw() 函数仅简单地检查棋盘是否已满，并直接输出 "tie"。然而，如果最后一步导致某位玩家获胜，checkWin() 函数会先判断出胜者，但 draw() 函数随后仍然会执行，导致最终输出 "tie"，覆盖了正确的胜负结果。

解决方案：修改 checkWin() 和 draw() 函数

核心思路是让 checkWin() 函数返回胜者（如果有），否则返回空字符串。draw() 函数返回一个布尔值，表示是否平局。在主循环中，首先检查是否有胜者，如果没有，再检查是否平局。

Logome

AI驱动的Logo生成工具

下载

1. 修改 checkWin() 函数

将 checkWin() 函数修改为返回胜者，如果没有胜者则返回 null。

function checkWin(){
    if (squares[0].textContent == 'X' && squares[1].textContent == 'X' && squares[2].textContent == 'X') return 'X Wins';
    if (squares[0].textContent == 'O' && squares[1].textContent == 'O' && squares[2].textContent == 'O') return 'O Wins';
    if (squares[3].textContent == 'X' && squares[4].textContent == 'X' && squares[5].textContent == 'X') return 'X Wins';
    if (squares[3].textContent == 'O' && squares[4].textContent == 'O' && squares[5].textContent == 'O') return 'O Wins';
    if (squares[6].textContent == 'X' && squares[7].textContent == 'X' && squares[8].textContent == 'X') return 'X Wins';
    if (squares[6].textContent == 'O' && squares[7].textContent == 'O' && squares[8].textContent == 'O') return 'O Wins';
    if (squares[0].textContent == 'X' && squares[3].textContent == 'X' && squares[6].textContent == 'X') return 'X Wins';
    if (squares[0].textContent == 'O' && squares[3].textContent == 'O' && squares[6].textContent == 'O') return 'O Wins';
    if (squares[1].textContent == 'X' && squares[4].textContent == 'X' && squares[7].textContent == 'X') return 'X Wins';
    if (squares[1].textContent == 'O' && squares[4].textContent == 'O' && squares[7].textContent == 'O') return 'O Wins';
    if (squares[2].textContent == 'X' && squares[5].textContent == 'X' && squares[8].textContent == 'X') return 'X Wins';
    if (squares[2].textContent == 'O' && squares[5].textContent == 'O' && squares[8].textContent == 'O') return 'O Wins';
    if (squares[0].textContent == 'X' && squares[4].textContent == 'X' && squares[8].textContent == 'X') return 'X Wins';
    if (squares[0].textContent == 'O' && squares[4].textContent == 'O' && squares[8].textContent == 'O') return 'O Wins';
    if (squares[2].textContent == 'X' && squares[4].textContent == 'X' && squares[6].textContent == 'X') return 'X Wins';
    if (squares[2].textContent == 'O' && squares[4].textContent == 'O' && squares[6].textContent == 'O') return 'O Wins';
    return null;
}

2. 修改 draw() 函数

修改 draw() 函数，使其返回一个布尔值，表示是否平局。只有当所有格子都被填充且没有玩家获胜时，才返回 true。

function draw(){
    return squares.every(square => square.textContent !== '');
}

3. 修改主循环

在主循环中，先调用 checkWin() 函数，如果返回了胜者，则显示胜者信息。否则，调用 draw() 函数，如果返回 true，则显示平局信息。

squares.forEach(function(e, i){
    squares[i].onclick = ()=>{
        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";

        let winner = checkWin();
        if (winner) {
            message.textContent = winner;
        } else if (draw()) {
            message.textContent = 'Draw';
            console.log('Tie Game');
        }
    }
});

完整代码示例 (修改后的关键部分)

function checkWin(){
    if (squares[0].textContent == 'X' && squares[1].textContent == 'X' && squares[2].textContent == 'X') return 'X Wins';
    if (squares[0].textContent == 'O' && squares[1].textContent == 'O' && squares[2].textContent == 'O') return 'O Wins';
    if (squares[3].textContent == 'X' && squares[4].textContent == 'X' && squares[5].textContent == 'X') return 'X Wins';
    if (squares[3].textContent == 'O' && squares[4].textContent == 'O' && squares[5].textContent == 'O') return 'O Wins';
    if (squares[6].textContent == 'X' && squares[7].textContent == 'X' && squares[8].textContent == 'X') return 'X Wins';
    if (squares[6].textContent == 'O' && squares[7].textContent == 'O' && squares[8].textContent == 'O') return 'O Wins';
    if (squares[0].textContent == 'X' && squares[3].textContent == 'X' && squares[6].textContent == 'X') return 'X Wins';
    if (squares[0].textContent == 'O' && squares[3].textContent == 'O' && squares[6].textContent == 'O') return 'O Wins';
    if (squares[1].textContent == 'X' && squares[4].textContent == 'X' && squares[7].textContent == 'X') return 'X Wins';
    if (squares[1].textContent == 'O' && squares[4].textContent == 'O' && squares[7].textContent == 'O') return 'O Wins';
    if (squares[2].textContent == 'X' && squares[5].textContent == 'X' && squares[8].textContent == 'X') return 'X Wins';
    if (squares[2].textContent == 'O' && squares[5].textContent == 'O' && squares[8].textContent == 'O') return 'O Wins';
    if (squares[0].textContent == 'X' && squares[4].textContent == 'X' && squares[8].textContent == 'X') return 'X Wins';
    if (squares[0].textContent == 'O' && squares[4].textContent == 'O' && squares[8].textContent == 'O') return 'O Wins';
    if (squares[2].textContent == 'X' && squares[4].textContent == 'X' && squares[6].textContent == 'X') return 'X Wins';
    if (squares[2].textContent == 'O' && squares[4].textContent == 'O' && squares[6].textContent == 'O') return 'O Wins';
    return null;
}

function draw(){
    return squares.every(square => square.textContent !== '');
}

squares.forEach(function(e, i){
    squares[i].onclick = ()=>{
        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";

        let winner = checkWin();
        if (winner) {
            message.textContent = winner;
        } else if (draw()) {
            message.textContent = 'Draw';
            console.log('Tie Game');
        }
    }
});

总结

通过修改 checkWin() 和 draw() 函数的返回值，并在主循环中先检查胜者，再检查平局，可以有效地解决井字棋游戏中平局判断与胜负判断冲突的问题。这种方法确保了在任何情况下，游戏都能正确地判断胜负或平局。记住，清晰的逻辑和适当的函数设计是解决问题的关键。

JavaScript 中日期排序与按月分组的完整实现教程

将 JavaScript 输出从控制台迁移至网页 DOM 的完整实践指南

JavaScript 中实现包含上下界的随机整数生成（含完整示例与原理详解）

JavaScript 中按日期排序并按月份分组列表项的完整实现指南

动态修改 Flickity 轮播图指示器（Page Dots）样式的完整指南

在线游戏

海量精品小游戏合集，无需安装即点即玩，休闲益智、动作闯关应有尽有，秒开即玩，轻松解压，快乐停不下来

下载

相关专题

c语言中null和NULL的区别

c语言中null和NULL的区别是：null是C语言中的一个宏定义，通常用来表示一个空指针，可以用于初始化指针变量，或者在条件语句中判断指针是否为空；NULL是C语言中的一个预定义常量，通常用来表示一个空值，用于表示一个空的指针、空的指针数组或者空的结构体指针。

252

2023.09.22

java中null的用法

在Java中，null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量，包括类、接口、数组、字符串等。想了解更多null的相关内容，可以阅读本专题下面的文章。

1008

2024.03.01

js 字符串转数组

js字符串转数组的方法：1、使用“split()”方法；2、使用“Array.from()”方法；3、使用for循环遍历；4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容，供大家免费下载体验。

718

2023.08.03

js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容，供大家免费下载体验。

219

2023.09.04

java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友，请阅读本专题下面的的有关文章，欢迎大家来php中文网学习。

1561

2023.10.24

字符串介绍

字符串是一种数据类型，它可以是任何文本，包括字母、数字、符号等。字符串可以由不同的字符组成，例如空格、标点符号、数字等。在编程中，字符串通常用引号括起来，如单引号、双引号或反引号。想了解更多字符串的相关内容，可以阅读本专题下面的文章。

646

2023.11.24

java读取文件转成字符串的方法

Java8引入了新的文件I/O API，使用java.nio.file.Files类读取文件内容更加方便。对于较旧版本的Java，可以使用java.io.FileReader和java.io.BufferedReader来读取文件。在这些方法中，你需要将文件路径替换为你的实际文件路径，并且可能需要处理可能的IOException异常。想了解更多java的相关内容，可以阅读本专题下面的文章。

1148

2024.03.22

php中定义字符串的方式

php中定义字符串的方式：单引号；双引号；heredoc语法等等。想了解更多字符串的相关内容，可以阅读本专题下面的文章。

1122

2024.04.29

Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开，深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例，分析内存安全保障原理与零成本抽象优势，并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学，掌握在高性能与安全性并重场景中的工程实践能力。

2026.03.05

热门下载

网站特效

网站源码

网站素材

前端模板