JavaScript石头剪刀布游戏玩家选择识别问题求助

问题现象 #

开发石头剪刀布游戏时，点击Rock按钮能正常识别玩家选择并完成对战逻辑，但点击Paper或Scissors按钮时，程序始终判定玩家选择为Rock，无法正确区分不同按钮的输入。

原代码 #

HTML代码

<div id="container">
    <div id="gameField">
        <h1>ROCK PAPER SCISSORS</h1>
        <h2>GET A COMFY CHAIR, RELAX<br>AND DESTROY THE COMPUTER</h2>
        <h3>Score 5 to win the game!</h3>
        <button onclick="startGame()" id="buttonRock" class="buttons">Rock</button>
        <button onclick="startGame()" id="buttonPaper" class="buttons">Paper</button>
        <button onclick="startGame()" id="buttonScissors" class="buttons">Scissors</button>
        <button onclick="resetButton()" id="buttonReset" class="buttons">Reset</button>
        <div id="resultBox"></div>
        <p>Player Score:
            <a id="playerClicks">0</a>
        </p>
        <p>Computer Score:
            <a id="computerClicks">0</a>
        </p><br>
        <p id="winnerIs">And the winner is:<br>
            <a id="whoWon"></a>
        </p>
    </div>
</div>

JavaScript代码

let playerScore = 0;
let computerScore = 0;
let playerWon = "Player";
let computerWon = "Computer";
document.getElementById("winnerIs").style.display = "none";

function startGame() {
document.getElementById("resultBox").innerHTML = playRound();
}  

function computerPlay() {
let computerChoice = ["rock", "paper", "scissors"]
return computerChoice[Math.floor(Math.random() * computerChoice.length)];
}

function playRound(playerSelection, computerSelection) {
let roundResult = "";
let computerChoice = computerPlay();

const buttonRock = document.querySelector('#buttonRock');
const buttonPaper = document.querySelector('#buttonPaper');
const buttonScissors = document.querySelector('#buttonScissors');

let playerChoiceRock = buttonRock;
let playerChoicePaper = buttonPaper;
let playerChoiceScissors = buttonScissors;

if (playerChoiceRock && computerChoice === "paper") {
    roundResult = "You've chosen ROCK and your enemy PAPER so you lose because PAPER beats ROCK";
    computerScore++;
    console.log("You've chosen ROCK and your enemy PAPER so you lose because PAPER beats ROCK");
} else if (playerChoiceRock && computerChoice === "scissors") {
    roundResult = "You've chosen ROCK and your enemy SCISSORS so you win because ROCK beats SCISSORS";
    playerScore++;
    console.log("You've chosen ROCK and your enemy SCISSORS so you win because ROCK beats SCISSORS");
} else if (playerChoiceRock && computerChoice === "rock") {
    roundResult = "You've chosen ROCK and your enemy ROCK so it's a tie!";
    console.log("You've chosen ROCK and your enemy ROCK so it's a tie!");

} else if (playerChoicePaper && computerChoice === "rock") {
    roundResult = "You've chosen PAPER and your enemy ROCK so you win because PAPER beats ROCK";
    console.log("You've chosen PAPER and your enemy ROCK so you win because PAPER beats ROCK");
} else if (playerChoicePaper && computerChoice === "paper") {
    roundResult = "You've chosen PAPER and your enemy PAPER so it's a tie!";
    console.log("You've chosen PAPER and your enemy PAPER so it's a tie!");
} else if (playerChoicePaper && computerChoice === "scissors") {
    roundResult = "You've chosen PAPER and your enemy SCISSORS so you lose because SCISSORS beats PAPER";
    console.log("You've chosen PAPER and your enemy SCISSORS so you lose because SCISSORS beats PAPER");

} else if (playerChoiceScissors && computerChoice === "rock") {
    roundResult = "You've chosen SCISSORS and your enemy ROCK so you lose because ROCK beats SCISSORS";
    console.log("You've chosen SCISSORS and your enemy ROCK so you lose because ROCK beats SCISSORS");
} else if (playerChoiceScissors && computerChoice === "paper") {
    roundResult = "You've chosen SCISSORS and your enemy PAPER so you win because SCISSORS beats PAPER";
    console.log("You've chosen SCISSORS and your enemy PAPER so you win because SCISSORS beats PAPER");
} else if (playerChoiceScissors && computerChoice === "scissors") {
    roundResult = "You've chosen SCISSORS and your enemy SCISSORS so it's a tie!";
    console.log("You've chosen SCISSORS and your enemy SCISSORS so it's a tie!");
}

document.getElementById("playerClicks").innerHTML = playerScore;
document.getElementById("computerClicks").innerHTML = computerScore;

return roundResult;
}

function resetButton() {
playerScore = 0;
computerScore = 0;
document.getElementById("resultBox").innerHTML = "";
document.getElementById("winnerIs").style.display = "none";
document.getElementById("playerClicks").innerHTML = playerScore;
document.getElementById("computerClicks").innerHTML = computerScore;
// document.getElementById("confetti-canvas").style.display = "none";
}

问题根源 #

1. 按钮点击未传递选择参数：所有按钮调用startGame()时没有传递玩家的选择，导致playRound()无法获取实际点击的按钮对应的选项。
2. 错误的选择判断逻辑：playRound()中通过判断DOM元素（如buttonRock）是否存在来确定玩家选择，但这些元素始终存在于页面中，所以第一个if (playerChoiceRock && ...)分支永远会被触发，导致程序只处理Rock的情况，忽略其他按钮的输入。

修复方案 #

步骤1：修改HTML按钮，传递选择参数

给每个游戏按钮的onclick事件添加对应的选择参数：

<button onclick="startGame('rock')" id="buttonRock" class="buttons">Rock</button>
<button onclick="startGame('paper')" id="buttonPaper" class="buttons">Paper</button>
<button onclick="startGame('scissors')" id="buttonScissors" class="buttons">Scissors</button>

步骤2：修改startGame函数，接收并传递参数

让startGame接收玩家选择的参数，再传递给playRound：

function startGame(playerSelection) {
  document.getElementById("resultBox").innerHTML = playRound(playerSelection);
}

步骤3：重构playRound函数，简化逻辑

去掉DOM元素判断，直接使用传入的playerSelection参数，同时优化对战逻辑：

function playRound(playerSelection) {
  let roundResult = "";
  const computerChoice = computerPlay();
  const playerChoice = playerSelection.toLowerCase();

  // 胜负判断逻辑
  if (playerChoice === computerChoice) {
    roundResult = `You've chosen ${playerChoice.toUpperCase()} and your enemy ${computerChoice.toUpperCase()} so it's a tie!`;
  } else if (
    (playerChoice === "rock" && computerChoice === "scissors") ||
    (playerChoice === "paper" && computerChoice === "rock") ||
    (playerChoice === "scissors" && computerChoice === "paper")
  ) {
    roundResult = `You've chosen ${playerChoice.toUpperCase()} and your enemy ${computerChoice.toUpperCase()} so you win because ${playerChoice.toUpperCase()} beats ${computerChoice.toUpperCase()}`;
    playerScore++;
  } else {
    roundResult = `You've chosen ${playerChoice.toUpperCase()} and your enemy ${computerChoice.toUpperCase()} so you lose because ${computerChoice.toUpperCase()} beats ${playerChoice.toUpperCase()}`;
    computerScore++;
  }

  console.log(roundResult);
  document.getElementById("playerClicks").innerHTML = playerScore;
  document.getElementById("computerClicks").innerHTML = computerScore;

  // 检查是否达到获胜分数
  if (playerScore === 5 || computerScore === 5) {
    document.getElementById("winnerIs").style.display = "block";
    document.getElementById("whoWon").textContent = playerScore === 5 ? playerWon : computerWon;
  }

  return roundResult;
}

修复后完整代码 #

HTML代码

<div id="container">
    <div id="gameField">
        <h1>ROCK PAPER SCISSORS</h1>
        <h2>GET A COMFY CHAIR, RELAX<br>AND DESTROY THE COMPUTER</h2>
        <h3>Score 5 to win the game!</h3>
        <button onclick="startGame('rock')" id="buttonRock" class="buttons">Rock</button>
        <button onclick="startGame('paper')" id="buttonPaper" class="buttons">Paper</button>
        <button onclick="startGame('scissors')" id="buttonScissors" class="buttons">Scissors</button>
        <button onclick="resetButton()" id="buttonReset" class="buttons">Reset</button>
        <div id="resultBox"></div>
        <p>Player Score:
            <span id="playerClicks">0</span>
        </p>
        <p>Computer Score:
            <span id="computerClicks">0</span>
        </p><br>
        <p id="winnerIs" style="display: none;">And the winner is:<br>
            <span id="whoWon"></span>
        </p>
    </div>
</div>

JavaScript代码

let playerScore = 0;
let computerScore = 0;
const playerWon = "Player";
const computerWon = "Computer";
document.getElementById("winnerIs").style.display = "none";

function startGame(playerSelection) {
  document.getElementById("resultBox").innerHTML = playRound(playerSelection);
}  

function computerPlay() {
  const computerChoice = ["rock", "paper", "scissors"];
  return computerChoice[Math.floor(Math.random() * computerChoice.length)];
}

function playRound(playerSelection) {
  let roundResult = "";
  const computerChoice = computerPlay();
  const playerChoice = playerSelection.toLowerCase();

  if (playerChoice === computerChoice) {
    roundResult = `You've chosen ${playerChoice.toUpperCase()} and your enemy ${computerChoice.toUpperCase()} so it's a tie!`;
  } else if (
    (playerChoice === "rock" && computerChoice === "scissors") ||
    (playerChoice === "paper" && computerChoice === "rock") ||
    (playerChoice === "scissors" && computerChoice === "paper")
  ) {
    roundResult = `You've chosen ${playerChoice.toUpperCase()} and your enemy ${computerChoice.toUpperCase()} so you win because ${playerChoice.toUpperCase()} beats ${computerChoice.toUpperCase()}`;
    playerScore++;
  } else {
    roundResult = `You've chosen ${playerChoice.toUpperCase()} and your enemy ${computerChoice.toUpperCase()} so you lose because ${computerChoice.toUpperCase()} beats ${playerChoice.toUpperCase()}`;
    computerScore++;
  }

  console.log(roundResult);
  document.getElementById("playerClicks").textContent = playerScore;
  document.getElementById("computerClicks").textContent = computerScore;

  if (playerScore === 5 || computerScore === 5) {
    document.getElementById("winnerIs").style.display = "block";
    document.getElementById("whoWon").textContent = playerScore === 5 ? playerWon : computerWon;
  }

  return roundResult;
}

function resetButton() {
  playerScore = 0;
  computerScore = 0;
  document.getElementById("resultBox").innerHTML = "";
  document.getElementById("winnerIs").style.display = "none";
  document.getElementById("playerClicks").textContent = playerScore;
  document.getElementById("computerClicks").textContent = computerScore;
}

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