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

This commit is contained in:
Logan Hunt 2022-04-19 16:51:15 -06:00
parent 58ceff7949
commit 20b7944602
Signed by untrusted user who does not match committer: simponic
GPG Key ID: 52B3774857EB24B1
9 changed files with 44 additions and 8 deletions

BIN
.DS_Store vendored

Binary file not shown.

View File

@ -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). 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). Background image is stolen [from here](https://i.pinimg.com/originals/b2/2a/a2/b22aa22b2f3f55b6468361158d52e2e7.gif).

BIN
assets/.DS_Store vendored

Binary file not shown.

BIN
assets/sound/music.mp3 Normal file

Binary file not shown.

2
src/bootstrap.js vendored
View File

@ -53,7 +53,7 @@ game.bootstrap = (() => {
"wordWin", "wordYou", "water" "wordWin", "wordYou", "water"
].map((x) => assets[x] = `assets/image/${x}.png`); ].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`); ].map((x) => assets[x] = `assets/sound/${x}.mp3`);
const loadScripts = function(onDone) { const loadScripts = function(onDone) {

View File

@ -29,6 +29,10 @@ game.toggleRunning = () => {
game.startLoop = () => { game.startLoop = () => {
game.running = true; game.running = true;
game.lastTimeStamp = performance.now(); 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); requestAnimationFrame(game.loop);
}; };
@ -47,6 +51,8 @@ game.loadSystems = () => {
}; };
game.loadLevelIndex = (level) => { game.loadLevelIndex = (level) => {
game.win = false;
game.level = level; game.level = level;
[game.entities, game.config] = game.loadLevel(game.levels[game.level]); [game.entities, game.config] = game.loadLevel(game.levels[game.level]);
@ -56,6 +62,11 @@ game.loadLevelIndex = (level) => {
}; };
game.initialize = () => { game.initialize = () => {
game.assets.music.addEventListener('ended', function() {
this.currentTime = 0;
this.play();
}, false);
game.loadLevelIndex(0); game.loadLevelIndex(0);
game.startLoop(); game.startLoop();
}; };

View File

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

View File

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

View File

@ -16,6 +16,7 @@ game.system.Menu = () => {
const bringUpMenu = () => { const bringUpMenu = () => {
game.running = false; game.running = false;
game.assets.music.pause();
window.addEventListener("keydown", escapeEventListener); window.addEventListener("keydown", escapeEventListener);
setState("main"); setState("main");
}; };
@ -82,6 +83,10 @@ game.system.Menu = () => {
<br> <br>
Background is from <a href="https://i.pinimg.com/originals/b2/2a/a2/b22aa22b2f3f55b6468361158d52e2e7.gif">PinImg</a>. Background is from <a href="https://i.pinimg.com/originals/b2/2a/a2/b22aa22b2f3f55b6468361158d52e2e7.gif">PinImg</a>.
<br> <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 Developed by Logan Hunt, Ethan Payne
</p> </p>
</div> </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") { if (state !== "main") {
menuElement.innerHTML += "<div class='menu-button' onclick='game.systems.menu.setState(\"main\")'>Back</div>"; menuElement.innerHTML += "<div class='menu-button' onclick='game.systems.menu.setState(\"main\")'>Back</div>";
} }