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

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

聖光之護

发布： 2025-11-15 21:36:16

原创

626人浏览过

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

本文针对JavaScript实现的井字棋游戏中，平局判断与胜负判断冲突的问题，提供了一种解决方案。通过修改`checkWin()`函数和`draw()`函数的返回值，并在主循环中进行判断，可以有效避免在游戏结束时同时显示胜负信息和平局信息的问题，提升用户体验。

在开发井字棋游戏时，一个常见的问题是在棋盘被填满时，如果最后一步导致了胜利，游戏会同时显示胜利信息和平局信息。这是因为平局的判断逻辑是在所有格子都被填充后触发，而没有考虑到最后一步可能已经决定了胜负。要解决这个问题，需要调整胜负判断和和平局判断的逻辑顺序和方式。

修改 checkWin() 函数

首先，修改 checkWin() 函数，使其返回获胜者（'X' 或 'O'）或空字符串（表示没有获胜者），而不是直接修改 message.textContent。

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

登录后复制

修改 draw() 函数

接下来，修改 draw() 函数，使其返回一个布尔值，表示是否平局。只有在所有格子都被填充，且没有获胜者的情况下，才返回 true。

AI建筑知识问答

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

查看详情

function draw(){
    for (let i = 0; i < squares.length; i++) {
        if (squares[i].textContent === '') {
            return false; // Not a draw, there are empty squares
        }
    }
    return true; // All squares are filled, it's a draw
}

登录后复制

更新主循环

最后，更新主循环，在每次点击后，先检查是否有获胜者，如果没有，再检查是否平局。

function board (){
    squares.forEach(function(e, i){
        squares[i].onclick = ()=>{
            if (squares[i].textContent === '') { // Only allow clicks on empty squares
                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 + ' Wins!';
                    // Disable further clicks
                    squares.forEach(square => square.onclick = null);
                    return;
                }

                if (draw()) {
                    message.textContent = 'Draw!';
                    console.log('Tie Game');
                    // Disable further clicks
                    squares.forEach(square => square.onclick = null);
                    return;
                }
            }
        }
    });
}

登录后复制

在这个修改后的主循环中，首先检查点击的格子是否为空，只有在为空时才允许落子。然后，在每次落子后，先调用 checkWin() 函数检查是否有获胜者。如果有，则显示获胜信息并禁用后续点击。如果没有获胜者，再调用 draw() 函数检查是否平局。如果是平局，则显示平局信息并禁用后续点击。通过这样的逻辑，可以确保在游戏结束时只显示一个结果，避免胜负信息和平局信息同时出现的问题。

总结

通过修改 checkWin() 和 draw() 函数的返回值，并在主循环中按照先胜负判断后平局判断的顺序进行处理，可以有效地解决井字棋游戏中平局判断与胜负判断冲突的问题。这种方法不仅逻辑清晰，而且易于理解和维护，可以提高代码的可读性和可维护性。同时，禁用游戏结束后继续点击的功能，可以提供更好的用户体验。

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