HTML5 2D 游戏开发 结束游戏（2）调整游戏设置和图像

look_w

调整游戏设置和图像在实现一个游戏时，游戏开发人员通常会不断调整动画设置和图像。对于 Snail Bait 的最后这轮调整，我将：
HTML 5 专题HTML5 代表了 Web 业务和云业务在实现方式上的里程碑式改变。本 将顺应潮流为您介绍一些和 HTML5 新特性相关的内容，及其炫酷的效果。

• 更改平台位置和大小。
• 向所有红宝石和硬币添加弹跳行为。
• 将蜗牛移动到游戏的结尾处。
• 实现一个引爆按钮。
• 替换硬币。

显然，图 4 中展示了大多数这些更改，展示了游戏即将结束时蜗牛的射击炸弹：
图 4. 游戏即将结束时，游戏角色躲避蜗牛炸弹游戏进行到一半时，跑步小人会遇到图 5 中所示的僵局：蜜蜂位于跑步小人和下一个平台之间。要越过蜜蜂并通过这段，跑步小人必须引爆可以炸死蜜蜂的蓝色按钮。
图 5. 用来炸死守卫下一个平台的蜜蜂的蓝色按钮图 6 显示了按钮引爆和蜜蜂爆炸。但 sprite 也将被炸死，Snail Bait 取消了它们进行碰撞检测的资格。取消爆炸蜜蜂碰撞检测资格使得跑步小人可以直接越过蜜蜂跳到下一个平台。
图 6. 运作中的引爆按钮和所有 Snail Bait 动作一样，按钮引爆也是一种行为。清单 2 显示了按钮引爆行为的实现：
清单 2. 按钮引爆行为

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

var SnailBait = function () {   ...   this.buttonDetonateBehavior= {      execute: function(sprite, now, fps, lastAnimationFrameTime) {         var BUTTON_REBOUND_DELAY = 1000;         if ( ! sprite.detonating) { // trigger            return;         }         sprite.artist.cellIndex = 1; // flatten the button         snailBait.explode(snailBait.bees[5]);         setTimeout( function () {            sprite.artist.cellIndex = 0; // rebound            sprite.detonating = false; // reset trigger         }, BUTTON_REBOUND_DELAY);      }   } };

清单 3 显示了 Snail Bai 如何将引爆行为添加到蓝色按钮上：
清单 3. 创建具有引爆行为的蓝色按钮

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

var SnailBait = function () { SnailBait.prototype = {   ...   createButtonSprites: function () {      var button,         blueButtonArtist = new SpriteSheetArtist(this.spritesheet,                                                      this.blueButtonCells),         goldButtonArtist = new SpriteSheetArtist(this.spritesheet,                                                      this.goldButtonCells);      for (var i = 0; i < this.buttonData.length; ++i) {         if (i === this.buttonData.length - 1) {            button = new Sprite('button',                                goldButtonArtist,                                  [ this.paceBehavior ]);         }         else {            button = new Sprite('button',                                 blueButtonArtist,                                 [ this.paceBehavior,                               this.buttonDetonateBehavior]);         }         button.width = this.BUTTON_CELLS_WIDTH;         button.height = this.BUTTON_CELLS_HEIGHT;         this.buttons.push(button);      }   }, };

回忆每一个动画帧，Snail Bait 在所有可见 sprite 上进行迭代。对于每个 sprite，Snail Bait 都将在 sprite  的行为数组上进行迭代，并调用每个行为的 execute() 方法。很多时候，按钮引爆行为的 execute() 方法什么都不做，因为按钮的 detonating 属性是 false 。在 Snail Bait 将蓝色按钮的 detonating 属性被设置为 true  时，如清单 4 所示，按钮引爆行为将：

• 使按钮变平。
• 使蜜蜂爆炸
• 延迟一秒。
• 重置按钮的原始图像。
• 将按钮的 detonating 属性设置为 false 。

从此时起，引爆行为将进入休眠状态，直至跑步小人下次跳落到该按钮上。
清单 4.  暂停引爆行为

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 () {   ...   // The collide behavior is attached to the runner   this.collideBehavior = {      ...      detonateButton: function (otherSprite) {         otherSprite.detonating = true; // trigger      },      processCollision: function (sprite, otherSprite) {         if (otherSprite.value) {            this.adjustScore(otherSprite);         }         if ('button' === otherSprite.type && sprite.falling)) {            this.detonateButton(otherSprite);         }         ...      },   };   ... };