求助：如何为JavaScript井字棋实现无刷新重启按钮

你的问题出在之前的重置逻辑没处理到位——要么是没遍历所有方块清空内容，要么是重复调用setBoard导致新方块叠加在旧方块上。下面是调整后的代码，实现无刷新重启：

关键修改点 #

1. 给board变量添加显式声明，避免全局变量污染
2. 重写resetGame函数，替换页面刷新逻辑为：
   • 重置游戏核心数据（board数组、当前玩家、游戏状态）
   • 清空所有棋盘方块的内容
   • 更新回合提示文本

修改后的完整代码 #

var playerX = "X";
var playerO = "O";
var currentPlayer = playerX;
var gameStart = false;
let board; // 显式声明board变量

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");
            square.id = i.toString() + "-" + j.toString();
            square.classList.add("square");
            if (i == 0 || i == 1) {
                square.classList.add("horizontal-line");
            }
            if (j == 0 || j == 1) {
                square.classList.add("vertical-line");
            }
            square.addEventListener("click", setSquare);
            document.querySelector("#board").append(square);
            document.querySelector("#next-turn").textContent = "X's turn"
        }
    }
}

function setSquare() {
    if (gameStart) {
        return;
    }
    let position = this.id.split("-")
    let i = parseInt(position[0]);
    let j = parseInt(position[1]);

    if (board[i][j] != ' ') {
        return;
    }

    board[i][j] = currentPlayer;
    this.innerText = currentPlayer;

    if (currentPlayer == playerX) {
        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");

restartBtn.addEventListener('click', resetGame);

function resetGame () {
    // 重置board数组为初始状态
    board = [
        [' ', ' ', ' '],
        [' ', ' ', ' '],
        [' ', ' ', ' ']
    ];
    // 遍历所有方块并清空内容
    const squares = document.querySelectorAll(".square");
    squares.forEach(square => {
        square.textContent = '';
    });
    // 重置当前玩家和回合提示
    currentPlayer = playerX;
    document.querySelector("#next-turn").textContent = "X's turn";
    // 重置游戏状态，确保可以重新开始点击
    gameStart = false;
}

// 补充获胜检测的示例逻辑（替换成你自己的实现即可）
function checkWinner() {
    // 检查行
    for (let i = 0; i < 3; i++) {
        if (board[i][0] === board[i][1] && board[i][1] === board[i][2] && board[i][0] !== ' ') {
            gameStart = true;
            alert(`${board[i][0]} 获胜！`);
            return;
        }
    }
    // 检查列
    for (let i = 0; i < 3; i++) {
        if (board[0][i] === board[1][i] && board[1][i] === board[2][i] && board[0][i] !== ' ') {
            gameStart = true;
            alert(`${board[0][i]} 获胜！`);
            return;
        }
    }
    // 检查对角线
    if (board[0][0] === board[1][1] && board[1][1] === board[2][2] && board[0][0] !== ' ') {
        gameStart = true;
        alert(`${board[0][0]} 获胜！`);
        return;
    }
    if (board[0][2] === board[1][1] && board[1][1] === board[2][0] && board[0][2] !== ' ') {
        gameStart = true;
        alert(`${board[0][2]} 获胜！`);
        return;
    }
    // 检查平局
    let isDraw = true;
    for (let i = 0; i < 3; i++) {
        for (let j = 0; j < 3; j++) {
            if (board[i][j] === ' ') {
                isDraw = false;
                break;
            }
        }
        if (!isDraw) break;
    }
    if (isDraw) {
        gameStart = true;
        alert("平局！");
    }
}

额外说明 #

• 原代码里document.querySelector(".square")只能获取第一个方块，必须用document.querySelectorAll(".square")遍历所有方块才能清空全部内容
• 重置时必须把gameStart设回false，否则游戏结束后点击重启，玩家依然无法点击方块
• 获胜检测函数是补充的示例逻辑，如果你的原代码已有实现，直接替换即可

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