不确定如何重新启动井字游戏？答案

【问题标题】：Not sure how to restart Tic Tac Toe game?不确定如何重新启动井字游戏？
【发布时间】：2023-01-08 01:23:51
【问题描述】：

let pos = Array.from(document.querySelectorAll('data-cell'));
const vsPlayerMode = document.getElementById('gMode2');
const vsCpuMode = document.getElementById('gMode1');
let winPositions = [
    ['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 currentPlayer = true;
let xPlayer = [];
let oPlayer = [];


function vsPlayer() {
    document.addEventListener('click', event => {
        pos = event.target;
        let posTrue = pos.hasAttribute('data-cell')

        if (posTrue) {
            pos.style.pointerEvents = "none"
            let cell = pos.getAttribute('data-cell')
            currentPlayer === true ? xPlayer.push(cell) : oPlayer.push(cell)
            pos.classList.add(currentPlayer ? 'x' : 'o')
            currentPlayer = !currentPlayer

            if (xPlayer.length >= 3) {
                checkWinner()
            }
        }
    });
}

function checkWinner() {
    winPositions.forEach(winPos => {
        const xWon = winPos.every(pos => xPlayer.includes(pos))
        const oWon = winPos.every(pos => oPlayer.includes(pos))

        if (xWon) {
            let xScore = parseInt(document.getElementById('xScore').innerText);

            document.getElementById('startAgain').style.display = 'block';
            document.getElementById('text').textContent = "X Won!";

            document.getElementById('xScore').innerText = xScore + 1;
            restartGame();
        } if(oWon) {
            let oScore = parseInt(document.getElementById('oScore').innerText);

            document.getElementById('startAgain').style.display = 'block';
            document.getElementById('text').textContent = "O Won!";

            document.getElementById('oScore').innerText = oScore + 1;
            restartGame();
        }else if (xPlayer.length >= 5) {
            document.getElementById('startAgain').style.display = 'block';
            document.getElementById('text').textContent = "It's a Draw!";
            restartGame()
        }
    })
}

function restartGame() {
    document.getElementById('restart').addEventListener('click', () => {
        document.getElementById('startAgain').style.display = 'none';
        /*Some code here */
        }
    })
    currentPlayer = true;
    xPlayer = [];
    oPlayer = [];
    showGame();
}

试图重新启动游戏不知道该怎么做。也许需要移动整个代码。尝试通过每个元素运行的 forEach 方法，尝试循环。我似乎无法从节点列表中删除 x 和 o。我得到 forEach is not a function 错误消息或只是完全跳过循环。如果您需要任何其他信息，请告诉我。

【问题讨论】：

您是否尝试过使用location.reload() 重新加载页面？
这不是一个完整的答案，但将已变异的事物的状态重置回其原始状态通常是困难的方法，并且是错误的来源。您可以销毁代表整个游戏的整个 DOM 节点，然后重新构建它。如果代表游戏的 HTML 来自服务器，您可以重写它，使其在客户端创建，或者您可以在页面加载时在内存中保留它的副本。然后使用此副本覆盖所有内容并从头开始设置游戏。
或者您可以像@MichaelM 所说的那样重新加载页面：D。取决于您的需求

标签： javascript tic-tac-toe nodelist

【解决方案1】：

您可以重置游戏的整个状态，但在大多数情况下，最好使用 location.reload() 来重新加载页面。所有变量和 DOM 都将被重置，因此如果您需要保留某些状态，您应该使用 localStorage 或 sessionStorage。

【讨论】：