解决井字棋游戏中的平局判断问题-js教程-PHP中文网

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

碧海醫心

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

原创

720人浏览过

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

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

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

问题分析

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

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

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

1. 修改 checkWin() 函数

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

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

查看详情

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');
        }
    }
});

登录后复制