如何实现JavaScript石头剪刀布游戏分数达6分时终止？

核心逻辑是在每轮得分后检查是否有人达到6分，用if语句判断分数条件即可实现终止游戏的需求，具体修改如下：

具体修改步骤 #

1. 定义目标分数常量，方便后续调整
2. 在得分函数（win/lose）中更新分数后立即检查是否达标
3. 新增游戏结束处理函数，统一处理终止逻辑（显示结果、禁用操作按钮）

修改后的完整代码 #

let userScore = 0;
let computerScore = 0;
const WIN_SCORE = 6; // 获胜所需分数常量
const userScore_span = document.getElementById("user-score");
const computerScore_span = document.getElementById("computer-score");
const result_div = document.querySelector(".result > p");
const rock_div = document.getElementById("r");
const paper_div = document.getElementById("p");
const scissors_div = document.getElementById("s");

function getComputerChoice() {
  const choices = ['r', 'p', 's'];
  const randomNumber = Math.floor(Math.random() * 3);
  return choices[randomNumber];
}

function convertToWord(letter) {
  if (letter === "r") return "Rock";
  if (letter === "p") return "Paper";
  if (letter === "s") return "Scissors";
}

// 处理游戏结束逻辑
function endGame(winner) {
  result_div.innerHTML = winner === 'user' ? "恭喜你赢下整局游戏！" : "电脑赢了整局游戏！";
  // 禁用所有选择按钮，阻止继续操作
  rock_div.style.pointerEvents = 'none';
  paper_div.style.pointerEvents = 'none';
  scissors_div.style.pointerEvents = 'none';
}

function win(userChoice, computerChoice) {
  userScore++;
  userScore_span.innerHTML = userScore;
  computerScore_span.innerHTML = computerScore;
  result_div.innerHTML = `${convertToWord(userChoice)} 击败 ${convertToWord(computerChoice)}。你赢了这一轮！`;
  
  // 检查是否达到获胜分数
  if (userScore === WIN_SCORE) {
    endGame('user');
  }
}

function lose(userChoice, computerChoice) {
  computerScore++;
  userScore_span.innerHTML = userScore;
  computerScore_span.innerHTML = computerScore;
  result_div.innerHTML = `${convertToWord(userChoice)} 输给了 ${convertToWord(computerChoice)}。你输了这一轮！`;
  
  // 检查是否达到获胜分数
  if (computerScore === WIN_SCORE) {
    endGame('computer');
  }
}

function draw(userChoice, computerChoice) {
  result_div.innerHTML = `${convertToWord(userChoice)} 和 ${convertToWord(computerChoice)} 平局！`;
}

function game(userChoice){
  const computerChoice = getComputerChoice();
  switch(userChoice + computerChoice){
    case "rs":
    case "pr":
    case "sp":
      win(userChoice, computerChoice);
      break;
    case "rp":
    case "ps":
    case "sr":
      lose(userChoice, computerChoice);
      break;
    case "rr":
    case "pp":
    case "ss":
      draw(userChoice, computerChoice);
      break;
  }
}

// 绑定按钮点击事件（原代码缺失，补充后游戏才能正常触发）
rock_div.addEventListener('click', () => game('r'));
paper_div.addEventListener('click', () => game('p'));
scissors_div.addEventListener('click', () => game('s'));

关键说明 #

• 用WIN_SCORE统一管理目标分数，后续修改只需调整这个常量值
• 每轮得分后立即判断是否达标，达标则调用endGame终止游戏
• 通过pointerEvents: 'none'禁用按钮，彻底阻止玩家继续操作
• 若需要重启功能，可新增restartGame函数重置分数、启用按钮并清空结果

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