我現在設定的是重繪 頁面的功能。但我想讓它手動重啟而不重繪 頁面。我嘗試將板陣列設定回空值,并嘗試將方塊的 textContent 也設定為空,但無法使其作業。
這就是我目前在我的 JS 上設定的內容。我已經堅持了很長一段時間。請幫忙
var playerX = "X";
var playerO = "O";
var currentPlayer = playerX;
var gameStart = false;
window.onload = function() {
setBoard();
}
function setBoard() {
board = [
[' ', ' ', ' '],
[' ', ' ', ' '],
[' ', ' ', ' ']
]
for (let i = 0; i < 3; i ) {
for (let j = 0; j < 3; j ) {
let square = document.createElement("div"); //creates divs in board container
square.id = i.toString() "-" j.toString(); //adds id to each square
square.classList.add("square");
if (i == 0 || i == 1) { //adds the borders
square.classList.add("horizontal-line");
}
if (j == 0 || j == 1) {
square.classList.add("vertical-line");
}
square.addEventListener("click", setSquare); //event listener
document.querySelector("#board").append(square);
document.querySelector("#next-turn").textContent = "X's turn"
}
}
}
function setSquare() {
if (gameStart) {
return;
}
let position = this.id.split("-") //splits the id to an array
let i = parseInt(position[0]);
let j = parseInt(position[1]);
if (board[i][j] != ' ') { //prevents clicking on the same square
return;
}
board[i][j] = currentPlayer; //updates js board state
this.innerText = currentPlayer; //updates html board state
if (currentPlayer == playerX) { //changes players
currentPlayer = playerO;
document.querySelector("#next-turn").textContent = currentPlayer "'s turn";
} else {
currentPlayer = playerX;
document.querySelector("#next-turn").textContent = currentPlayer "'s turn";
}
checkWinner();
}
const restartBtn = document.querySelector("#restart-btn");
var container = document.querySelector("#board");
var square = document.querySelector(".square");
restartBtn.addEventListener('click', resetGame);
function resetGame () {
window.location.reload();
}
uj5u.com熱心網友回復:
您需要將板變數設為全域變數,然后創建一個名為重新啟動的 js 函式,并在該函式中調整板資料,如
board =[]
function restart() {
board = [
[' ', ' ', ' '],
[' ', ' ', ' '],
[' ', ' ', ' ']
]
}
<button onclick="restart()">restart</button>
您可以創建一個重新啟動按鈕,并在該按鈕單擊時呼叫函式重新啟動。
我希望這對你有用:)
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/533025.html
