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

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

问题分析

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

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

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

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

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