原生JavaScript实现：玩家或电脑达10分时结束游戏

你的核心思路已经很到位了，只是几个细节需要调整和补充，就能让游戏结束的逻辑完全生效。我来帮你一步步完善：

1. 修正变量名拼写错误 #

你代码里初始化的是 gameIsOver，但后续判断时误用了 isGameOver——这是典型的拼写失误，会导致变量状态不生效！先把变量名统一：

let gameIsOver = false; // 保持这个变量名全程一致

// 结束游戏判断部分修改为：
if (pScore === 10) {
  gameIsOver = true;
  winner.textContent = `${user[0]} Wins the Game!`;
  // 这里还要添加后续处理，比如禁用操作按钮
} else if (cScore === 10) {
  gameIsOver = true;
  winner.textContent = `${user[1]} Wins the Game!`;
}

2. 确保每轮结束后触发获胜检查 #

把获胜判断逻辑封装成独立函数，然后在每一轮得分更新完成后调用它，这样才能实时检测是否达到获胜条件：

// 封装检查游戏结束的函数
function checkGameEnd() {
  if (pScore === 10) {
    gameIsOver = true;
    winner.textContent = `${user[0]} Wins the Game!`;
    disablePlayButtons(); // 禁用操作按钮，防止继续游戏
  } else if (cScore === 10) {
    gameIsOver = true;
    winner.textContent = `${user[1]} Wins the Game!`;
    disablePlayButtons();
  }
}

// 假设你处理单轮游戏的函数是这样的：
function playRound(playerChoice) {
  // 游戏结束后直接返回，不处理新操作
  if (gameIsOver) return;
  
  // 这里写你原本的逻辑：生成电脑选择、判断胜负、更新pScore和cScore...
  
  // 得分更新后立即检查是否结束游戏
  checkGameEnd();
}

3. 禁用操作按钮，避免游戏结束后继续操作 #

添加一个函数来禁用玩家选择石头/剪刀/布的按钮，从交互上阻止游戏结束后的无效操作：

function disablePlayButtons() {
  // 假设你的选择按钮有共同的类名，比如"choice-btn"
  const choiceButtons = document.querySelectorAll('.choice-btn');
  choiceButtons.forEach(btn => {
    btn.disabled = true;
    btn.style.opacity = '0.5'; // 视觉上反馈按钮已禁用
  });
}

4. 添加重置游戏功能（可选但提升体验） #

为了让玩家能重新开始游戏，可以加一个重置按钮，完善整个游戏流程：

function resetGame() {
  pScore = 0;
  cScore = 0;
  gameIsOver = false;
  
  // 更新UI显示
  winner.textContent = '';
  document.getElementById('player-score').textContent = pScore;
  document.getElementById('computer-score').textContent = cScore;
  
  // 重新启用按钮
  const choiceButtons = document.querySelectorAll('.choice-btn');
  choiceButtons.forEach(btn => {
    btn.disabled = false;
    btn.style.opacity = '1';
  });
}

// 给重置按钮绑定点击事件
document.getElementById('reset-btn').addEventListener('click', resetGame);

这样调整后，当玩家或电脑得分达到10分时，游戏会立即显示获胜消息、禁用操作按钮，玩家还能通过重置按钮重新开启新游戏。

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