如何在井字棋（Tic-Tac-Toe）游戏结束后重置状态？

核心实现要点 #

要完成点击重启按钮重置棋盘的需求，需实现startGame()函数，同时覆盖以下关键环节：

• 清除所有格子的X/O标记
• 重置玩家回合顺序
• 恢复格子的点击交互能力
• 隐藏胜利、平局的结束弹窗

完整优化代码 #

const squares = document.querySelectorAll('.grid')
const XCLASS = "x"
const OCLASS = "o"
const textElementWin = document.getElementById('xowinMessage')
const screenElementWin = document.querySelector('.winningScreen')
const textElementDraw = document.getElementById('drawMessage')
const screenElementDraw = document.querySelector('.drawScreen')
const restartButtons = document.querySelectorAll('.button')
const winCombinations=[
    [0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]
]

let circleturn

// 初始化/重置游戏核心函数
function startGame() {
    // 重置玩家回合（默认X先手，可按需调整）
    circleturn = false
    // 批量重置所有格子状态
    squares.forEach(square => {
        square.classList.remove(XCLASS, OCLASS)
        square.textContent = '' // 若格子用文本显示X/O，需清空内容
        // 重新绑定点击事件，解决原{once:true}导致的重启后无法点击问题
        square.removeEventListener('click', handleEvent)
        square.addEventListener('click', handleEvent, { once: true })
    })
    // 统一隐藏所有结束弹窗
    screenElementWin.classList.remove('show')
    screenElementDraw.classList.remove('show')
}

function placeItem(cell, currentPlayer) {
    cell.classList.add(currentPlayer)
}

function checkWin(currentPlayer) {
    return winCombinations.some(combination => {
        return combination.every(index => squares[index].classList.contains(currentPlayer))
    })
}

function checkDraw() {
    return [...squares].every(square => square.classList.contains(XCLASS) || square.classList.contains(OCLASS))
}

function swapTurn() {
    circleturn = !circleturn
}

function handleEvent(event) {
    const cell = event.target
    const currentPlayer = circleturn ? OCLASS : XCLASS
    placeItem(cell, currentPlayer)
        
    if (checkWin(currentPlayer)) {
        screenElementWin.classList.add('show')
        textElementWin.innerText = `${currentPlayer.toUpperCase()} wins!`
    } else if (checkDraw()) {
        screenElementDraw.classList.add('show')
        textElementDraw.innerText = "It's a tie!"
    } else {
        swapTurn()
    }
}

// 绑定所有重启按钮事件
restartButtons.forEach(button => button.addEventListener('click', startGame))

// 页面加载时自动初始化游戏
startGame()

简洁优化说明 #

• 批量操作简化：用classList.remove(XCLASS, OCLASS)一次性清除两类标记，减少重复代码
• 统一弹窗处理：在重置函数中同时隐藏胜利和平局弹窗，避免分散逻辑
• 事件绑定重构：重置时重新绑定点击事件，解决原{once:true}导致的交互失效问题
• 初始自动触发：页面加载时调用startGame()，无需手动初始化游戏状态

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