HTML5 2D 游戏开发 结束游戏（6）追踪生命
|
- UID
- 1066743
|
HTML5 2D 游戏开发 结束游戏（6）追踪生命
追踪生命Snail Bait 最终版在游戏开始时给玩家提供了 3 次生命。当跑步小人与怀有恶意的 sprite 相撞并发生爆炸时，玩家会失去一次生命，Snail Bait 会让跑步小人返回到游戏开始处。
Snail Bait 将在游戏画布上显示剩余生命数，每个跑步小人的微型图标代表一次生命。这些图像是在游戏的 HTML 中指定的，如清单 15 所示：
清单 15. 生命元素1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <html>
...
<body>
<div id='arena'>
<div id='header'>
<div id='score'>0</div>
<div id='lives'>
<img id='life-icon-left' src='images/runner-small.png'/>
<img id='life-icon-middle' src='images/runner-small.png'/>
<img id='life-icon-right' src='images/runner-small.png'/>
</div>
</div>
...
</div>
...
<body>
</html>
|
在运行时，Snail Bait 的 loseLife() 方法（在跑步小人与怀有恶意的 sprite 相撞时调用）会更新 lives 元素。清单 16 显示了 updateLivesElement 函数和 loseLife() 方法：
清单 16. 更新生命元素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.prototype = {
...
updateLivesElement: function () {
if (this.lives === 3) {
this.lifeIconLeft.style.opacity = 1.0;
this.lifeIconMiddle.style.opacity = 1.0;
this.lifeIconRight.style.opacity = 1.0;
}
else if (this.lives === 2) {
this.lifeIconLeft.style.opacity = 1.0;
this.lifeIconMiddle.style.opacity = 1.0;
this.lifeIconRight.style.opacity = 0;
}
else if (this.lives === 1) {
this.lifeIconLeft.style.opacity = 1.0;
this.lifeIconMiddle.style.opacity = 0;
this.lifeIconRight.style.opacity = 0;
}
else if (this.lives === 0) {
this.lifeIconLeft.style.opacity = 0;
this.lifeIconMiddle.style.opacity = 0;
this.lifeIconRight.style.opacity = 0;
}
},
loseLife: function () {
this.lives--;
this.updateLivesElement();
if (this.lives === 1) {
snailBait.revealToast('Last chance!');
}
if (this.lives === 0) {
this.gameOver();
}
},
...
};
|
|
|
|
|
|
|
