如何在石头剪刀布游戏中实现分数重置与选项禁用-js教程-PHP中文网

如何在石头剪刀布游戏中实现分数重置与选项禁用

本文详解如何在 rock-paper-scissors 游戏中：1）按下 enter 键后正确重置双方分数；2）当任一玩家得分达 3 分时禁用选择按钮，并仅允许通过回车键重启游戏。

本文详解如何在 rock-paper-scissors 游戏中：1）按下 enter 键后正确重置双方分数；2）当任一玩家得分达 3 分时禁用选择按钮，并仅允许通过回车键重启游戏。

在实现回合制石头剪刀布游戏时，常见的两个交互痛点是：分数无法真正清零（点击 Enter 后仍沿用旧值），以及游戏结束后续操作未被拦截（用户仍可点击选项导致逻辑错乱）。根本原因在于：userPoints 和 computerPoints 是纯 JavaScript 变量，而非 DOM 元素；重置时仅修改变量却未同步更新页面显示，且未对 UI 交互状态做控制。

✅ 正确的分数重置逻辑

关键修正点在于 endGame() 中的重置操作必须同时更新变量值与 DOM 显示：

function endGame() {
  // 移除旧监听器（避免重复绑定）
  document.removeEventListener('keydown', handleEnterKey);
  document.addEventListener('keydown', handleEnterKey);
}

function handleEnterKey(e) {
  if (e.key === 'Enter') {
    // 重置核心状态
    userPoints = 0;
    computerPoints = 0;

    // 同步更新 UI
    userScore.innerHTML = userPoints;
    computerScore.innerHTML = computerPoints;
    computerOutput.innerHTML = 'Computer chose...';
    outcome.innerHTML = '';

    // 重新启用选项（移除禁用状态）
    rockPaperScissors.forEach(el => el.classList.remove('disabled'));
    rockPaperScissors.forEach(el => el.style.pointerEvents = 'auto');
  }
}

⚠️ 注意：原代码中 document.body.addEventListener 未做去重，多次触发 endGame() 会导致多个 Enter 监听器叠加，造成意外行为。应统一使用 document.addEventListener 并配合 removeEventListener 管理生命周期。

Zeemo AI

Zeemo AI是一款用于自动生成、编辑和翻译视频字幕的 AI 视频字幕工具。

下载

✅ 禁用用户选择的时机与方式

当任一分数达到 3 时，需立即冻结交互，防止无效点击干扰状态：

function reset() {
  if (userPoints === 3 || computerPoints === 3) {
    const message = userPoints === 3 
      ? 'You Win the game! <br> Press Enter to reset' 
      : 'You Lost the game. <br> Press Enter to reset';
    outcome.innerHTML = message;

    // 禁用所有选项
    rockPaperScissors.forEach(el => {
      el.classList.add('disabled');
      el.style.pointerEvents = 'none';
      el.style.opacity = '0.6';
    });

    endGame();
  }
}

同时建议在 CSS 中添加视觉反馈：

.choices li.disabled {
  cursor: not-allowed;
}

? 完整优化后的主流程结构

// 初始化
let userPoints = 0, computerPoints = 0;
updateScoreDisplay();

rockPaperScissors.forEach(choice => {
  choice.addEventListener('click', () => {
    if (userPoints === 3 || computerPoints === 3) return; // 提前拦截

    const userChoice = choice.textContent;
    const computerChoice = choices[Math.floor(Math.random() * choices.length)];
    computerOutput.textContent = `Computer chose ${computerChoice}`;

    isWinner(userChoice, computerChoice); // 推荐传参，避免依赖 DOM 读取
    updateScoreDisplay();
    reset();
  });
});

function updateScoreDisplay() {
  userScore.textContent = userPoints;
  computerScore.textContent = computerPoints;
}

function isWinner(user, computer) {
  const winConditions = [
    ['Rock', 'Scissors'], ['Scissors', 'Paper'], ['Paper', 'Rock']
  ];

  if (user === computer) {
    outcome.textContent = 'Draw';
  } else if (winConditions.some(([u, c]) => u === user && c === computer)) {
    outcome.textContent = 'You Win!';
    userPoints++;
  } else {
    outcome.textContent = 'You Lose';
    computerPoints++;
  }
}