石头剪刀布JS游戏Bug求助：点击按钮触发多个alert弹窗

你的代码里有几个核心问题导致了多个alert同时弹出，以下是问题分析和修复方案：

核心问题 #

1. 赋值与比较运算符混淆：所有if判断中使用了赋值运算符=而非比较运算符===。比如if (r = 1)会将r赋值为1，这个表达式的结果为1（被视为true），因此该条件块会始终执行；内部的if (num = 2)同理，赋值后表达式为true触发win()，后续的if (num = 1)又将num赋值为1，表达式同样为true触发lose()，最终两个弹窗依次弹出。
2. 局部变量覆盖全局变量：在rockcho等选择函数中，你用let声明了局部的r/p/s，这些变量不会修改全局的同名变量，导致全局变量始终保持初始值0，判断逻辑完全失效。
3. 随机选择未生效：random函数内的num是局部变量，不会修改全局的num，因此电脑的选择始终为初始值0，无法正确生成随机出招。
4. 条件判断逻辑冗余：多个独立的if语句会依次执行，而非互斥触发，这也是多个弹窗出现的原因之一。

修复后的完整代码 #

// 全局变量：玩家选择（0=石头，1=布，2=剪刀，-1=未选择）
let playerChoice = -1;
// 全局变量：电脑选择
let computerChoice = 0;

// 生成电脑的随机选择
function generateComputerChoice() {
  computerChoice = Math.floor(Math.random() * 3);
  console.log(`电脑选择：${computerChoice}`);
}

// 玩家选择石头
function chooseRock() {
  playerChoice = 0;
  playGame();
}

// 玩家选择布
function choosePaper() {
  playerChoice = 1;
  playGame();
}

// 玩家选择剪刀
function chooseScissors() {
  playerChoice = 2;
  playGame();
}

// 游戏核心逻辑
function playGame() {
  // 生成电脑选择
  generateComputerChoice();

  // 检查玩家是否未选择
  if (playerChoice === -1) {
    alert("请先点击按钮选择你的出招！");
    return;
  }

  // 判断胜负
  if (playerChoice === computerChoice) {
    draw();
  } else if (
    // 玩家获胜的三种情况：石头赢剪刀，布赢石头，剪刀赢布
    (playerChoice === 0 && computerChoice === 2) ||
    (playerChoice === 1 && computerChoice === 0) ||
    (playerChoice === 2 && computerChoice === 1)
  ) {
    win();
  } else {
    lose();
  }

  // 重置玩家选择，准备下一局
  playerChoice = -1;
}

function win() {
  alert("你赢了！:) 点击确定再来一局");
}

function lose() {
  alert("你输了:( 点击确定再来一局");
}

function draw() {
  alert("平局！点击确定再来一局");
}

关键修改点 #

• 合并分散的r/p/s变量为统一的playerChoice，简化变量管理。
• 所有条件判断使用===严格相等运算符，避免赋值操作干扰逻辑。
• 修复变量作用域：选择函数直接修改全局的playerChoice，确保选择能传递到游戏逻辑中。
• 重写随机选择逻辑，让generateComputerChoice直接修改全局的computerChoice，确保电脑选择生效。
• 用else if和else构建互斥的条件分支，确保同一时间只有一个胜负结果触发。
• 玩家选择后直接调用playGame，简化游戏流程，同时重置玩家选择为-1，避免重复触发。

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