如何实现石头剪刀布游戏点击开始匹配按钮前无计分自由游玩功能？

页面崩溃原因 #

JavaScript是单线程运行的，同步while循环会持续占用主线程，阻塞页面渲染、用户交互等所有事件的执行，只要循环终止条件没触发，页面就会直接卡死。这类需要等待用户交互触发的逻辑，不能用同步while循环实现，改用状态标记控制即可。

具体修改步骤 #

1. 新增全局状态变量 #

在你现有全局变量的位置新增2个变量：

// 新增全局变量
let isMatching = false; // 默认不开启计分
const winScore = 3; // 可自定义获胜需要的分值

2. 修改playRound函数的计分逻辑 #

只有isMatching为true时才累计分数，每次计分后判断是否达到获胜分值：
你现有playRound里所有的computerPoints = computerPoints + 1和playerPoints = playerPoints + 1的位置，都包裹一层判断：

// 示例，所有计分位置都按这个改
if(isMatching) {
    computerPoints = computerPoints + 1;
    // 新增计分后判断是否结束对局
    checkWin();
}

然后新增checkWin判断胜负的函数：

function checkWin() {
    if (playerPoints >= winScore) {
        resultPara.textContent = "恭喜你赢得了本次对局！";
        isMatching = false; // 关闭计分，回到自由游玩
        // 可以在这里加你需要的结束提示逻辑
    } else if (computerPoints >= winScore) {
        resultPara.textContent = "很遗憾，电脑赢得了本次对局！";
        isMatching = false;
    }
    // 每次计分后更新页面分数显示
    playerScore.textContent = `玩家分数：${playerPoints}`;
    computerScore.textContent = `电脑分数：${computerPoints}`;
}

3. 补全startMatch函数逻辑 #

你现在只绑定了startbtn的点击事件，还没实现对应函数：

function startMatch() {
    // 重置分数
    playerPoints = 0;
    computerPoints = 0;
    // 更新页面分数显示
    playerScore.textContent = `玩家分数：${playerPoints}`;
    computerScore.textContent = `电脑分数：${computerPoints}`;
    // 开启计分状态
    isMatching = true;
    resultPara.textContent = "匹配成功，对局开始！";
}

额外代码优化提示 #

你现有代码里有两处小问题可以顺便修正：

• 选择器const compbtn = document.querySelector('compbtn'); 少了id前缀#，应该是#compbtn
• 电脑分数容器的id拼写是comupterScoreContainer，注意和HTML里的id保持一致，避免选择不到元素

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