Rock Paper Scissors：实现20分制自动终止与胜利提示-js教程-PHP中文网

Rock Paper Scissors：实现20分制自动终止与胜利提示

本文详解如何为经典石头剪刀布游戏添加得分上限（20分）机制，当任一玩家率先达到该分数时，自动停止游戏、禁用所有操作按钮，并在界面上叠加显示获胜提示。

在已有的 Rock Paper Scissors 游戏逻辑基础上，仅靠计分更新和胜负判定不足以构成完整的“回合制终结体验”。真正的专业级交互需包含状态拦截、事件清理与视觉反馈闭环。以下将从核心设计原则出发，提供可直接集成的增强方案。

✅ 关键改造点说明

我们引入一个全局常量 maxScore = 20 统一管理阈值，并围绕它重构三处关键逻辑：

游戏入口守卫（推荐前置校验）
在 game() 函数起始处添加得分拦截，避免无效计算：

function game(userChoice) {
  // ⚠️ 首先检查是否已结束游戏
  if (userScore >= maxScore || computerScore >= maxScore) return;

  const computerChoice = getComputerChoice();
  // ... 原有胜负判断逻辑（switch）
}

胜负函数中嵌入终局触发
win() 和 loses() 不再仅更新 UI，而需主动调用 gameOver() 并传入语义化提示：

function win(user, computer) {
  userScore++;
  userScore_span.textContent = userScore; // 推荐使用 textContent 替代 innerHTML（更安全）

  if (userScore >= maxScore) {
    gameOver('? You Win! First to 20!');
  } else {
    result_div.textContent = 'YOU WIN';
    highlightChoice(user, 'winningStyles');
  }
}

function loses(user, computer) {
  computerScore++;
  computerScore_span.textContent = computerScore;

  if (computerScore >= maxScore) {
    gameOver('? Computer Wins! Better luck next time.');
  } else {
    result_div.textContent = 'YOU LOSE';
    highlightChoice(user, 'losingStyles');
  }
}

// 提取通用高亮逻辑，提升可维护性
function highlightChoice(choiceId, className) {
  const el = document.getElementById(choiceId);
  if (el) {
    el.classList.add(className);
    setTimeout(() => el.classList.remove(className), 300);
  }
}

终局处理函数：禁用交互 + 强化视觉反馈
gameOver() 是用户体验收尾的关键环节，建议增加半透明遮罩层（overlay），确保提示不可忽略：

<!-- 在 HTML body 底部追加（或动态创建） -->
<div id="game-overlay" class="overlay hidden">
  <div class="overlay-content">
    <h2 id="overlay-message"></h2>
    <button id="restart-btn">Play Again</button>
  </div>
</div>

.overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.overlay-content {
  background: white; padding: 2rem; border-radius: 8px; text-align: center;
}
.hidden { display: none; }

function gameOver(message) {
  // 更新主结果区（基础反馈）
  result_div.textContent = message;

  // 显示遮罩层
  const overlay = document.getElementById('game-overlay');
  const msgEl = document.getElementById('overlay-message');
  msgEl.textContent = message;
  overlay.classList.remove('hidden');

  // 彻底移除点击事件（双重保障）
  rock_div.removeEventListener('click', () => game('rock'));
  paper_div.removeEventListener('click', () => game('paper'));
  scissors_div.removeEventListener('click', () => game('scissors'));

  // 可选：添加重启功能
  document.getElementById('restart-btn').onclick = resetGame;
}

function resetGame() {
  userScore = 0;
  computerScore = 0;
  userScore_span.textContent = '0';
  computerScore_span.textContent = '0';
  result_div.textContent = 'It\'s your turn';
  document.getElementById('game-overlay').classList.add('hidden');
  main(); // 重新绑定事件
}

⚠️ 注意事项与最佳实践

使用 textContent 替代 innerHTML：除非需渲染 HTML 标签，否则 textContent 更安全、性能更好，防止 XSS 风险；
事件移除需匹配注册方式：由于原代码使用箭头函数注册事件，无法直接通过 removeEventListener 移除（箭头函数无引用）。推荐改用具名函数：
```
function handleRock() { game('rock'); }
rock_div.addEventListener('click', handleRock);
// 移除时：
rock_div.removeEventListener('click', handleRock);
```
边界条件健壮性：使用 >= maxScore 而非 ===，避免因异常逻辑（如多次加分）导致终局失效；
CSS 类名一致性：确保 .winningStyles / .losingStyles 等样式已正确定义，且不与其他交互冲突；
移动端适配：遮罩层按钮应具备足够点击热区（最小 44×44px），并测试 touchstart 兼容性。