HTML5 2D 游戏开发 实现 Sprite 行为（5）组合行为

look_w

组合行为各个行为会封装特定的操作，比如跑步、移动或闪耀。也可组合行为来实现更复杂的效果；例如，在蜗牛在其平台上来回移动时，会定期射出蜗牛炸弹，如图 5 所示：
图 5. 蜗牛射击序列蜗牛射击序列是 3 种行为的组合：

• paceBehavior
• snailShootBehavior
• snailBombMoveBehavior

paceBehavior 和 snailShootBehavior 与蜗牛相关联，snailBombMoveBehavior 与蜗牛炸弹相关联。当 Snail Bait 创建 sprite 时，它在 Sprite 构造函数中指定前两个行为，如清单 10 中所示：
清单 10. 创建蜗牛

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

SnailBait.prototype = {    ...    createSnailSprites: function () {       var snail,           snailArtist = new SpriteSheetArtist(this.spritesheet, this.snailCells);           for (var i = 0; i < this.snailData.length; ++i) {          snail = new Sprite('snail',                             snailArtist,                             [ this.paceBehavior,                               this.snailShootBehavior,                               new CycleBehavior(300,  // 300ms per image                                                 1500) // 1.5 seconds between sequences                             ]);          snail.width  = this.SNAIL_CELLS_WIDTH;          snail.height = this.SNAIL_CELLS_HEIGHT;          snail.velocityX = this.SNAIL_PACE_VELOCITY;          snail.direction = this.RIGHT;          this.snails.push(snail); // Push snail onto snails array       }    }, };

每隔 1.5 秒，蜗牛的 CycleBehavior 就会循环显示 sprite 表单中的图像，如图 6 所示，显示每个图像 300 毫秒，这使它看起来像蜗牛在定期张开和闭上嘴巴。蜗牛的 paceBehavior 方法使它在平台上来回移动。
图 6. 蜗牛射击序列的 Sprite 表单图像蜗牛炸弹由 armSnails() 方法创建，如清单 11 所示，Snail Bait 会在游戏开始时调用。该方法迭代游戏的蜗牛，为每个蜗牛创建一个蜗牛炸弹，为每个炸弹配备一个 snailBombMoveBehavior 行为，将对蜗牛的引用存储在蜗牛炸弹中。
清单 11. 武装蜗牛

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 = {    ...    armSnails: function () {       var snail,           snailBombArtist = new SpriteSheetArtist(this.spritesheet, this.snailBombCells);       for (var i=0; i < this.snails.length; ++i) {          snail = this.snails;          snail.bomb = new Sprite('snail bomb',                                   snailBombArtist,                                   [ this.snailBombMoveBehavior ]);          snail.bomb.width  = snailBait.SNAIL_BOMB_CELLS_WIDTH;          snail.bomb.height = snailBait.SNAIL_BOMB_CELLS_HEIGHT;          snail.bomb.top = snail.top + snail.bomb.height/2;          snail.bomb.left = snail.left + snail.bomb.width/2;          snail.bomb.visible = false;          this.sprites.push(snail.bomb);       }    }, };

蜗牛的 snailShootBehavior 射出蜗牛炸弹，如清单 12 所示：
清单 12. 射出蜗牛炸弹

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

SnailBait.prototype = {    ...    this.snailShootBehavior = { // sprite is the snail       execute: function (sprite, time, fps) {          var bomb = sprite.bomb;          if (! bomb.visible && sprite.artist.cellIndex === 2) {             bomb.left = sprite.left;             bomb.visible = true;          }       }    }, };

基于行为的游戏对于一个基于行为的游戏，在实现了基本的架构之后，完善游戏的主要任务就是实现行为。无需担忧游戏的力学基础，比如动画、帧率、滚动背景等，要让游戏充满生机，可将大部分精力集中在实现行为上。而且因为行为可在运行时混搭，所以您可以通过组合行为快速地设计场景原型。

因为 snailShootBehavior 与蜗牛有关联，所以传递给行为的 execute() 方法的 sprite 就是蜗牛。
一个蜗牛维持着对其蜗牛炸弹的引用，所以 snailShootBehavior 通过蜗牛访问该炸弹。然后，snailShootBehavior 会检查蜗牛的当前图像是否位于 图 6 中的最右端，也就是说，检查蜗牛是否马上就会张开它的嘴巴；如果是，那么该行为会将炸弹放入蜗牛口中并显示它。
因此，射出蜗牛炸弹涉及在正确的条件下放置炸弹并让它可见。移动炸弹是 snailBombMoveBehavior 的职责，如清单 13 所示：
清单 13. 蜗牛炸弹移动行为

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

SnailBait = function () {    this.SNAIL_BOMB_VELOCITY = 450,    ... }; SnailBait.prototype = {    this.snailBombMoveBehavior = {       execute: function(sprite, time, fps) {  // sprite is the bomb          if (sprite.visible && snailBait.spriteInView(sprite)) {             sprite.left -= snailBait.SNAIL_BOMB_VELOCITY / fps;          }          if (!snailBait.spriteInView(sprite)) {             sprite.visible = false;          }       }    },

只要蜗牛炸弹出现在视图中，snailBombMoveBehavior 就会以速率 snailBait.SNAIL_BOMB_VELOCITY (450) 像素/秒向左侧移动炸弹。一旦炸弹移出视图，该行为就会使炸弹变得不可见。