HTML5 2D 游戏开发 实现 Sprite 行为（5）组合行为
|
- UID
- 1066743
|
HTML5 2D 游戏开发 实现 Sprite 行为（5）组合行为
组合行为各个行为会封装特定的操作，比如跑步、移动或闪耀。也可组合行为来实现更复杂的效果；例如，在蜗牛在其平台上来回移动时，会定期射出蜗牛炸弹，如图 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) 像素/秒向左侧移动炸弹。一旦炸弹移出视图，该行为就会使炸弹变得不可见。 |
|
|
|
|
|
