调整 bgm 播放的时机

1103409364 · 1103409364 · commit fea95ee69d69 · 2019-06-02T11:38:37.000+08:00
diff --git a/snake-game/.vscode/settings.json b/snake-game/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/snake-game/audio/bgm.mp3 b/snake-game/audio/bgm.mp3
diff --git a/snake-game/index.html b/snake-game/index.html
@@ -11,7 +11,7 @@
 
 <body>
     <!-- 背景音乐 -->
-    <audio src="audio/bgm.mp3" id="bgm" autoplay loop></audio>
+    <audio src="audio/bgm.mp3" id="bgm" loop></audio>
     <!-- 吃食物音效 -->
     <audio src="audio/eat.mp3" id="eatAudio"></audio>
     <!-- 死亡音效 -->
diff --git a/snake-game/js/index.js b/snake-game/js/index.js
@@ -13,8 +13,10 @@ class Game {
         this.start = document.getElementById("start");
         this.pause = document.getElementById("pause");
         this.score = document.getElementById("score");
+        // 获得 bgm
+        this.bgm = document.getElementById("bgm");
     }
-
+    // 绑定事件
     bindEvent() {
         const eventHandler = event => {
             event = event || window.event;
@@ -60,14 +62,21 @@ class Game {
             return false;
         }
         // 监听开始按钮
-        this.pause.addEventListener("click", () => clearInterval(snake.timer));
+        this.pause.addEventListener("click", () => {
+            clearInterval(snake.timer);
+            this.bgm.pause();
+        });
         // 监听暂停按钮
-        this.start.addEventListener("click", () => snake.move());
+        this.start.addEventListener("click", () => {
+            this.bgm.load();
+            this.bgm.play();
+            snake.move();
+        });
         // 监听重新开始按钮
         this.restart.addEventListener("click", () => {
             map.gameBox.innerHTML = "";
-            map.bgm.load();
-            map.bgm.play();
+            this.bgm.load();
+            this.bgm.play();
             clearInterval(snake.timer);
             map = new Map(20, 20);
             snake = new Snake();
@@ -108,8 +117,6 @@ class Map {
         this.col = col;
         // 初始化
         this.init(row, col);
-        // 获得 bgm
-        this.bgm = document.getElementById("bgm");
     }
 
     // 初始化地图
@@ -282,7 +289,7 @@ class Snake {
         clearInterval(this.timer);
         this.dieAudio.load();
         this.dieAudio.play();
-        map.bgm.pause();
+        game.bgm.pause();
     }
 
     // 蛇头碰到蛇身

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "liveServer.settings.port": 5501`
	`3`	`+}`