如何让骰子游戏中玩家分数真正置0而非仅表面显示？

你的问题核心是只修改了页面显示的分数，没真正重置存储分数的变量。比如玩家1掷出1后，你把player1score.innerHTML改成0，但current1变量里的旧分数还在，等切换回玩家1再掷骰子时，代码会继续用这个旧值累加，看起来就像分数“恢复”了。

下面是修复后的代码，同时优化了逻辑顺序，避免掷出1后还执行累加操作：

修复后的JavaScript代码 #

var switching = false; // 修正原拼写错误swithcing
var current1 = 0;
var total1 = 0;
var current2 = 0;
var total2 = 0;

function roll() {
  var randomnumber = Math.floor(Math.random() * 6) + 1;
  var player1score = document.querySelector('.player1total');
  var player1current = document.querySelector('.player1'); // 修正原拼写错误player1curent
  var player2score = document.querySelector('.player2total')
  var player2current = document.querySelector('.player2') // 修正原拼写错误player2curent

  // 优先处理掷出1的情况
  if (randomnumber === 1) {
    // 根据当前玩家，同步重置存储分数的变量和页面显示
    if (!switching) {
      current1 = 0;
      player1score.innerHTML = 0;
    } else {
      current2 = 0;
      player2score.innerHTML = 0;
    }
    // 清空当前掷出点数的显示
    player1current.innerHTML = 0;
    player2current.innerHTML = 0;
    // 切换玩家
    switching = !switching;
    // 终止后续代码，避免执行累加逻辑
    return;
  }

  // 处理正常掷骰子的分数累加逻辑
  if (switching) {
    current2 += randomnumber;
    player2score.innerHTML = current2;
    player2current.innerHTML = randomnumber;
  } else {
    current1 += randomnumber;
    player1score.innerHTML = current1;
    player1current.innerHTML = randomnumber;
  }
}

function hold() {
  switching = !switching;
}

关键改动说明 #

1. 修正拼写错误：修复原代码中swithcing、player1curent等拼写问题，避免潜在逻辑bug
2. 同步重置变量与显示：掷出1时，不仅修改页面HTML，还把对应玩家的current变量设为0，确保数据和显示完全一致
3. 优化逻辑顺序：把掷出1的处理放在最前端，并用return终止函数，防止掷出1后仍执行分数累加操作
4. 简化判断逻辑：根据当前玩家状态直接重置对应变量，代码可读性更强

原HTML代码无需修改 #

<h1>Player 1</h1>
<h2 class="player1"></h2>
<h3 class="player1total"></h3>


<h1>Player 2</h1>
<h2 class="player2"></h2>
<h3 class="player2total"></h3>

<input type="button" onclick="roll()" value="Roll Dice!" />
<input type="button" onclick="hold()" value="Hold!" />

现在测试的话，掷出1后对应玩家的分数会真正清零，切换回来再掷骰子也不会恢复旧分数了。

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