JavaScript石头剪刀布游戏报错：playerSelection未定义求助

错误原因 #

你遇到的ReferenceError: playerSelection is not defined根源在于：

1. playerSelection仅存在于clickListener函数的局部作用域中，game()函数无法访问该变量；
2. 原game()里的for循环是自动执行5轮的逻辑，和当前按钮手动选择的交互模式完全冲突——页面加载时game()就会执行循环，此时用户还未点击任何按钮，自然没有玩家选择的值。

修复思路 #

需要彻底重构游戏逻辑，将“自动循环5轮”调整为“用户点击按钮累计完成5轮”：

• 将分数、轮次计数变量提升到全局作用域，让点击事件能更新这些数据；
• 每点击一次按钮完成一轮游戏，更新分数后判断是否达到5轮；
• 完成5轮后显示最终结果，并重置游戏状态；
• 调整game()函数为初始化游戏状态的入口，而非自动执行循环。

完整修复代码 #

const options = ["rock", "paper", "scissors"];
const rock = document.querySelector("#rock");
const paper = document.querySelector("#paper");
const scissors = document.querySelector("#scissors");
const play = document.querySelector("#play");

// 全局变量存储游戏状态
let scorePlayer = 0;
let scoreComputer = 0;
let roundCount = 0;

// 初始化/重置游戏状态
function game() {
  scorePlayer = 0;
  scoreComputer = 0;
  roundCount = 0;
  console.log("游戏开始！请点击按钮选择你的出拳");
}

// 玩家点击按钮触发一轮游戏
function clickListener(event) {
  // 游戏未开始或已结束时，不响应点击
  if (roundCount >= 5) return;

  const playerSelection = event.target.id;
  const computerSelection = getComputerChoice();
  const roundResult = playRound(playerSelection, computerSelection);
  console.log(roundResult);

  // 更新分数
  const winner = checkWinner(playerSelection, computerSelection);
  if (winner === "Player") {
    scorePlayer++;
  } else if (winner === "Computer") {
    scoreComputer++;
  }

  roundCount++;
  // 判断是否完成5轮
  if (roundCount === 5) {
    console.log("游戏结束！");
    if (scorePlayer > scoreComputer) {
      console.log(`你赢了！最终比分：${scorePlayer} - ${scoreComputer}`);
    } else if (scorePlayer < scoreComputer) {
      console.log(`电脑赢了！最终比分：${scorePlayer} - ${scoreComputer}`);
    } else {
      console.log(`平局！最终比分：${scorePlayer} - ${scoreComputer}`);
    }
  }
}

function getComputerChoice() {
  const choice = options[Math.floor(Math.random() * options.length)];
  return choice;
}

function checkWinner(playerSelection, computerSelection) {
  if (playerSelection === computerSelection) {
    return "Tie";
  } else if (
    (playerSelection === "rock" && computerSelection === "scissors") ||
    (playerSelection === "scissors" && computerSelection === "paper") ||
    (playerSelection === "paper" && computerSelection === "rock")
  ) {
    return "Player";
  } else {
    return "Computer";
  }
}

function playRound(playerSelection, computerSelection) {
  const result = checkWinner(playerSelection, computerSelection);
  if (result === "Tie") {
    return "平局！";
  } else if (result === "Player") {
    return `你赢了这一轮！${playerSelection} 击败 ${computerSelection}`;
  } else {
    return `你输了这一轮！${computerSelection} 击败 ${playerSelection}`;
  }
}

function playAgain() {
  game();
}

// 绑定事件
rock.addEventListener("click", clickListener);
paper.addEventListener("click", clickListener);
scissors.addEventListener("click", clickListener);
play.addEventListener("click", playAgain);

// 可选：页面加载后自动初始化游戏
// game();

关键改动说明 #

1. 全局状态管理：把scorePlayer、scoreComputer、roundCount设为全局变量，让点击事件能直接更新游戏状态；
2. 交互逻辑对齐：每点击一次按钮完成一轮，累计轮次到5后结束游戏，完全适配按钮交互模式；
3. 游戏初始化：game()函数改为重置分数和轮次，点击play按钮触发新游戏；
4. 边界处理：游戏结束后（轮次≥5）不再响应按钮点击，避免重复计数。

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