如何让checkWinner函数在游戏全程持续运行以判定胜负？

方案1：定时轮询检测（最简单直接） #

通过setInterval让checkWinner每隔固定时间执行一次，全程监控玩家人数变化：

async function checkWinner() {
    const player1Count = document.getElementById('player1').innerText;
    const player2Count = document.getElementById('player2').innerText;

    if (player1Count === '0') {
        message.innerHTML = `<p>${players[1]} 你赢了游戏！</p>`;
        await sleep(3000);
        window.location.reload();
    } else if (player2Count === '0') {
        message.innerHTML = `<p>${players[0]} 你赢了游戏！</p>`;
        await sleep(3000);
        window.location.reload();
    }
}

// 游戏启动时开启检测，每隔500ms检查一次（可根据需求调整间隔）
const winnerCheckTimer = setInterval(checkWinner, 500);

// 注意：游戏结束后记得用clearInterval(winnerCheckTimer)停止检测，避免内存浪费

方案2：DOM变化监听（更高效） #

用MutationObserver监听玩家人数元素的文本变化，只有当内容改变时才触发检测，无需定时轮询：

async function checkWinner() {
    const player1Count = document.getElementById('player1').innerText;
    const player2Count = document.getElementById('player2').innerText;

    if (player1Count === '0') {
        message.innerHTML = `<p>${players[1]} 你赢了游戏！</p>`;
        await sleep(3000);
        window.location.reload();
    } else if (player2Count === '0') {
        message.innerHTML = `<p>${players[0]} 你赢了游戏！</p>`;
        await sleep(3000);
        window.location.reload();
    }
}

// 创建观察者实例，监听文本内容变更
const observer = new MutationObserver(checkWinner);

// 绑定需要监听的玩家元素
const player1El = document.getElementById('player1');
const player2El = document.getElementById('player2');

// 开启监听，监听子节点变化（文本变更属于子节点变化范畴）
observer.observe(player1El, { childList: true, subtree: true });
observer.observe(player2El, { childList: true, subtree: true });

// 游戏结束后可调用observer.disconnect()停止监听

方案3：修改人数时即时检测（最精准） #

如果游戏中有专门修改玩家剩余人数的函数，每次修改完成后直接调用checkWinner，无延迟且精准：

async function checkWinner() {
    const player1Count = document.getElementById('player1').innerText;
    const player2Count = document.getElementById('player2').innerText;

    if (player1Count === '0') {
        message.innerHTML = `<p>${players[1]} 你赢了游戏！</p>`;
        await sleep(3000);
        window.location.reload();
    } else if (player2Count === '0') {
        message.innerHTML = `<p>${players[0]} 你赢了游戏！</p>`;
        await sleep(3000);
        window.location.reload();
    }
}

// 假设你有修改玩家人数的函数，在修改后立即检测
function updatePlayerCount(playerNum, newCount) {
    const targetEl = document.getElementById(`player${playerNum}`);
    targetEl.innerText = newCount;
    // 修改完成后立刻触发获胜检测
    checkWinner();
}

额外优化提示 #

• 建议把innerText === '0'改成parseInt(innerText.trim()) === 0，避免文本中存在空格或其他无关字符导致判断失效
• 可以给checkWinner加一个执行锁，比如用一个全局变量标记是否已经触发获胜逻辑，防止重复执行

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