diff --git a/index.html b/index.html index ee6d5d5..f33ed44 100644 --- a/index.html +++ b/index.html @@ -21,11 +21,24 @@ diff --git a/src/bootstrap.js b/src/bootstrap.js index 164a28b..f6997ae 100644 --- a/src/bootstrap.js +++ b/src/bootstrap.js @@ -34,7 +34,7 @@ game.bootstrap = (() => { { src: [ 'src/systems/render.js', 'src/systems/grid.js', 'src/systems/physics.js', 'src/systems/keyboardInput.js', - 'src/systems/collision.js', 'src/systems/undo.js', 'src/systems/particle.js' + 'src/systems/collision.js', 'src/systems/undo.js', 'src/systems/particle.js', 'src/systems/menu.js' ], id: 'systems' }, { src: ['src/game.js'], id: 'game' }, diff --git a/src/game.js b/src/game.js index 705d3e0..b48ef19 100644 --- a/src/game.js +++ b/src/game.js @@ -1,8 +1,10 @@ -let lastTimeStamp; game.loop = (timeStamp) => { - let elapsedTime = timeStamp - lastTimeStamp; - lastTimeStamp = timeStamp; + if (!game.running) { + return; + } + let elapsedTime = timeStamp - game.lastTimeStamp; + game.lastTimeStamp = timeStamp; const changedIds = new Set(); game.systemOrder.map((i) => { @@ -20,22 +22,39 @@ game.loop = (timeStamp) => { requestAnimationFrame(game.loop); } -game.initialize = () => { - [game.entities, game.config] = game.loadLevel(game.levels[4]); +game.toggleRunning = () => { + game.running = !game.running; +} - // Maintained by gridSystem as a side-effect - game.entitiesGrid = Array(game.config.yDim).fill(null).map(() => Array(game.config.xDim).fill(null).map(() => new Map())); - - game.systemOrder = ["gridSystem", "collisionSystem", "physics", "keyboardInput", "undo", "particle", "render"]; - game.systems = { }; - game.systems.physics = game.system.Physics(), - game.systems.gridSystem = game.system.Grid(game.entitiesGrid); - game.systems.collisionSystem = game.system.Collision(game.entitiesGrid); - game.systems.render = game.system.Render(game.graphics); - game.systems.undo = game.system.Undo(game.entitiesGrid); - game.systems.keyboardInput = game.system.KeyboardInput(game.systems.undo); - game.systems.particle = game.system.Particle(game.canvas.context); - - lastTimeStamp = performance.now() +game.startLoop = () => { + game.running = true; + game.lastTimeStamp = performance.now(); requestAnimationFrame(game.loop); } + +game.loadSystems = () => { + game.systemOrder = ["grid", "collision", "physics", "keyboardInput", "undo", "particle", "render"]; + game.systems = { }; + game.systems.physics = game.system.Physics(), + game.systems.grid = game.system.Grid(game.entitiesGrid); + game.systems.collision = game.system.Collision(game.entitiesGrid); + game.systems.render = game.system.Render(game.graphics); + game.systems.undo = game.system.Undo(game.entitiesGrid); + game.systems.particle = game.system.Particle(game.canvas.context); + game.systems.keyboardInput = game.system.KeyboardInput(); + game.systems.menu = game.system.Menu(); +} + +game.loadLevelIndex = (level) => { + game.level = level; + [game.entities, game.config] = game.loadLevel(game.levels[game.level]); + + // Maintained by grid system as a side-effect + game.entitiesGrid = Array(game.config.yDim).fill(null).map(() => Array(game.config.xDim).fill(null).map(() => new Map())); + game.loadSystems(); +} + +game.initialize = () => { + game.loadLevelIndex(0); + game.startLoop(); +} diff --git a/src/systems/grid.js b/src/systems/grid.js index 3e56ea9..6add388 100644 --- a/src/systems/grid.js +++ b/src/systems/grid.js @@ -26,7 +26,9 @@ game.system.Grid = (entitiesGrid) => { } })); changedIds.forEach(id => { - const entity = entities[id]; + // TODO: Figure out why we HAVE to use game.entities rather than entities + // Hint: it breaks when changing a level in the menu + const entity = game.entities[id]; const { x, y } = entity.components.gridPosition; entitiesGrid[y][x].set(entity.id, entity); }); diff --git a/src/systems/keyboardInput.js b/src/systems/keyboardInput.js index 80feeef..06a73c9 100644 --- a/src/systems/keyboardInput.js +++ b/src/systems/keyboardInput.js @@ -1,4 +1,4 @@ -game.system.KeyboardInput = (undoSystem) => { +game.system.KeyboardInput = () => { "use strict"; const keys = {}; const keyPress = (event) => { @@ -6,31 +6,41 @@ game.system.KeyboardInput = (undoSystem) => { keys[event.key] = true; } }; + const removeKey = (event) => { + delete keys[event.key]; + }; const update = (elapsedTime, entities, changedIds) => { for (let id in entities) { const entity = entities[id]; if (entity.hasComponent('controllable')) { const controls = entity.components.controllable.controls; if (!changedIds.has(entity.id)) { - if (controls.includes('left') && keys['ArrowLeft']) { + if (controls.includes('left') && keys[game.controls.left]) { entity.addComponent(game.components.Momentum({ dx: -1, dy: 0 })); - } else if (controls.includes('right') && keys['ArrowRight']) { + } else if (controls.includes('right') && keys[game.controls.right]) { entity.addComponent(game.components.Momentum({ dx: 1, dy: 0 })); - } else if (controls.includes('up') && keys['ArrowUp']) { + } else if (controls.includes('up') && keys[game.controls.up]) { entity.addComponent(game.components.Momentum({ dx: 0, dy: -1 })); - } else if (controls.includes('down') && keys['ArrowDown']) { + } else if (controls.includes('down') && keys[game.controls.down]) { entity.addComponent(game.components.Momentum({ dx: 0, dy: 1 })); } } } } - if (keys['z']) { - undoSystem.undo(entities); + if (keys[game.controls.undo]) { + game.systems.undo.undo(entities); + } + if (keys[game.controls.reset]) { + game.loadLevelIndex(game.level); + } + if (keys["Escape"]) { + game.systems.menu.bringUpMenu(); } Object.keys(keys).map((key) => delete keys[key]); return new Set(); }; window.addEventListener("keydown", keyPress); + window.addEventListener("keyup", removeKey); return { keys, update }; } diff --git a/src/systems/menu.js b/src/systems/menu.js new file mode 100644 index 0000000..17153d0 --- /dev/null +++ b/src/systems/menu.js @@ -0,0 +1,107 @@ +game.system.Menu = () => { + let state; + + const menuElement = document.getElementById("menu"); + + const escapeEventListener = (e) => { + if (e.key == "Escape") { + setState('main'); + } + } + + const setState = (newState) => { + state = newState; + draw(); + } + + const bringUpMenu = () => { + game.running = false; + window.addEventListener("keydown", escapeEventListener); + setState("main"); + } + + const hide = () => { + menuElement.style.display = "none"; + game.startLoop(); + } + + const listenFor = (action, elementId) => { + const element = document.getElementById(elementId); + element.innerHTML = "Listening..."; + const handleKey = (event) => { + window.removeEventListener("keydown", handleKey); + if (event.key == "Escape") { + element.innerHTML = menu.controls[action]; + return; + } + game.controls[action] = event.key; + localStorage.setItem("controls", JSON.stringify(game.controls)); + element.innerHTML = event.key; + } + window.addEventListener("keydown", handleKey); + } + + const setLevel = (index) => { + game.loadLevelIndex(index); + hide(); + } + + const draw = () => { + menuElement.style.display = "block"; + menuElement.innerHTML = `

Big Blue Is You

`; + if (state == "main") { + menuElement.innerHTML += ` + + + + `; + } + else if (state == "controls") { + menuElement.innerHTML += ` +
+

+ Move left: +
+ Move right: +
+ Move up: +
+ Move down: +
+ Undo: +
+ Reset: +

+
+ ` + } else if (state == "credits") { + menuElement.innerHTML += ` +
+

+ Sprites from Baba Is You, as hosted here, and a few custom ones. +
+ Background is from PinImg. +
+ Developed by Logan Hunt, Ethan Payne +

+
+ ` + } else if (state == "levelSelect") { + menuElement.innerHTML += ` +
+

Select a level to play:

+ ${ + game.levels.map((level, index) => { + return `` + }).join("") + } + `; + } + menuElement.innerHTML += "" + if (state !== "main") { + menuElement.innerHTML += "" + } + } + + return { bringUpMenu, setState, listenFor, hide, setLevel, state }; +} \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 500b365..9f0dc5c 100644 --- a/styles/style.css +++ b/styles/style.css @@ -46,13 +46,14 @@ body { .menu { text-align:center; + max-width: 400px; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position:absolute; - background-color: rgba(255,255,255,0.75); + background-color: rgba(200,200,255,0.90); border: 1px solid #fff; border-radius: 5px; padding: 12px; @@ -69,4 +70,4 @@ body { .menu-button:hover { background-color: #d0d0d0; -} +} \ No newline at end of file