打地鼠Web游戏添加背景音乐的JavaScript实现问题咨询

你只需要在现有JavaScript代码中补充3处内容即可，具体修改如下：

第一步：声明背景音乐对象 #

在你现有声明evilLaugh音频对象的代码下方，新增背景音乐的实例配置：

// 现有代码
let evilLaugh = new Audio('sounds/laugh.mp3');
evilLaugh.volume = 0.3;

// 新增背景音乐配置
let bgm = new Audio('sounds/The Price is Right.mp3'); // 注意文件名要和你实际存放的文件名完全一致
bgm.volume = 0.2; // 调低背景音乐音量，避免盖过游戏音效
bgm.loop = true; // 设置背景音乐循环播放

第二步：游戏启动时播放背景音乐 #

在你调用moveMole()启动游戏的代码下方，新增播放BGM的逻辑：

moveMole();
// 新增播放背景音乐
bgm.play();

第三步：游戏结束时停止背景音乐 #

在countDown函数的游戏结束判断分支里，新增停止BGM的逻辑，避免游戏结束后音乐继续播放：

if (currentTime == 0) {
  clearInterval(countDownTimerId);
  clearInterval(timerId);
  // 新增停止背景音乐
  bgm.pause();
  bgm.currentTime = 0; // 重置播放进度，下次启动游戏时从头播放
  alert('GAME OVER! Your final score is ' + result);
  evilLaugh.play();
}

注意事项 #

受现代浏览器自动播放策略限制，没有用户交互的情况下网页无法自动播放音频，如果你打开网页后背景音乐没有正常播放，可以额外加一个「开始游戏」按钮，用户点击按钮后再执行启动游戏、播放BGM的逻辑，就能规避浏览器拦截问题。

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