如何实现石头剪刀布先得5分获胜机制、循环判定及重启功能？

问题拆解 #

原代码仅支持单局胜负判断，缺少胜场累计机制，且用for循环处理交互逻辑的思路不符合前端用户点击的异步场景；同时缺少游戏结束后的重启能力。

完整解决方案代码 #

// 初始化全局胜场计数与选择变量
let playerWins = 0;
let computerWins = 0;
let player, computer;

// 获取页面DOM元素（需确保HTML中对应元素ID/类名正确）
const cardText = document.querySelectorAll('.card-text');
const playerScore = document.getElementById('player-score');
const computerScore = document.getElementById('computer-score');
const resultText = document.getElementById('result-text');
const restartBtn = document.getElementById('restart-btn');

// 绑定出招按钮点击事件
cardText.forEach(button => button.addEventListener("click", () => {
  // 仅在未决出最终胜者时响应操作
  if (playerWins < 5 && computerWins < 5) {
    player = button.textContent;
    getComputerChoice();

    // 更新当前选择与胜场显示
    playerScore.textContent = `玩家: ${player} | 胜场: ${playerWins}`;
    computerScore.textContent = `电脑: ${computer} | 胜场: ${computerWins}`;
    
    // 判定单局结果并更新胜场
    const roundResult = checkWinner();
    resultText.textContent = roundResult;
    
    // 检查是否决出最终胜者
    checkGlobalWinner();
  }
}));

// 绑定重启按钮事件
restartBtn.addEventListener('click', restartGame);

// 生成电脑随机选择
function getComputerChoice() {
  const randNum = Math.floor(Math.random() * 3) + 1;
  switch (randNum) {
    case 1:
      computer = "Rock";
      break;
    case 2:
      computer = "Paper";
      break;
    case 3:
      computer = "Scissors";
      break;
  }
}

// 判定单局胜负并更新胜场
function checkWinner() {
  if (player === computer) {
    return "平局！";
  } else if (computer === "Rock") {
    if (player === "Paper") {
      playerWins++;
      return "你赢了这一局！";
    } else {
      computerWins++;
      return "你输了这一局！";
    }
  } else if (computer === "Paper") {
    if (player === "Scissors") {
      playerWins++;
      return "你赢了这一局！";
    } else {
      computerWins++;
      return "你输了这一局！";
    }
  } else if (computer === "Scissors") {
    if (player === "Rock") {
      playerWins++;
      return "你赢了这一局！";
    } else {
      computerWins++;
      return "你输了这一局！";
    }
  }
}

// 检查是否决出最终胜者
function checkGlobalWinner() {
  if (playerWins === 5) {
    resultText.textContent = "🎉 恭喜你获得最终胜利！";
    disableChoiceButtons();
  } else if (computerWins === 5) {
    resultText.textContent = "💔 电脑获得最终胜利！";
    disableChoiceButtons();
  }
}

// 禁用出招按钮（游戏结束后）
function disableChoiceButtons() {
  cardText.forEach(button => button.disabled = true);
}

// 重置游戏状态
function restartGame() {
  playerWins = 0;
  computerWins = 0;
  player = '';
  computer = '';
  playerScore.textContent = `玩家:  | 胜场: 0`;
  computerScore.textContent = `电脑:  | 胜场: 0`;
  resultText.textContent = "请选择你的出招！";
  cardText.forEach(button => button.disabled = false);
}

核心修改说明 #

• 新增playerWins和computerWins变量，用于累计双方胜场
• 移除无效的for循环逻辑，改为在用户每次点击后实时更新胜场并判断全局胜负
• 添加checkGlobalWinner函数，当某一方胜场达到5时宣告最终胜利，并禁用出招按钮防止继续操作
• 实现restartGame函数，重置所有计数与显示状态，重新启用出招按钮
• 修改checkWinner函数，在判定单局结果的同时更新对应胜场计数

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