feat: add sounds to levels

src/helpers/events.ts

@@ -1,11 +1,21 @@
+const audio = new Audio('sounds/score.mp3')
+
+/**
+ * Attaches click listeners to "Run" buttons.
+ *
+ * @param callback - Callback.
+ */
 export function addEventListeners(callback: () => void) {
   const buttons = document.querySelectorAll(
     'main button',
   ) as NodeListOf<HTMLButtonElement>
 
   buttons.forEach((oldButton) => {
     const newButton = oldButton.cloneNode(true) as HTMLButtonElement
-    newButton.addEventListener('click', callback)
+    newButton.addEventListener('click', () => {
+      audio.play()
+      callback()
+    })
     oldButton.parentNode?.replaceChild(newButton, oldButton)
   })
 }

src/levels/11.ts

@@ -12,6 +12,7 @@ export const prescript = `
 ${loadPlayer()}
 ${loadExit()}
 loadSprite('spike', 'sprites/spike.png')
+loadSound('explode', 'sounds/hit.mp3')
 
 add([
   sprite('player'),
@@ -56,20 +57,19 @@ map.forEach((row, rowIndex) => {
 })
 
 onCollide('player', 'spike', (player, spike) => {
+  play('explode')
   spike.opacity = 1
   player.destroy()
   addKaboom(player.pos)
 })
 
 onUpdate(() => {
   const player = get('player')[0]
-
   if (!player) {
     return
   }
 
   const { x, y } = player.pos
-
   if (x < 0 || y < 0 || x > width() || y > height()) {
     player.moveTo(40, 80)
   }

src/templates/events.ts

@@ -45,10 +45,16 @@ onKeyDown((key) => {
  * @returns - Game script.
  */
 export const registerWinCondition = (level: number) => `
+loadSound('exit', 'sounds/wooosh.mp3')
+
 onCollide('player', 'exit', () => {
-  parent.postMessage({
-    source: '${GAME_ID}',
-    level: ${level + 1},
+  play('exit')
+
+  wait(0.2, () => {
+    window.parent.postMessage({
+      source: '${GAME_ID}',
+      level: ${level + 1},
+    })
   })
 })
 `

src/templates/layouts.ts

@@ -23,6 +23,7 @@ body {
 
 <script>
 kaboom()
+
 window.onerror = (message) => {
   debug.log(message)
 }
@@ -31,6 +32,7 @@ console.log = (...args) => {
   log(...args)
   debug.log(args.join(' '))
 }
+
 ${code}
 </script>
 </body>