HTML5 2D 游戏开发 实现重力和添加声音（4）
|
- UID
- 1066743
|
HTML5 2D 游戏开发 实现重力和添加声音（4）
实现音效Snail Bait 在游戏的各个点播放音效 —例如，在跑步小人与一只蜜蜂或蝙蝠碰撞时 —并且有时必须同时播放多种声音。游戏使用 HTML5 audio元素来实现音效。
HTML audio元素Snail Bait 为它的每种声音创建一个 audio元素，如清单 15 所示：
清单 15. Snail Bait 的 audio元素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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
| <!DOCTYPE html>
<html>
<head>
<title>Snail Bait</title>
<link rel='stylesheet' href='game.css'/>
</head>
<body>
<audioid='soundtrack'>
<source src='sounds/soundtrack.mp3' type='audio/mp3'>
<source src='sounds/soundtrack.ogg' type='audio/ogg'>
</audio>
<audioid='plop-sound' >
<source src='sounds/plop.mp3' type='audio/mp3'>
<source src='sounds/plop.ogg' type='audio/ogg'>
</audio>
<audioid='chimes-sound' >
<source src='sounds/chimes.mp3' type='audio/mp3'>
<source src='sounds/chimes.ogg' type='audio/ogg'>
</audio>
<audioid='whistle-down-sound' >
<source src='sounds/whistledown.mp3' type='audio/mp3'>
<source src='sounds/whistledown.ogg' type='audio/ogg'>
</audio>
<audioid='thud-sound' >
<source src='sounds/thud.mp3' type='audio/mp3'>
<source src='sounds/thud.ogg' type='audio/ogg'>
</audio>
<audioid='jump-sound' >
<source src='sounds/jump.mp3' type='audio/mp3'>
<source src='sounds/jump.ogg' type='audio/ogg'>
</audio>
<audioid='coin-sound' >
<source src='sounds/coin.mp3' type='audio/mp3'>
<source src='sounds/coin.ogg' type='audio/ogg'>
</audio>
<audioid='explosion-sound' >
<source src='sounds/explosion.mp3' type='audio/mp3'>
<source src='sounds/explosion.ogg' type='audio/ogg'>
</audio>
...
</body>
</html>
|
在每个 audio元素内部，我指定了两个不同格式的声音文件；浏览器选择其可播放的格式。所有现代浏览器都支持 MP3 或 OGG 格式；请参阅 了解 HTML5 音频格式的更多信息。
此外，Snail Bait 使用文档的 getElementById()方法访问 JavaScript 中的每个 audio元素，如清单 16 所示：
清单 16. 访问 Snail Bait 的 JavaScript 音频元素1
2
3
4
5
6
7
8
9
10
11
12
13
14
| SnailBait = function () {
...
this.coinSound = document.getElementById('coin-sound'),
this.chimesSound = document.getElementById('chimes-sound'),
this.explosionSound = document.getElementById('explosion-sound'),
this.fallingWhistleSound = document.getElementById('whistle-down-sound'),
this.plopSound = document.getElementById('plop-sound'),
this.jumpWhistleSound = document.getElementById('jump-sound'),
this.soundtrack = document.getElementById('soundtrack'),
this.thudSound = document.getElementById('thud-sound'),
...
};
|
音量对于其播放的每种声音，Snail Bait 定义了一个音量级，从 0.0（静音）到 1.0（最大音量）。清单 17 展示了 Snail Bait 为音量定义（而且我凭经验确定）的常量：
清单 17. 定义 Snail Bait 的声音的音量级1
2
3
4
5
6
7
8
9
10
11
12
13
14
| SnailBait = function () {
// Sound-related constants
this.COIN_VOLUME = 1.0,
this.CHIMES_VOLUME = 1.0,
this.EXPLOSION_VOLUME = 0.25,
this.FALLING_WHISTLE_VOLUME = 0.10,
this.JUMP_WHISTLE_VOLUME = 0.05,
this.PLOP_VOLUME = 0.20,
this.SOUNDTRACK_VOLUME = 0.12,
this.THUD_VOLUME = 0.20,
...
};
|
有了对音频元素和表示音量级的常量的引用，Snail Bait 即可在游戏启动时初始化音频元素，如清单 18 所示：
清单 18. 设置 Snail Bait 的声音的音量级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
| SnailBait.prototype = {
...
initializeSounds: function () {
this.coinSound.volume = this.COIN_VOLUME;
this.chimesSound.volume = this.CHIMES_VOLUME;
this.explosionSound.volume = this.EXPLOSION_VOLUME;
this.fallingWhistleSound.volume= this.FALLING_WHISTLE_VOLUME;
this.plopSound.volume = this.PLOP_VOLUME;
this.jumpWhistleSound.volume = this.JUMP_WHISTLE_VOLUME;
this.soundtrack.volume = this.SOUNDTRACK_VOLUME;
this.thudSound.volume = this.LANDING_VOLUME;
},
start: function () {
this.createSprites();
this.initializeImages();
this.initializeSounds();
this.equipRunner();
this.splashToast('Good Luck!');
...
},
...
};
|
同时播放多种声音HTML5 audio元素有一个非常简单的 API，其中包括 Snail Bait 用来播放声音的以下方法：
Snail Bait 还使用了以下 audio元素属性：
可在清单 19 中看到所有前述方法和属性的使用（除了 pause()，它用在 和 中）：
清单 19. 使用 Snail Bait 的音轨播放声音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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| SnailBait = function () {
...
this.soundOn= true,
this.audioTracks= [ // 8 tracks is more than enough
new Audio(), new Audio(), new Audio(), new Audio(),
new Audio(), new Audio(), new Audio(), new Audio()
],
...
// Playing sounds.......................................................
soundIsPlaying: function (sound) {
return !sound.ended && sound.currentTime > 0;
},
playSound: function (sound) {
var track, index;
if (this.soundOn) {
if (!this.soundIsPlaying(sound)) {
sound.play();
}
else {
for (i=0; index < this.audioTracks.length; ++index) {
track = this.audioTracks[index];
if (!this.soundIsPlaying(track)) {
track.src = sound.currentSrc;
track.load();
track.volume = sound.volume;
track.play();
break;
}
}
}
}
},
...
};
|
为了同时播放多种声音，Snail Bait 创建了一个包含 8 个 audio元素的数组。Snail Bait 的 playSound()方法迭代该数组，并使用当前未播放的第一个 audio元素来播放该声音。
请注意，Snail Bait 绝不通过 中的 HTML 中指定的原始 audio元素来播放音效。相反，该游戏通过其在 中以编程方式创建的 8 个 audio 元素来播放音效。该游戏从原始 audio元素将声音加载到以编程方式创建的元素中，然后播放这个以编程方式创建的元素。 |
|
|
|
|
|
