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

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

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

✅ 关键改造点说明

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

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

   function game(userChoice) {
     // ⚠️ 首先检查是否已结束游戏
     if (userScore >= maxScore || computerScore >= maxScore) return;
   
     const computerChoice = getComputerChoice();
     // ... 原有胜负判断逻辑（switch）
   }

2. 胜负函数中嵌入终局触发
   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);
     }
   }

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

   
   
     
   
       
   
       Play Again
     
   

   .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 兼容性。

通过以上结构化增强，你的石头剪刀布游戏将具备生产环境所需的完整性：清晰的状态流转、防误操作保护、符合人机交互规范的视觉终结提示，以及可扩展的重玩机制。这不仅是功能实现，更是对用户体验细节的专业打磨。