如何在掷骰子游戏中实现分数累加与追踪

问题说明 #

开发掷骰子游戏时，无法实现每次掷骰子后自动累加顶部“Poäng”总分，需要将每次的“Summa kast”数值累加到总分中。

原HTML代码 #

<body>
    <header>
        <p class="score">Poäng: 0</p>
    </header>

    <main>
        <H1>Välj ditt "knockout" nummer:</H1>       
         <select name="" id="ko">
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
        </select>
<div class="dce">
        <p class="dice1">Tärning 1: - </p>
        <p class="dice2">Tärning 2: - </p>
        <p class="sumkast">Summa kast: 0 </p>
</div>
        <a href="#" class="btn">KASTA</a>
    </main>

    <footer>
        <section class="restart">
            <button onClick="window.location.reload();">BÖRJA OM</button>
        </section>
    </footer>

    <script src="js/spel.js"></script>
</body>
</html>

原JavaScript代码（含错误尝试） #

let btn = document.getElementById("btn");
let dice = document.querySelectorAll("dice");
let diceArr1 = [1, 2, 3, 4, 5, 6];
let diceArr2 = [1, 2, 3, 4, 5, 6];

document.querySelector('a.btn')
.addEventListener('click', () => {

let diceRandom1 = Math.floor(Math.random() * diceArr1.length);
let diceRandom2 = Math.floor(Math.random() * diceArr2.length);
  let dice1 = diceArr1[diceRandom1];
  let dice2 = diceArr2[diceRandom2];
  console.log(dice1,dice2);
let rollpts = (dice1 + dice2);

// 错误尝试的代码
score = 0;
score += score+rollpts;
document.querySelector('p.score').innerText = "Poäng: "+ + + 
score;

document.querySelector('p.dice1').innerText = "Tärning 1: "+ + + dice1;
document.querySelector('p.dice2').innerText = "Tärning 2: "+ + + dice2;
document.querySelector('p.sumkast').innerText = "Summa kast: "+ + + rollpts;

var e = document.getElementById("ko");
function onChange() {
  var value = e.value;
  var text = e.options[e.selectedIndex].text;
  console.log(value, text);
}
e.onchange = onChange;
onChange();

if (rollpts == e.value) {
    alert("Game over! Tryck på RESTART om du vill köra igen!");
}

});

错误原因分析 #

• 总分变量重置：每次点击按钮时都执行score = 0，导致之前的总分被清空，无法实现累加。
• 累加逻辑错误：score += score+rollpts等价于score = score + (score + rollpts)，会让总分翻倍再加当前点数，逻辑完全错误，正确累加应为score += rollpts。
• 无效语法符号：字符串拼接时的+ + +属于冗余无效代码，只需单个+即可完成拼接。
• 函数位置不合理：onChange函数定义在点击事件内部，每次点击都会重复定义，完全没必要。

修正后的完整JavaScript代码 #

// 初始化总分，放在点击事件外部避免每次重置
let totalScore = 0;
// 提前获取DOM元素，减少重复查询
const koSelect = document.getElementById("ko");
const scoreElement = document.querySelector('p.score');
const dice1Element = document.querySelector('p.dice1');
const dice2Element = document.querySelector('p.dice2');
const sumkastElement = document.querySelector('p.sumkast');

// 下拉框监听函数，只需定义一次
function onChangeKo() {
  const value = koSelect.value;
  const text = koSelect.options[koSelect.selectedIndex].text;
  console.log(value, text);
}
koSelect.onchange = onChangeKo;
onChangeKo();

// 掷骰子按钮点击事件
document.querySelector('a.btn').addEventListener('click', () => {
  // 简化骰子点数生成逻辑
  const dice1 = Math.floor(Math.random() * 6) + 1;
  const dice2 = Math.floor(Math.random() * 6) + 1;
  const rollpts = dice1 + dice2;

  // 更新总分
  totalScore += rollpts;
  scoreElement.innerText = `Poäng: ${totalScore}`;

  // 更新骰子和单次点数显示
  dice1Element.innerText = `Tärning 1: ${dice1}`;
  dice2Element.innerText = `Tärning 2: ${dice2}`;
  sumkastElement.innerText = `Summa kast: ${rollpts}`;

  // 游戏结束判断
  if (rollpts == koSelect.value) {
    alert("Game over! Tryck på RESTART om du vill köra igen!");
  }
});

关键修改点 #

• 将总分变量totalScore定义在点击事件外部，确保每次点击不会重置累加值。
• 简化骰子点数生成，直接用Math.floor(Math.random()*6)+1生成1-6的随机数，无需额外数组。
• 使用模板字符串${变量}替代冗余的字符串拼接符号，代码更简洁易读。
• 将下拉框监听函数移到点击事件外部，避免重复定义。
• 提前获取所有需要操作的DOM元素，减少重复查询DOM的性能消耗。

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