网页Rock Paper Scissors游戏：计分系统与div内容追加故障

核心问题分析 #

你的代码存在以下几个关键问题导致计分失效和交互异常：

• 事件绑定逻辑错误，未正确获取玩家选择
• 分数更新的DOM操作语法完全错误
• 同步while循环阻塞页面，无法响应用户点击
• 部分分支中return语句位置错误，导致分数未执行更新

修复后的完整代码 #

HTML #

<div class="text">
  <h1 class="h1"><strong>Rock Paper Scissors</strong></h1>
  <h2 class="h2">Choose your weapon</h2>
  <h3 class="h3">First To 5 Wins!</h3>
</div>

<div class="optionBtn">
  <button class="choice-btn" data-choice="rock">Rock</button>
  <button class="choice-btn" data-choice="paper">Paper</button>
  <button class="choice-btn" data-choice="scissors">Scissors</button>
</div>

<p class="tscore">Player scores</p>
<p class="tscore">Computer scores</p>

<div class="textscores">
  <div class="textscores1">0</div>
  <div class="textscores2">0</div>
</div>

<p class="result">Results</p>
<div class="score"></div>

<div class="reset">
  <button onclick="resetBtn()" class="playAgain">Play Again!</button>
</div>

CSS #

* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-align: center;
  font-weight: bold;
}

body {
  background-color: rgb(242, 226, 226);
}

.h1 {
  font-size: 90px;
  color: rgb(84, 18, 18);
  margin: 25px;
  margin-top: 40px;
}

.h2 {
  font-size: 60px;
  color: darkred;
  margin: 25px;
}

.h3 {
  font-size: 50px;
  color: brown;
}

.optionBtn {
  display: flex;
  justify-content: center;
  margin: 25px;
}

.choice-btn {
  width: 150px;
  height: 60px;
  border: 5px solid rgb(78, 16, 16);
  margin: 5px;
  background-color: rgb(214, 74, 74);
  font-size: 35px;
}

.tscore {
  color: rgb(84, 18, 18);
  font-size: 30px;
  margin: 20px;
}

.result {
  color: rgb(84, 18, 18);
  font-size: 30px;
  margin-top: 25px;
}

.textscores {
  display: flex;
  justify-content: center;
}

.textscores1, .textscores2 {
  width: 200px;
  height: 70px;
  border: 5px solid black;
  margin: 5px;
  text-align: center;
  line-height: 70px;
  font-size: 30px;
}

.score {
  width: 380px;
  height: 140px;
  border: 5px solid black;
  margin: 0 auto;
  line-height: 140px;
  font-size: 30px;
}

.tscore {
  display: inline;
  margin: 0 50px;
}

.playAgain {
  width: 150px;
  height: 60px;
  border: 2px solid white;
  margin: 5px;
  background-color: rgb(112, 19, 19);
  color: rgb(214, 74, 74);
  font-size: 25px;
}

JavaScript #

let playerscore = 0;
let computerscore = 0;

// 获取DOM元素
const playerScoreEl = document.querySelector('.textscores1');
const computerScoreEl = document.querySelector('.textscores2');
const resultEl = document.querySelector('.score');
const choiceBtns = document.querySelectorAll('.choice-btn');

// 初始化事件绑定
choiceBtns.forEach(button => {
  button.addEventListener('click', () => {
    const playerChoice = button.dataset.choice;
    playRound(playerChoice);
  });
});

function getComputerChoice() {
  const choices = ["rock", "paper", "scissors"];
  const randomIndex = Math.floor(Math.random() * 3);
  return choices[randomIndex];
}

function playRound(playerChoice) {
  const computerChoice = getComputerChoice();
  let resultText = '';

  // 判断单轮结果并更新分数
  if (playerChoice === computerChoice) {
    resultText = `Its a TIE! Both chose ${playerChoice}`;
  } else if (
    (playerChoice === "rock" && computerChoice === "scissors") ||
    (playerChoice === "paper" && computerChoice === "rock") ||
    (playerChoice === "scissors" && computerChoice === "paper")
  ) {
    playerscore++;
    playerScoreEl.textContent = playerscore;
    resultText = `You WIN! ${playerChoice} beats ${computerChoice}`;
  } else {
    computerscore++;
    computerScoreEl.textContent = computerscore;
    resultText = `You LOSE! ${computerChoice} beats ${playerChoice}`;
  }

  // 更新结果显示
  resultEl.textContent = resultText;

  // 检查是否达到胜利条件
  checkGameEnd();
}

function checkGameEnd() {
  if (playerscore === 5) {
    alert("Congratulations! You won the game!");
    resetGame();
  } else if (computerscore === 5) {
    alert("Sorry! Computer won the game!");
    resetGame();
  }
}

function resetBtn() {
  resetGame();
}

function resetGame() {
  playerscore = 0;
  computerscore = 0;
  playerScoreEl.textContent = '0';
  computerScoreEl.textContent = '0';
  resultEl.textContent = '';
}

关键修改说明 #

1. 事件绑定优化：

   • 给按钮统一添加choice-btn类，通过data-choice属性存储选择值
   • 正确绑定点击事件，从按钮属性中获取玩家选择，避免未定义变量问题

2. 分数更新逻辑修复：

   • 提前获取分数显示元素，避免重复DOM查询
   • 使用textContent直接更新分数文本，替代错误的append语法

3. 游戏循环重构：

   • 移除阻塞页面的while循环，改为点击按钮触发单轮游戏
   • 每轮结束后检查是否达到5分，触发游戏结束提示

4. 分支逻辑修正：

   • 简化胜负判断条件，减少冗余代码
   • 确保分数更新后再设置结果文本，避免return语句跳过更新操作

5. 重置功能实现：

   • 完成resetBtn函数，重置分数和所有显示内容

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