Sound

README.md

@@ -1,3 +1,17 @@
 # About
 
-This game is written for [OLC Code Jam 2022](https://itch.io/jam/olc-codejam-2022)
+This game is written for [OLC Code Jam 2022](https://itch.io/jam/olc-codejam-2022)
+
+# TODO
+
+- [x] lives
+- [x] shooting platform sprite
+- [ ] clouds should strike lightnings sometimes
+- [x] bg rain effect
+- [ ] animated gif for clouds
+- [ ] boss?
+- [ ] umbrella shields
+- [ ] music
+- [x] sounds
+- [ ] title screen
+- [ ] settings

css/style.css

@@ -63,6 +63,18 @@ html, body {
     font-size: 32px;
 }
 
+#sound {
+    position: absolute;
+    display: block;
+    top: 15px;
+    right: 15px;
+    font-size: 32px;
+    border: none;
+    background: transparent;
+    outline: none;
+    cursor: pointer;
+}
+
 #lives:before {
     content: '❤ ';
     color: red;

index.html

@@ -9,6 +9,7 @@
         <canvas id="canvas" width="1280" height="720"></canvas>
         <div id="root">
             <section id="lives"></section>
+            <section id="sound"></section>
         </div>
         <script src="https://cdn.jsdelivr.net/gh/josephg/noisejs/perlin.js"></script>
         <script src="js/utils.js"></script>

js/cloud.js

@@ -21,6 +21,9 @@ class Cloud extends Entity {
 
             this.particles.add(cloudParticle);
         }
+
+        this.sound = new Audio();
+        this.sound.src = 'snd/click.ogg';
     }
 
     draw() {
@@ -67,6 +70,11 @@ class Cloud extends Entity {
             if (Math.random() < Cloud.shootProbability) {
                 const raindrop = new RainDrop(this.x, this.y + 0.009);
                 bullets.add(raindrop);
+
+                if (soundEnabled) {
+                    this.sound.currentTime = 0;
+                    this.sound.play().catch(() => { });
+                }
             }
         }
     }

js/game.js

@@ -1,8 +1,12 @@
 const $ = (s) => document.querySelector(s);
-const $$ = (s) => Array.from(document.querySelectorAll(s));
+
 const ROOT = $('#root');
+const LIVES_LABEL = $('#lives');
+const SOUND_BUTTON = $('#sound');
 const CANVAS = $('#canvas');
 const CTX = CANVAS.getContext('2d');
+
+
 const X_BOUND = 0.05;
 const GAME_OVER_BOUND = 0.9;
 const MAX_RAINDROPS = 100;
@@ -11,8 +15,9 @@ const clouds = new Set();
 const bullets = new Set();
 const raindrops = new Set();
 let shootingPad = new ShootingPad();
-let running = true;
+let running = false;
 let direction = 1;
+let soundEnabled = localStorage.soundEnabled !== 'false';
 
 const initCloudField = () => {
     for (let y = 0; y < 6; y++) {
@@ -36,6 +41,11 @@ const initRainEffect = () => {
     }
 }
 
+const updateSoundButton = () => {
+    SOUND_BUTTON.textContent = soundEnabled ? '🔊' : '🔈';
+    SOUND_BUTTON.title = `Sound ${soundEnabled ? 'enabled' : 'disabled'}`;
+}
+
 const start = () => {
     $('.result')?.remove();
 
@@ -51,7 +61,6 @@ const start = () => {
     initCloudField();
 
     running = true;
-    loop();
 }
 
 const gameOver = (result) => {
@@ -63,58 +72,63 @@ const gameOver = (result) => {
 }
 
 const loop = () => {
-    if (!running) return;
     document.title = `${fps()} FPS | CloudInvaders | OLC Codejam 2022`;
     CTX.clearRect(0, 0, CANVAS.width, CANVAS.height);
 
-    let directionUpdated = false;
-    let isOver = false;
-    Array.from(clouds).forEach(c => {
-        c.update(direction);
-        c.draw();
-        if (c.x < X_BOUND || c.x > 1 - X_BOUND) {
-            directionUpdated = true;
-        }
-        if (c.y >= GAME_OVER_BOUND) {
-            isOver = true;
+    raindrops.forEach(d => {
+        d.update();
+        d.draw();
+    });
+    if (running) {
+        let directionUpdated = false;
+        let isOver = false;
+        Array.from(clouds).forEach(c => {
+            c.update(direction);
+            c.draw();
+            if (c.x < X_BOUND || c.x > 1 - X_BOUND) {
+                directionUpdated = true;
+            }
+            if (c.y >= GAME_OVER_BOUND) {
+                isOver = true;
+            }
+            if (!c.alive) {
+                clouds.delete(c);
+            }
+        });
+
+        if (directionUpdated) {
+            direction = -direction;
         }
-        if (!c.alive) {
-            clouds.delete(c);
+
+        if (isOver) {
+            gameOver('Game over');
         }
-    });
 
-    if (directionUpdated) {
-        direction = -direction;
-    }
+        Array.from(bullets).forEach(b => {
+            b.update();
+            b.draw();
 
-    if (isOver) {
-        gameOver('Game over');
-    }
+            if (!b.alive) {
+                bullets.delete(b);
+            }
+        });
 
-    Array.from(bullets).forEach(b => {
-        b.update();
-        b.draw();
+        shootingPad.update();
+        shootingPad.draw();
 
-        if (!b.alive) {
-            bullets.delete(b);
+        if (clouds.size === 0) {
+            gameOver('WIN');
         }
-    });
-
-    raindrops.forEach(d => {
-        d.update();
-        d.draw();
-    });
-
-    shootingPad.update();
-    shootingPad.draw();
-
-    if (clouds.size === 0) {
-        gameOver('WIN');
     }
-
     requestAnimationFrame(loop);
 };
 
+SOUND_BUTTON.addEventListener('click', () => {
+    soundEnabled = !soundEnabled;
+    localStorage.soundEnabled = soundEnabled;
+    updateSoundButton();
+});
+
 document.addEventListener('keypress', () => {
     if (!running) {
         start();
@@ -122,4 +136,6 @@ document.addEventListener('keypress', () => {
 });
 
 initRainEffect();
+updateSoundButton();
+loop();
 start();

js/shooting_pad.js

@@ -21,6 +21,12 @@ class ShootingPad extends Entity {
         image.src = 'img/shooting-pad.svg';
         image.onload = () => this.image = image;
 
+        this.shootSound = new Audio();
+        this.shootSound.src = 'snd/shoot.ogg';
+
+        this.hitSound = new Audio();
+        this.hitSound.src = 'snd/hit.ogg';
+
         this.lastShootTime = Date.now();
         this.invulnerable = false;
         this.lives = MAX_LIVES;
@@ -44,6 +50,11 @@ class ShootingPad extends Entity {
             this.lastShootTime = Date.now();
             const bullet = new Bullet(this.x, this.y - 0.009);
             bullets.add(bullet);
+
+            if (soundEnabled) {
+                this.shootSound.currentTime = 0;
+                this.shootSound.play().catch(() => { });
+            }
         }
     }
 
@@ -54,7 +65,7 @@ class ShootingPad extends Entity {
     }
 
     initLives() {
-        $('#lives').textContent = `× ${this.lives}`;
+        LIVES_LABEL.textContent = `× ${this.lives}`;
     }
 
     lifeOver() {
@@ -63,6 +74,11 @@ class ShootingPad extends Entity {
         this.lives--;
         this.initLives();
 
+        if (soundEnabled) {
+            this.hitSound.currentTime = 0;
+            this.hitSound.play().catch(() => { });
+        }
+
         if (this.lives === 0) {
             return gameOver('Game over');
         } else {

todo.md

@@ -1,11 +0,0 @@
-# TODO
-
-- [x] lives
-- [x] shooting platform sprite
-- [ ] clouds should strike lightnings sometimes
-- [x] bg rain effect
-- [ ] animated gif for clouds
-- [ ] boss?
-- [ ] umbrella shields
-- [ ] music & sounds
-