feat: Add sound effects

src/BubbleEffect.js

@@ -1,5 +1,6 @@
 import { fgc2 } from './constants';
 import { Pool, Sprite } from './kontra';
+import { playBubble } from './sound';
 
 export class BubbleEffect {
   timeBetweenBubbles = 10;
@@ -25,6 +26,7 @@ export class BubbleEffect {
     if (isBoost && this.timeSinceLastBoostBubble <= this.timeBetweenBubbles) {
       return;
     }
+    playBubble();
     this.timeSinceLastBubble = 0;
     this.timeSinceLastBoostBubble = 0;
     this.pool.get({

src/Game.js

@@ -3,6 +3,7 @@ import { RESTART_LEVEL, START_LEVEL, START_NEXT_LEVEL } from './gameEvents';
 import { Level } from './Level';
 import { playSong } from './sound';
 import { setGameHeight, setGameWidth } from './store';
+import { bgc, bgc2, fgc, fgc2 } from './constants';
 
 export class Game {
   canvas;

src/Goal.js

@@ -2,6 +2,7 @@ import { emit } from './kontra';
 
 import { isBoxCollision } from './utils';
 import { GOAL_COLLISION, LEVEL_COMPLETE } from './gameEvents';
+import { playGoal } from './sound';
 
 export class Goal {
   level;
@@ -14,6 +15,7 @@ export class Goal {
   hasWon = false;
   hasVanished = false;
   vanishSpeed = 0.3;
+  isVanishihng = false;
 
   constructor(x, y, { level }) {
     this.x = x;
@@ -46,6 +48,12 @@ export class Goal {
   }
 
   startVanishing() {
+    // XXX Only play goal sound when we start vanishing goal for the first time
+    // TODO (johnedvard) emit isvanishing event
+    if (!this.isVanishihng) {
+      playGoal();
+    }
+    this.isVanishihng = true;
     this.radiusX -= this.vanishSpeed;
     this.radiusY -= this.vanishSpeed * 2;
     if (this.radiusX <= 0) this.radiusX = 0;

src/Heart.js

@@ -3,6 +3,7 @@ import heart from 'data-url:./assets/img/heart.png';
 import { emit } from './kontra';
 import { HEART_PICKUP } from './gameEvents';
 import { createSprite, isBoxCollision } from './utils';
+import { playPickup } from './sound';
 
 export class Heart {
   scale = 4;
@@ -68,10 +69,11 @@ export class Heart {
           width: this.width * this.scale,
           height: this.height * this.scale,
         },
-        this.level.player.sprite,
+        this.level.player.sprite
       )
     ) {
       this.sprite = null;
+      playPickup();
       emit(HEART_PICKUP, { heart: this });
     }
   }

src/Level.js

@@ -7,6 +7,7 @@ import { Heart } from './Heart';
 import { on } from './kontra';
 import { Player } from './Player';
 import { Saw } from './Saw';
+import { playDead } from './sound';
 import { isBoxCollision } from './utils';
 
 export class Level {
@@ -127,7 +128,7 @@ export class Level {
           level: this,
           behavior: saw.b,
           distance: saw.d,
-        }),
+        })
       );
     });
   }
@@ -147,7 +148,7 @@ export class Level {
           behavior: brick.b,
           distance: brick.d,
           level: this,
-        }),
+        })
       );
     });
   }
@@ -156,7 +157,7 @@ export class Level {
     if (!levelData.bb) return;
     levelData.bb.forEach((board) => {
       this.bounceBoards.push(
-        new BounceBoard({ p1: board.p1, p2: board.p2, level: this }),
+        new BounceBoard({ p1: board.p1, p2: board.p2, level: this })
       );
     });
   }
@@ -177,6 +178,7 @@ export class Level {
     this.capturedHearts.push(heart);
   };
   onPlayerDied = ({}) => {
+    playDead();
     this.player.respawnPlayer();
     this.resetHearts();
     this.resertSaws();

src/Player.js

@@ -16,6 +16,7 @@ import { createSprite } from './utils';
 import { getDirection, moveBehavior } from './behavior';
 import { BubbleEffect } from './BubbleEffect';
 import { PLAYER_ALIVE, PLAYER_DEAD } from './PlayerState';
+import { playBubble } from './sound';
 
 export class Player {
   game;
@@ -107,11 +108,12 @@ export class Player {
   }
 
   applyForce(fX, fY) {
+    // TODO (johnedvard) use a constant to make it more obvious and less prone to bug
+    const isBoost = fY < -4;
     this.particleEffect.addBubbles({
       x: this.sprite.x,
       y: this.sprite.y,
-      // TODO (johnedvard) use a constant to make it more obvious and less prone to bug
-      isBoost: fY < -4,
+      isBoost,
     });
     this.rope.endNode.applyForce(fX, fY);
   }
@@ -146,7 +148,7 @@ export class Player {
       this.sprite.x,
       this.sprite.y,
       this.sprite.width * this.scale,
-      this.sprite.height * this.scale,
+      this.sprite.height * this.scale
     );
     ctx.stroke();
   }
@@ -230,7 +232,7 @@ export class Player {
     const startY = this.levelData.p.y;
     this.anchorNodeDirection = getDirection(
       this.levelData.p.b,
-      this.levelData.p.d,
+      this.levelData.p.d
     );
     this.createRope({
       startX,

src/Rope.js

@@ -6,6 +6,7 @@ import { gameHeight, gameWidth } from './store';
 import { isBoxCollision } from './utils';
 import { VerletLink } from './VerletLink';
 import { VerletNode } from './VerletNode';
+import { playCutRope } from './sound';
 
 export class Rope {
   nodes = [];
@@ -141,6 +142,7 @@ export class Rope {
   cutRope(index) {
     if (index >= this.nodes.length - 1) index = this.nodes.length - 2; // Make sure we can cut the rope if we pass the wrong index
     this.links.splice(index, 1);
+    playCutRope();
     emit(CUT_ROPE, { rope: this });
   }
 

src/sound.js

@@ -1,39 +1,73 @@
-import { zzfxP } from './zzfx';
+import { zzfxP, zzfx } from './zzfx';
 import { zzfxM } from './zzfxm';
 
 let myAudioNode = null;
 let isPlaying = false;
 let audioContext = zzfxX;
+export const playBubble = () => {
+  zzfx(
+    ...[, 1, 7, 0.02, 0.01, 0.02, 4, 0.5, , , 1, 0.01, , , 150, , 0.21, , 0.01]
+  ); // Blip 273
+};
 export const playDead = () => {
+  zzfx(...[, , 326, , 0.06, 0.08, 1, 0.95, -6.8, , , , , , , , , 0.45, 0.08]); // Jump 299
+};
+
+export const playGoal = () => {
   zzfx(
-    ...[1.1, , 229, , , 0.31, 4, 2.38, -0.7, -3, , , , 0.4, , 0.2, , 0.88, 0.01]
-  ); // Hit 111
+    ...[
+      ,
+      ,
+      269,
+      0.07,
+      0.21,
+      0.3,
+      1,
+      0.94,
+      8.3,
+      -0.2,
+      284,
+      0.12,
+      0.12,
+      ,
+      ,
+      ,
+      0.13,
+      0.75,
+      0.17,
+    ]
+  ); // Powerup 397
 };
-export const playBulletExplotion = () => {
+export const playPickup = () => {
   zzfx(
     ...[
-      1.75,
       ,
-      334,
       ,
+      607,
+      0.01,
+      0.03,
       0.13,
-      0.98,
-      4,
-      0.79,
-      0.9,
+      1,
+      1.56,
       ,
       ,
+      -490,
+      0.04,
+      0.02,
       ,
       ,
-      0.9,
       ,
-      0.4,
-      0.29,
-      0.84,
-      0.01,
-      0.49,
+      ,
+      0.47,
+      0.02,
+      0.03,
     ]
-  ); // Explosion 121
+  ); // Pickup 368
+};
+export const playCutRope = () => {
+  zzfx(
+    ...[, , 1081, 0.01, 0.01, 0.02, 4, 1.1, 14, 32, , , , 0.8, , , 0.06, 0.66]
+  ); // Blip 329
 };
 export const playSong = () => {
   isPlaying = true;