骰子游戏点击Play按钮仅能运行一次问题求助

问题根源 #

你定义的randomNo1和randomNo2是在全局作用域中初始化的，只会在页面加载时生成一次随机数。每次点击按钮调用loadGame时，都是重复使用这两个固定值，所以看起来没有任何变化。

修复代码 #

只需把随机数生成逻辑移到loadGame函数内部，这样每次点击按钮时都会重新生成新的随机数：

const result = document.querySelector(".result");
const play_btn = document.querySelector(".play_btn");

const dice_a = document.querySelector(".dice_a");
const dice_b = document.querySelector(".dice_b");

const loadGame = () => {
  // 每次调用函数时重新生成随机数
  const randomNo1 = Math.floor(Math.random() * 6) + 1;
  const randomNo2 = Math.floor(Math.random() * 6) + 1;
  
  dice_a.src = `images/${randomNo1}.png`;
  dice_b.src = `images/${randomNo2}.png`;
  
  if (randomNo1 > randomNo2) {
    result.innerText = "Player 1 Wins!";
  } else if (randomNo1 < randomNo2) {
    result.innerText = "Player 2 Wins!";
  } else {
    result.innerText = "Draw";
  }
};

play_btn.addEventListener("click", () => {
  loadGame();
});

额外优化建议 #

• 将三个独立if语句合并为if-else if-else结构，减少不必要的条件判断
• 确认images文件夹下存在1.png至6.png的骰子图片，避免图片加载失败

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