HTML5 2D 游戏开发 实现重力和添加声音（3）
|
- UID
- 1066743
|
HTML5 2D 游戏开发 实现重力和添加声音（3）
在跑步小人下落时暂停本系列第 7 篇文章的 一节中已讨论过，行为必须实现 pause()和 unpause()方法，以便它们可与整个游戏一致地暂停和恢复。跑步小人的下落行为满足该需求，如清单 10 所示：
清单 10. 暂停和取消暂停下落行为1
2
3
4
5
6
7
8
9
10
11
12
13
14
| var SnailBait = function () {
...
this.fallBehavior = {
pause: function (sprite) {
sprite.fallAnimationTimer.pause();
},
unpause: function (sprite) {
sprite.fallAnimationTimer.unpause();
},
}
...
}
|
下落行为使用跑步小人的下落动画计时器跟踪下落所经历的时间。因此，该行为的 pause()和 unpause()方法只是暂停和取消暂停该计时器。
现在，您已看到 Snail Bait 如何让跑步小人下落，是时候看看一个完全不相关的方面了：游戏的声音。
控制音效和音乐Snail Bait 可同时播放一个音乐音轨和音效。图 3 的左下角是声音和音乐复选框，用户可使用它们控制游戏是否播放音效和 / 或音乐：
图 3. 声音和音乐控制 清单 11 显示了这些复选框的 HTML：
清单 11. Snail Bait 的声音和音乐复选框1
2
3
4
5
6
7
8
9
| <div id='sound-and-music'>
<div class='checkbox-div'>
Sound <input id='sound-checkbox' type='checkbox' checked/>
</div>
<div class='checkbox-div'>
Music <input id='music-checkbox' type='checkbox'/>
</div>
</div>
|
可使用一个复选框的 checked属性（没有值）来控制复选框最初是否已选择。如果存在该属性，则表示复选框最初已选择；否则未选择；这从 和 中可以看出。
在清单 12 中，Snail Bait 以编程方式访问这些复选框元素并维护两个变量 —soundOn和 musicOn—事件处理程序会将这两个变量与复选框同步。音乐复选框事件处理程序还会播放或暂停游戏的音乐音轨，这种音乐音轨（不同于音效）会在后台持续播放。
清单 12. 声音和音乐复选框事件处理程序1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| var SnailBait = function () {
...
this.soundCheckbox= document.getElementById('sound-checkbox');
this.musicCheckbox= document.getElementById('music-checkbox');
this.soundOn= this.soundCheckbox.checked;
this.musicOn= this.musicCheckbox.checked;
...
};
...
snailBait.soundCheckbox.onchange = function (e) {
snailBait.soundOn = snailBait.soundCheckbox.checked;
};
snailBait.musicCheckbox.onchange = function (e) {
snailBait.musicOn = snailBait.musicCheckbox.checked;
if (snailBait.musicOn) {
snailBait.soundtrack.play();
}
else {
snailBait.soundtrack.pause();
}
};
|
如果音乐已打开，那么 Snail Bait 的 startGame()方法会播放音轨，如清单 13 所示：
清单 13. 启动游戏1
2
3
4
5
6
7
8
9
10
11
| SnailBait.prototype = {
SnailBait.prototype = {
...
startGame: function () {
if (this.musicOn) {
this.soundtrack.play();
}
requestNextAnimationFrame(this.animate);
},
...
|
我还修改了游戏的 togglePaused()方法，以依据游戏是否暂停来暂停或播放音轨，如清单 14 所示：
清单 14. 暂停音乐1
2
3
4
5
6
7
8
9
10
11
12
13
14
| SnailBait.prototype = {
...
togglePaused: function () {
...
if (this.paused && this.musicOn) {
this.soundtrack.pause();
}
else if ( ! this.paused && this.musicOn) {
this.soundtrack.play();
}
},
};
|
|
|
|
|
|
|
