JavaScript石头剪刀布游戏 计分滞后一轮更新异常排查

问题现象 #

实现石头剪刀布按钮交互时，计分逻辑出现1次点击的延迟：

• 点击按钮出拳后，控制台已经正确输出本轮胜负结果，但对应分数不会即时更新
• 需要再次点击任意按钮，上一轮的得分才会累加到页面显示上；例如电脑本轮获胜，要等下一次点击（无论结果是胜/负/平），电脑分数才会加上这1分。

问题原因 #

代码存在两处核心错误：

1. 执行顺序颠倒：每个按钮的点击回调里，先把当前分数渲染到页面，再调用singleRound()函数计算本轮胜负、累加分数。页面渲染拿到的永远是上一轮结束后的旧分数，本轮更新的分数只能等下一次点击触发渲染时才会显示。
2. 初始值类型错误：记录分数的变量playRounds、compRounds初始值设为空字符串''，虽然++运算会隐式转成数字，但初始类型不匹配容易引发非预期的类型转换问题。

修复步骤 #

1. 把分数变量的初始值从空字符串改为数字0：

// 修正前
// let playRounds = ''
// let compRounds = ''
// 修正后
let playRounds = 0
let compRounds = 0

2. 调整所有按钮点击回调的执行顺序：先调用singleRound()计算本轮结果、更新分数变量，再把最新分数渲染到页面上。
   修正后的按钮事件代码示例：

const buttonRock = document.querySelector('.rock')
buttonRock.addEventListener('click', function() {
  const computerSelection = computerPlay();
  // 先计算本轮胜负，更新分数
  const result = singleRound('rock', computerSelection)
  console.log(result)
  // 分数更新完成后再渲染到页面
  playerScore.innerHTML = 'Player:' + playRounds;
  computerScore.innerHTML = 'Computer:' + compRounds;
});

const buttonPaper = document.querySelector('.paper')
buttonPaper.addEventListener('click', function() {
  const computerSelection = computerPlay();
  const result = singleRound('paper', computerSelection)
  console.log(result)  
  playerScore.innerHTML = 'Player:' + playRounds;
  computerScore.innerHTML = 'Computer:' + compRounds;
});

const buttonScissors = document.querySelector('.scissors')
buttonScissors.addEventListener('click', function() {
  const computerSelection = computerPlay();
  const result = singleRound('scissors', computerSelection)
  console.log(result)
  playerScore.innerHTML = 'Player:' + playRounds;
  computerScore.innerHTML = 'Computer:' + compRounds;
});

可选优化 #

• 三个按钮的重复逻辑可以抽成公共处理函数，减少冗余代码
• 可新增页面结果展示区，直接在页面显示本轮胜负提示，无需打开控制台查看
• 可增加终局判定规则（例如先得5分获胜），游戏结束后禁用出拳按钮

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