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()不起作用?即它确实工作,但当我完成一场比赛,它不让我看到结果,如果它是平局或它有赢家,但它立即重置董事会.我想知道为什么会发生这种情况,以及如何解决这个问题,如果有人愿意帮助。
1条答案
按热度按时间cs7cruho1#
问题
这很简单但是为了理解问题是什么,让我们来讨论一下代码运行的结构:
流程
1.动手
1.检查结果
1.[赢/平局] ->
resultDiv.textContent = "Whatever the result is"
resultDiv.textContent = "";
(第23行)所以这里发生的是,你的代码确实设置了结果,但是在设置结果之后,它重置了board,这重置了结果div的内容
解决方案
方案一
每个问题都有多种解决方案。但我认为最简单的解决方案是,而不是重置董事会的权利后,游戏结束,只是显示结果,隐藏董事会,并显示一个按钮,将重置董事会点击。这不仅解决了问题,还改善了用户体验
字符串
方案二:
如果你不喜欢上面的,你可以使用警告框来显示消息/结果
方案三:
另一种解决方案是仅在移动后而不是在板重置期间删除文本。例如,不要删除
resetBoard()
中的文本,而是删除makeMove()
中的文本。