首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

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

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 毫秒改变一次游戏背景速度方向,制造一种震动的错觉。
返回列表