如何在井字棋游戏获胜后禁用格子点击功能

问题根源 #

你已经定义了gameover变量标记游戏结束，但没有在点击格子的核心逻辑里检查这个状态，同时平局场景未标记游戏结束、重置时未重置gameover状态，导致获胜/平局后用户依然能操作格子。

修复步骤 #

1. 在点击逻辑开头添加游戏结束检查 #

每次点击格子时，先判断游戏是否已结束，若是则直接终止后续操作：

function boxClicked(box) {
    // 新增：游戏结束则直接返回，不执行落子逻辑
    if (gameover) return;

    if (box.innerHTML === "") {
        // 原有落子逻辑...
    } else {
        console.log("This box is already occupied!");
    }
}

2. 平局时标记游戏结束 #

你的平局判断逻辑里没有设置gameover = true，导致平局后用户仍可点击，需补充：

// Check if all 9 boxes are occupied
if (xCount + oCount === 9) {
    console.log('Tie!');
    windisplay.textContent = "Tie!";
    // 新增：平局也标记游戏结束
    gameover = true;
}

3. 重置游戏时恢复初始状态 #

原来的重置函数未重置gameover和玩家回合，导致重置后游戏仍处于结束状态，需补充：

function resetgame() {
    p1arr = [];
    p2arr = [];
    for (var i = 0; i < boxes.length; i++) {
        boxes[i].innerHTML = "";
    }
    windisplay.textContent = "";
    // 新增：重置游戏结束状态
    gameover = false;
    // 重置玩家回合，确保回到Player1先手
    player1.turn = true;
    player2.turn = false;
}

完整修改后的核心代码片段 #

function boxClicked(box) {
    if (gameover) return; // 游戏结束检查
    if (box.innerHTML === "") {
        if (player1.turn === true) {
            box.textContent = player1.mark;
            p1arr[box.id] = player1.mark;
            console.log(p1arr);
            player1.turn = false;
            player2.turn = true;
            checkwinner();
        }
        else if (player2.turn === true) {
            box.textContent = player2.mark;
            p2arr[box.id] = player2.mark;
            console.log(p2arr);
            player1.turn = true;
            player2.turn = false;
            checkwinner();
        }
    } else {
        console.log("This box is already occupied!");
    }
}

function checkwinner() {
    var isWinner1 = checkWinCombos(p1arr);
    if (isWinner1) {
        console.log("Winner is X! ");
        windisplay.textContent = "Winner is X! ";
        gameover = true;
    }

    var isWinner2 = checkWinCombos(p2arr);
    if (isWinner2) {
        console.log("Winner is O!");
        windisplay.textContent = "Winner is O! ";
        gameover = true;
    }

    // ...原有checkWinCombos和countOccurrences函数...

    const oCount = countOccurrences(p1arr, 'O') + countOccurrences(p2arr, 'O');
    const xCount = countOccurrences(p1arr, 'X') + countOccurrences(p2arr, 'X');

    if (xCount + oCount === 9) {
        console.log('Tie!');
        windisplay.textContent = "Tie!";
        gameover = true; // 平局标记游戏结束
    }
}

function resetgame() {
    p1arr = [];
    p2arr = [];
    for (var i = 0; i < boxes.length; i++) {
        boxes[i].innerHTML = "";
    }
    windisplay.textContent = "";
    gameover = false; // 重置游戏状态
    player1.turn = true; // 重置先手
    player2.turn = false;
}

内容的提问来源于stack exchange，提问作者Ujjawal