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

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