html 如何在JavaScript中重置井字游戏板?

ltskdhd1  于 11个月前  发布在  Java
关注(0)|答案(1)|浏览(92)
function resetBoard() {
    currentPlayer = 1;
    isGameStarted = false;
    gameBoard = [
        [null, null, null],
        [null, null, null],
        [null, null, null]
    ];

    const startButton = document.getElementById("start-btn");
    startButton.disabled = false;

    const playerNames = document.querySelectorAll(".player-name");
    playerNames.forEach(name => name.classList.remove("active"));

    const cells = document.querySelectorAll(".cell");
    cells.forEach(cell => {
        cell.textContent = "";
        cell.classList.add("disabled");
        cell.style.backgroundColor = "#d7bbf7";
    });

    const resultDiv = document.getElementById("current-player");
    resultDiv.textContent = "";

    const messageDiv = document.getElementById("message");
    messageDiv.textContent = "";

    const gameBoardDiv = document.getElementById("game-board");
    gameBoardDiv.style.display = "none";

    player1Name = "";
    player2Name = "";
    document.getElementById("player1-name").textContent = "Player 1";
    document.getElementById("player2-name").textContent = "Player 2";
}

function makeMove(row, col) {
    if (!isGameStarted) return;

    const cell = document.querySelector(`.row:nth-child(${row + 1}) .cell:nth-child(${col + 1})`);
    if (cell.textContent !== "") return;

    if (currentPlayer === 1) {
        cell.textContent = "X";
        gameBoard[row][col] = "X";
    } else if (currentPlayer === 2) {
        cell.textContent = "O";
        gameBoard[row][col] = "O";
    }

    if (checkWin()) {
        const resultDiv = document.getElementById("message");
        resultDiv.textContent = "You won, " + getCurrentPlayerName() + "!";
        isGameStarted = false;
        resetBoard();
    } else if (checkDraw()) {
        const resultDiv = document.getElementById("message");
        resultDiv.textContent = "It's a draw!";
        isGameStarted = false;
        resetBoard();
    } else {
        currentPlayer = currentPlayer === 1 ? 2 : 1;
        const resultDiv = document.getElementById("current-player");
        resultDiv.textContent = "It's your turn " + getCurrentPlayerName();
    }
}

字符串
为什么我的函数resetBoard()不起作用?即它确实工作,但当我完成一场比赛,它不让我看到结果,如果它是平局或它有赢家,但它立即重置董事会.我想知道为什么会发生这种情况,以及如何解决这个问题,如果有人愿意帮助。

cs7cruho

cs7cruho1#

问题

这很简单但是为了理解问题是什么,让我们来讨论一下代码运行的结构:

流程

1.动手
1.检查结果
1.[赢/平局] -> resultDiv.textContent = "Whatever the result is"

  1. ResetBoard -> resultDiv.textContent = "";(第23行)
    所以这里发生的是,你的代码确实设置了结果,但是在设置结果之后,它重置了board,这重置了结果div的内容

解决方案

方案一

每个问题都有多种解决方案。但我认为最简单的解决方案是,而不是重置董事会的权利后,游戏结束,只是显示结果,隐藏董事会,并显示一个按钮,将重置董事会点击。这不仅解决了问题,还改善了用户体验

<button onclick="resetBoard()">Play Again</button>

字符串

方案二:

如果你不喜欢上面的,你可以使用警告框来显示消息/结果

方案三:

另一种解决方案是仅在移动后而不是在板重置期间删除文本。例如,不要删除resetBoard()中的文本,而是删除makeMove()中的文本。

相关问题