Add music/sounds; fix a bug where you could attempt to resume a game when it was won

README.md

@@ -4,6 +4,6 @@ It's like Baba is You, but Aggies (and not as good :P)
 
 Most artwork is from the initial game, as found [here](https://www.spriters-resource.com/pc_computer/babaisyou/sheet/115231/), besides an ugly AF custom "Big Blue" (I am no artist and I spent way too long on it).
 
-Music is "Hope is Not Lost" by Jim Hall, found on [free music archive](https://freemusicarchive.org/music/jim-hall/synth-kid-elsewhere/hope-is-not-lost) and cut just a little early to loop better.
+Music is "Fluffing a Duck" by Kevin Macleod, found [on YouTube](https://www.youtube.com/watch?v=yQjAF3frudY).
 
 Background image is stolen [from here](https://i.pinimg.com/originals/b2/2a/a2/b22aa22b2f3f55b6468361158d52e2e7.gif).

src/bootstrap.js

@@ -53,7 +53,7 @@ game.bootstrap = (() => {
     "wordWin", "wordYou", "water"
   ].map((x) => assets[x] = `assets/image/${x}.png`);
   [
-    "background-music", "death", "move", "win"
+    "music", "death", "move", "win"
   ].map((x) => assets[x] = `assets/sound/${x}.mp3`);
 
   const loadScripts = function(onDone) {

src/game.js

@@ -29,6 +29,10 @@ game.toggleRunning = () => {
 game.startLoop = () => {
   game.running = true;
   game.lastTimeStamp = performance.now();
+  game.assets.music.play();
+  if (game.assets.music.paused) {
+    alert("Failed to start background music; please allow autoplay in your browser settings.");
+  }
   requestAnimationFrame(game.loop);
 };
 
@@ -47,6 +51,8 @@ game.loadSystems = () => {
 };
 
 game.loadLevelIndex = (level) => {
+  game.win = false;  
+
   game.level = level;
   [game.entities, game.config] = game.loadLevel(game.levels[game.level]);
 
@@ -56,6 +62,11 @@ game.loadLevelIndex = (level) => {
 };
 
 game.initialize = () => {
+  game.assets.music.addEventListener('ended', function() {
+    this.currentTime = 0;
+    this.play();
+  }, false);
+
   game.loadLevelIndex(0);
   game.startLoop();
 };

src/systems/collision.js

@@ -11,6 +11,7 @@ game.system.Collision = (entitiesGrid) => {
               burnedParticleSpawner.addComponent(game.components.Appearance({width: game.canvas.width / game.config.xDim, height: game.canvas.height / game.config.yDim}));
               game.entities[burnedParticleSpawner.id] = burnedParticleSpawner;
               entity.removeComponent("alive");
+              game.assets.death.play();
               break;
             } else if (entity.hasComponent("sinkable") && collided.hasComponent("sink")) {
               const sunkParticleSpawner = game.createBorderParticles({colors: ["#16f7c9", "#0d6e5a", "#2fa18a", "#48cfb4", "#58877d", "#178054", "#2cdb92"]});
@@ -19,6 +20,7 @@ game.system.Collision = (entitiesGrid) => {
               game.entities[sunkParticleSpawner.id] = sunkParticleSpawner;
               entity.removeComponent("alive");
               collided.removeComponent("alive");
+              game.assets.death.play();
               break;
             }
           }
@@ -27,6 +29,8 @@ game.system.Collision = (entitiesGrid) => {
       if (entity.hasComponent("controllable") && entity.hasComponent("gridPosition")) {
         for (let collided of entitiesGrid[entity.components.gridPosition.y][entity.components.gridPosition.x].values()) {
           if (collided.hasComponent("win")) {
+            game.assets.win.play();
+            game.win = true;
             game.systems.menu.bringUpMenu();
             game.systems.menu.setState("levelSelect");
           }
@@ -70,6 +74,7 @@ game.system.Collision = (entitiesGrid) => {
           if (wall) {
             entity.removeComponent("momentum");
           } else {
+            game.assets.move.play();
             entitiesToPush.map((e) => {
               const pushedParticleSpawner = game.createBorderParticles({maxSpeed: 0.1, minAmount: 10, maxAmount: 15});
               pushedParticleSpawner.addComponent(game.components.Position(e.components.position));

src/systems/logic.js

@@ -1,7 +1,10 @@
 game.system.Logic = (entitiesGrid) => {
   "use strict";
   let currentVerbRules = [];
-  let previousControllableIds = new Set();
+  let previousVerbState = {
+    controllable: new Set(),
+    win: new Set(),
+  };
   const isWord = (entity) => entity.hasComponent("gridPosition") && (entity.hasComponent("verb") || entity.hasComponent("noun"));
   
   const getFirstWordEntity = (gridPosition) => {
@@ -50,25 +53,35 @@ game.system.Logic = (entitiesGrid) => {
             if (component) {
               if (direction == "apply") {              
                 if (verb == "you") {
-                  if (!previousControllableIds.has(id)) {
+                  if (!previousVerbState.controllable.has(id)) {
                     const newYouParticleSpawner = game.createBorderParticles({colors: ["#ffc0cb", "#ffb6c1", "#ffc1cc", "#ffbcd9", "#ff1493"], minAmount: 80, maxAmount: 150, maxSpeed: 0.5});
                     newYouParticleSpawner.addComponent(game.components.Position(entity.components.position));
                     newYouParticleSpawner.addComponent(game.components.Appearance({width: game.canvas.width / game.config.xDim, height: game.canvas.height / game.config.yDim}));
                     game.entities[newYouParticleSpawner.id] = newYouParticleSpawner;
                   }
                 }
+                if (verb == "win") {
+                  if (!previousVerbState.win.has(id)) {
+                    game.assets.win.play();
+                  }
+                }
                 entity.addComponent(component);
               } else if (direction == "deapply") {
                 if (entity.hasComponent("controllable")) {
-                  previousControllableIds.add(id);
+                  previousVerbState.controllable.add(id);
+                }
+                if (entity.hasComponent("win")) {
+                  previousVerbState.win.add(id);
                 }
                 entity.removeComponent(component.name);
               }
             }
           }
         }
-        if (direction == "apply" && changedEntityIds.some((id) => previousControllableIds.has(id))) {
-          previousControllableIds = new Set();
+        if (direction == "apply") {
+          if (changedEntityIds.some((id) => previousVerbState.controllable.has(id))) {
+            previousVerbState.controllable = new Set();
+          }
         }
       }
       if (application.hasComponent("noun")) {

src/systems/menu.js

@@ -16,6 +16,7 @@ game.system.Menu = () => {
 
   const bringUpMenu = () => {
     game.running = false;
+    game.assets.music.pause();
     window.addEventListener("keydown", escapeEventListener);
     setState("main");
   };
@@ -82,6 +83,10 @@ game.system.Menu = () => {
             <br>
             Background is from <a href="https://i.pinimg.com/originals/b2/2a/a2/b22aa22b2f3f55b6468361158d52e2e7.gif">PinImg</a>.
             <br>
+            Music is <a href="https://www.youtube.com/watch?v=yQjAF3frudY">Fluffing A Duck</a> by Kevin MacLeod.
+            <br>
+            Other sound effects generated on <a href="https://www.sfxr.me/">SFXR</a>.
+            <br>
             Developed by Logan Hunt, Ethan Payne
           </p>
         </div>
@@ -97,7 +102,9 @@ game.system.Menu = () => {
           }
       `;
     }
-    menuElement.innerHTML += "<div class='menu-button' onclick='game.systems.menu.hide()'>Resume Game</div>";
+    if (!game.win) {
+      menuElement.innerHTML += "<div class='menu-button' onclick='game.systems.menu.hide()'>Resume Game</div>";
+    }
     if (state !== "main") {
       menuElement.innerHTML += "<div class='menu-button' onclick='game.systems.menu.setState(\"main\")'>Back</div>";
     }