石头剪刀布游戏玩家分数始终为0问题排查求助

问题：实现了带图片按钮的石头剪刀布游戏，无论玩家操作如何，玩家分数始终保持0，电脑分数正常增长。

错误原因分析 #

1. 玩家选择值获取逻辑错误
   原代码中playerSelection = selection.data-selection;是完全错误的写法：

   • selection是数组，不存在data-selection属性
   • 正确做法是从点击的按钮元素上获取data-selection属性值，通过button.dataset.selection获取，同时要转成大写（因为你的selection数组里是大写的ROCK/PAPER/SCISSORS，而按钮的data属性值是小写）

2. 变量不匹配导致逻辑分支错误
   由于playerSelection始终是undefined或错误值，playRound里的所有胜利条件都无法触发，每次都会进入else分支，只给电脑加分，玩家分数自然不会增长。

修正后的代码 #

JavaScript部分

let result;
let playerScore = 0;
let computerScore = 0;
let playerSelection;
const buttonBox = document.querySelector(".selections");
const buttons = document.querySelectorAll('button');
const roundsBox = document.querySelector(".rounds");
const selection = ["ROCK", "PAPER", "SCISSORS"];
const pScore = document.querySelector("#playerScore");
const cScore = document.querySelector("#compScore");

buttons.forEach((button) => {
  button.addEventListener('click', () => {
    // 修正：从点击的按钮获取data-selection值并转为大写
    playerSelection = button.dataset.selection.toUpperCase();
    playRound(computerSelection());
    game();
  });
});

const computerSelection = function () {
  return selection[Math.floor(Math.random() * 3)];
};

function playRound(computerSelection) {
  const h1 = document.createElement("h1");
  const oneRound = document.createElement("div");
  oneRound.classList.add("oneRound");
  if (playerSelection == computerSelection) {
    h1.textContent = "DRAW";
  } else if (playerSelection == "ROCK" && computerSelection == "SCISSORS") {
    h1.textContent = "WIN";
    playerScore += 1;
  } else if (playerSelection == "PAPER" && computerSelection == "ROCK") {
    h1.textContent = "WIN";
    playerScore += 1;
  } else if (playerSelection == "SCISSORS" && computerSelection == "PAPER") {
    h1.textContent = "WIN";
    playerScore += 1;
  } else {
    h1.textContent = "LOSE";
    computerScore += 1;
  }
  
  pScore.textContent = playerScore;
  cScore.textContent = computerScore;
  // 补充：将每轮结果添加到页面（原代码未实现此步骤）
  oneRound.appendChild(h1);
  roundsBox.appendChild(oneRound);
}

function game() {
  const finalResult = document.createElement("div");
  finalResult.classList.add("rounds");
  if (playerScore != 5 && computerScore != 5) {
    return;
  } else if (playerScore == 5) {
    finalResult.textContent = "YOU WON! :D";
  } else if (computerScore == 5) {
    finalResult.textContent = "YOU LOST! :(";
  }
  roundsBox.prepend(finalResult);
  buttonBox.replaceWith(finalResult);
}

HTML部分（无需修改）

<div class='selections'>
    <button class='selection' data-selection='rock'> <img alt="rock" src='images/rock.png'> </button>
    <button class='selection' data-selection='paper'> <img alt="paper"  src='images/paper.png'> </button>
    <button class='selection' data-selection='scissors'> <img alt="scissors"  src='images/scissors.png'> </button>
</div>
<div class='results'>
    <div>
        <pre><h1>Player <span id="playerScore">0</span> - <span id="compScore">0</span> Computer</h1></pre>
        <div class="rounds">First to 5 wins!</div>
    </div>
</div>

额外优化提示 #

• 原代码中playRound函数创建了oneRound元素但未添加到页面，补充了roundsBox.appendChild(oneRound)让每轮结果正常显示
• 函数参数computerSelection和全局函数名同名，虽然不影响逻辑，但可改为computerChoice避免命名混淆

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