HTML5 2D 游戏开发 结束游戏(5)添加特殊效果
 
- UID
- 1066743
|

HTML5 2D 游戏开发 结束游戏(5)添加特殊效果
添加特殊效果当跑步小人和其他 sprite 碰撞并发生爆炸时,Snail Bait 最终版本会震动游戏背景。清单 13 显示了跑步小人碰撞行为的一部分,发生这样的碰撞时,该行为调用了 Snail Bait 的 shake() 方法:
清单 13. 背景震动1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| var SnailBait = function () {
...
// The collide behavior is attached to the runner
this.collideBehavior = {
...
processCollision: function (sprite, otherSprite) {
...
if ('bat' === otherSprite.type || 'bee' === otherSprite.type ||
'snail' === otherSprite.type || 'snail bomb' === otherSprite.type) {
snailBait.explode(sprite);
snailBait.shake();
setTimeout( function () {
snailBait.loseLife();
snailBait.reset();
snailBait.fadeAndRestoreCanvas();
}, snailBait.EXPLOSION_DURATION);
}
},
};
...
};
|
Snail Bait 的 shake() 方法由一系列对 setTimeout() 的嵌套调用组成,如清单 14 所示:
清单 14. 实现 shake() 方法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
| SnailBait.prototype = function () {
...
shake: function () {
var SHAKE_INTERVAL = 90, // milliseconds
v = snailBait.BACKGROUND_VELOCITY,
ov = snailBait.bgVelocity; // ov means original velocity
this.bgVelocity = -this.BACKGROUND_VELOCITY;
setTimeout( function (e) {
snailBait.bgVelocity = v;
setTimeout( function (e) {
snailBait.bgVelocity = -v;
setTimeout( function (e) {
snailBait.bgVelocity = v;
setTimeout( function (e) {
snailBait.bgVelocity = -v;
setTimeout( function (e) {
snailBait.bgVelocity = v;
setTimeout( function (e) {
snailBait.bgVelocity = -v;
setTimeout( function (e) {
snailBait.bgVelocity = v;
setTimeout( function (e) {
snailBait.bgVelocity = -v;
setTimeout( function (e) {
snailBait.bgVelocity = v;
setTimeout( function (e) {
snailBait.bgVelocity = -v;
setTimeout( function (e) {
snailBait.bgVelocity = v;
setTimeout( function (e) {
snailBait.bgVelocity = ov;
}, SHAKE_INTERVAL);
}, SHAKE_INTERVAL);
}, SHAKE_INTERVAL);
}, SHAKE_INTERVAL);
}, SHAKE_INTERVAL);
}, SHAKE_INTERVAL);
}, SHAKE_INTERVAL);
}, SHAKE_INTERVAL);
}, SHAKE_INTERVAL);
}, SHAKE_INTERVAL);
}, SHAKE_INTERVAL);
}, SHAKE_INTERVAL);
},
...
};
|
Snail Bait 的 shake() 方法每隔 90 毫秒改变一次游戏背景速度方向,制造一种震动的错觉。 |
|
|
|
|
|