JavaScript实现分数归零时弹窗提示的剪刀石头布游戏开发问题

嘿，我来帮你搞定这个分数递减版的剪刀石头布游戏！咱们一步步解决你的需求：不让分数变负数，分数归零时弹出胜负提示，同时补全游戏的核心逻辑。

首先，给你一套完整的可运行代码，包含HTML结构和JavaScript逻辑，之后我再拆解关键细节：

完整代码示例 #

HTML部分（展示分数和操作按钮）

<div class="game-container">
  <p id="cpu-choice">CPU choosed: </p>
  <div class="score-board">
    <p>你的分数: <span id="my-score">5</span></p>
    <p>CPU分数: <span id="cpu-score">5</span></p>
  </div>
  <div class="buttons">
    <button onclick="playGame('stone')">石头</button>
    <button onclick="playGame('paper')">布</button>
    <button onclick="playGame('scissor')">剪刀</button>
  </div>
</div>

JavaScript部分（核心游戏逻辑）

// 初始化双方分数
let cpuScore = 5;
let myScore = 5;

// 提前获取DOM元素，避免每次点击重复查询
const cpuChoiceEl = document.getElementById("cpu-choice");
const myScoreEl = document.getElementById("my-score");
const cpuScoreEl = document.getElementById("cpu-score");

function playGame(playerChoice) {
  // 游戏已结束时，直接返回避免无效操作
  if (cpuScore === 0 || myScore === 0) return;

  // CPU随机出拳
  const choices = ["stone", "paper", "scissor"];
  const cpuChoice = choices[Math.floor(Math.random() * 3)];
  cpuChoiceEl.textContent = `CPU choosed: ${cpuChoice}`;

  // 判断胜负并更新分数
  if (playerChoice === cpuChoice) {
    alert("平局！分数不变~");
  } else if (
    (playerChoice === "stone" && cpuChoice === "scissor") ||
    (playerChoice === "paper" && cpuChoice === "stone") ||
    (playerChoice === "scissor" && cpuChoice === "paper")
  ) {
    // 玩家获胜，CPU分数减1，用Math.max确保分数不会低于0
    cpuScore = Math.max(0, cpuScore - 1);
    cpuScoreEl.textContent = cpuScore;
    checkGameStatus();
  } else {
    // CPU获胜，玩家分数减1，同样限制最小值为0
    myScore = Math.max(0, myScore - 1);
    myScoreEl.textContent = myScore;
    checkGameStatus();
  }
}

function checkGameStatus() {
  if (cpuScore === 0) {
    alert("你赢了！🎉");
    // 游戏结束后重置分数，方便重新开始
    resetGame();
  } else if (myScore === 0) {
    alert("你输了！😢");
    resetGame();
  }
}

// 重置游戏的辅助函数
function resetGame() {
  cpuScore = 5;
  myScore = 5;
  myScoreEl.textContent = myScore;
  cpuScoreEl.textContent = cpuScore;
  cpuChoiceEl.textContent = "CPU choosed: ";
}

关键功能说明 #

• 避免分数负数：用Math.max(0, 分数-1)的写法，强制分数最小值为0，不管怎么计算都不会出现负数。
• 游戏结束判断：每次更新分数后调用checkGameStatus，检查是否有一方分数归0，触发对应胜负提示。
• 代码复用：把三个出拳按钮的逻辑抽成playGame函数，只需要传入不同出拳参数，避免重复冗余代码。
• 结束状态拦截：在playGame开头加了判断，游戏结束后直接返回，防止玩家继续点击操作。

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