HTML5 2D 游戏开发实现重力和添加声音（5）播放 Snail Bait 的音效

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-10-19 18:45 | 只看该作者

HTML5 2D 游戏开发实现重力和添加声音（5）播放 Snail Bait 的音效

播放 Snail Bait 的音效清单 20 到清单 23 给出了在各个点播放 Snail Bait 的音效的代码段。我在本系列以前的文章中已讨论过这些清单中的所有代码，所以在这里不会重复讨论。我留下了围绕对 playSound()的调用的足够逻辑来告知原始上下文。
当跑步小人跳跃时，Snail Bat 播放一种口哨声，如清单 20 所示：
清单 20. 跑步小人在跳跃时发出的声音

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

var SnailBait = function () {
  ...

  this.equipRunnerForJumping: function() {
   ...
   this.runner.jump = function () {
      if (this.jumping) // 'this' is the runner
         return;

      this.runAnimationRate = 0;
      this.jumping = true;
      this.verticalLaunchPosition = this.top;
      this.ascendAnimationTimer.start();

      snailBait.playSound(snailBait.jumpWhistleSound);
   };
  },

当 sprite 爆炸时，Snail Bait 播放 explosionSound，如清单 21 中所示：
清单 21. 爆炸

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

SnailBait.prototype = {
  ...

  explode: function (sprite, silent) {
   if (sprite.runAnimationRate === 0) {
      sprite.runAnimationRate = this.RUN_ANIMATION_RATE;
   }

   sprite.exploding = true;

   this.playSound(this.explosionSound);
   this.explosionAnimator.start(sprite, true);  // true means sprite reappears
  },
  ...
};

当 sprite 落在一个平台上时，它们会发出重击声；当它们落到一个轨道下方时，会发出口哨声（不同于跳跃的口哨声）：
清单 22. 与下落相关的声音

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

SnailBait = function () {
  ...

  this.fallBehavior= {
   ...

   fallOnPlatform: function (sprite) {
      sprite.top = snailBait.calculatePlatformTop(sprite.track) - sprite.height;
      sprite.stopFalling();
      snailBait.playSound(snailBait.thudSound);
   },

   execute: function (sprite, time, fps) {
      var deltaY;

      if (!this.willFallBelowCurrentTrack(sprite, deltaY)) {
         sprite.top += deltaY;
      }
      else { // will fall below current track
         if (this.isPlatformUnderneath(sprite)) {
            this.fallOnPlatform(sprite);
            sprite.stopFalling();
         }
         else {
            sprite.track--;

            sprite.top += deltaY;

            if (sprite.track === 0) {
               snailBait.playSound(snailBait.fallingWhistleSound);
            }
         }
      }
      ...
   }
  };
  ...
};

sprite 之间的碰撞会发出各种声音，具体取决于哪些 sprite 参与了碰撞，如清单 23 所示：
清单 23. 碰撞声音

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
49
50
51
52
53
54
55

收藏分享评分

回复引用

订阅 TOP

返回列表

HTML5 2D 游戏开发 实现重力和添加声音（5）播放 Snail Bait 的音效

HTML5 2D 游戏开发 实现重力和添加声音（5）播放 Snail Bait 的音效

HTML5 2D 游戏开发实现重力和添加声音（5）播放 Snail Bait 的音效

HTML5 2D 游戏开发实现重力和添加声音（5）播放 Snail Bait 的音效