From 2959c39da752ba19daedfca8ddde4daac39a9b0d Mon Sep 17 00:00:00 2001 From: asraelite Date: Wed, 7 Mar 2018 15:56:10 +0000 Subject: [PATCH] Add instructions --- js/assets.mjs | 3 ++- js/game/control.mjs | 8 +++++-- js/game/events.mjs | 12 ++++++++-- js/game/index.mjs | 7 +++++- js/graphics/gui.mjs | 29 ++++++++++++++++++++---- js/gui/element.mjs | 3 +-- js/gui/index.mjs | 10 ++++++--- js/gui/modules.mjs | 52 ++++++++++++++++++++++++++++++++++++++++++- js/world/particle.mjs | 6 ++--- js/world/ship.mjs | 10 +++++++-- 10 files changed, 119 insertions(+), 21 deletions(-) diff --git a/js/assets.mjs b/js/assets.mjs index 1e5672b..78d308d 100644 --- a/js/assets.mjs +++ b/js/assets.mjs @@ -42,7 +42,8 @@ export const audio = { engine: 'rocket2.ogg', music: 'music2.mp3', toss: 'thunk1.mp3', - crash: 'crash2.mp3' + crash: 'crash2.mp3', + pause: 'swoosh1.mp3' }; export async function init() { diff --git a/js/game/control.mjs b/js/game/control.mjs index 47fbc1b..685d8be 100644 --- a/js/game/control.mjs +++ b/js/game/control.mjs @@ -46,7 +46,7 @@ export function tick() { } function tickPlaying() { - if (held[mapping.thrust]) { + if (held[mapping.thrust] && playerShip.fuel !== 0) { playerShip.applyThrust({ forward: 1 }); let vol = Math.min(0.7, graphics.perspective.zoom / 10); audio.volume('engine', vol); @@ -55,7 +55,11 @@ function tickPlaying() { } if (pressed[mapping.thrust]) { - audio.start('engine'); + if (playerShip.fuel !== 0) { + audio.start('engine'); + } else { + audio.stop('engine'); + } } if (held[mapping.left]) { diff --git a/js/game/events.mjs b/js/game/events.mjs index 0b9d747..c10c5be 100644 --- a/js/game/events.mjs +++ b/js/game/events.mjs @@ -17,7 +17,7 @@ let landedPlanets = new Set(); export function playMusic() { audio.start('music'); - audio.volume('music', 0.8); + audio.volume('music', 0.4); } export function stopMusic() { @@ -45,6 +45,14 @@ export function startGame() { graphics.perspective.focusPlayer(); } +export function toMenu() { + game.changeView('menu'); +} + +export function togglePause() { + game.state.paused = !game.state.paused; +} + export function landShip(planet) { shipLanded = true; if (!landedPlanets.has(planet)) { @@ -54,7 +62,7 @@ export function landShip(planet) { } export function howToPlay() { - game.state.controls = true; + game.changeView('instructions'); } function newPlanet(planet) { diff --git a/js/game/index.mjs b/js/game/index.mjs index 853c2b4..14bb8a7 100644 --- a/js/game/index.mjs +++ b/js/game/index.mjs @@ -41,12 +41,17 @@ export function changeView(view) { state.view = view; gui.changeView(view); - if (view == 'game') { + if (view === 'game') { state.playing = true; state.editing = false; state.paused = false; world.init(); inventory.init(); + } else if (view === 'instructions') { + state.playing = false; + gui.changeView('instructions'); + } else if (view === 'menu') { + gui.changeView('menu'); } } diff --git a/js/graphics/gui.mjs b/js/graphics/gui.mjs index ec4c79a..44c83fc 100644 --- a/js/graphics/gui.mjs +++ b/js/graphics/gui.mjs @@ -22,8 +22,11 @@ function renderElement(element) { } function renderFrame(element) { - context.fillStyle = '#eb9'; + context.fillStyle = '#a3977c'; context.fillRect(...element.shape); + context.lineWidth = 3; + context.strokeStyle = '#6d634b' + context.strokeRect(...element.shape); } function renderImage(element) { @@ -53,15 +56,33 @@ function renderButton(element) { context.globalAlpha = 0.5; } - context.fillRect(...element.shape); + let [sx, sy, w, h] = element.shape; + let [ex, ey] = [sx + w, sy + h]; + let rad = 5; + + context.beginPath(); + context.moveTo(sx + rad, sy); + context.lineTo(ex - rad, sy); + context.quadraticCurveTo(ex, sy, ex, sy + rad); + context.lineTo(ex, ey - rad); + context.quadraticCurveTo(ex, ey, ex - rad, ey); + context.lineTo(sx + rad, ey); + context.quadraticCurveTo(sx, ey, sx, ey - rad); + context.lineTo(sx, sy + rad); + context.quadraticCurveTo(sx, sy, sx + rad, sy); + context.closePath(); + + context.fill(); context.strokeStyle = '#541'; - context.strokeWidth = 4; - context.strokeRect(...element.shape); + context.lineWidth = 2; + context.stroke(); + context.textAlign = 'center'; context.textBaseline = 'middle'; context.fillStyle = '#fff'; context.font = '12pt Consolas'; context.fillText(element.text, ...element.center); + context.globalAlpha = 1; } diff --git a/js/gui/element.mjs b/js/gui/element.mjs index a5c3829..56516f8 100644 --- a/js/gui/element.mjs +++ b/js/gui/element.mjs @@ -46,9 +46,8 @@ export default class GuiElement extends Rect { // - Albert Einstein posRelative({x = null, xc = 0, y = null, yc = 0, w = null, h = null}) { - if (x !== null) { + if (x !== null) this.x = (this.parent.w * x) - (this.w * xc) + this.parent.x; - } if (y !== null) this.y = (this.parent.h * y) - (this.h * yc) + this.parent.y; if (w !== null) diff --git a/js/gui/index.mjs b/js/gui/index.mjs index 6c52482..e71b5fb 100644 --- a/js/gui/index.mjs +++ b/js/gui/index.mjs @@ -7,7 +7,7 @@ export let root; export function init() { elements.clear(); root = modules.root(); - changeView('title'); + changeView('menu'); } export function tick() { @@ -17,13 +17,17 @@ export function tick() { export function changeView(view) { root.clear(); - if (view == 'title') { + if (view === 'menu') { root.append(modules.title()); } - if (view == 'game') { + if (view === 'game') { root.append(modules.game()); } + + if (view === 'instructions') { + root.append(modules.instructions()); + } } export function measureText(msg, font) { diff --git a/js/gui/modules.mjs b/js/gui/modules.mjs index 37ecc3b..5c09a50 100644 --- a/js/gui/modules.mjs +++ b/js/gui/modules.mjs @@ -47,6 +47,56 @@ export function title() { return shadow; } +const instructionText = `\ +Flight controls + +WAD: Movement +Shift + WAD: Fine movement +E: Open/close inventory +R: Toggle item markers +T: Toggle path prediction +P: Pause/unpause +M: Toggle music + + +Ship editing and inventory controls + +Left click: Select module in inventory +Right click: Toss away module in inventory +Left click: Place module on ship +Right click: Remove module from ship +Escape: Exit ship editing screen + + +Fly around collecting modules and fuel, and land to build your ship using \ +those collected modules. Get the highest score possible without crashing or \ +running out of fuel. +`; + +export function instructions() { + let shadow = root(); + + let frame = new GuiFrame(); + shadow.append(frame); + frame.posRelative({x: 0.1, y: 0.1, w: 0.8, h: 0.8}); + + let back = new GuiButton('Return to menu', events.toMenu, 0, 0, 200); + frame.append(back); + back.posRelative({ x: 0.5, xc: 0.5, y: 1 }); + back.y -= 60; + + let text = new GuiText(instructionText, 0, 0, 0, 0, { + size: 12, + align: 'left', + valign: 'top' + }); + frame.append(text); + text.posRelative({x: 0.05, y: 0.05, w: 0.9, h: 0.9}); + text.splitLines(); + + return shadow; +} + export function game() { let shadow = root(); @@ -137,7 +187,7 @@ export function game() { invShadow.append(inventory); inventory.posRelative({w: 1, h: 1}); - let moduleInfo = new GuiText('test\nline\n', 0, 0, 0, 0, { + let moduleInfo = new GuiText('', 0, 0, 0, 0, { size: 12, align: 'left', valign: 'top' diff --git a/js/world/particle.mjs b/js/world/particle.mjs index 40ebd55..5e28cd5 100644 --- a/js/world/particle.mjs +++ b/js/world/particle.mjs @@ -29,7 +29,7 @@ export function createEndEditBurst(ship) { export function createCrash(ship) { for (let i = 0; i < ship.mass + 3; i++) { - particles.add(new Particle(...ship.poc, { + particles.add(new Particle(...ship.com, { color: '#f2e860', lifetime: Math.random() * 50 + 40, size: Math.random() * 0.2 + 0.2, @@ -38,7 +38,7 @@ export function createCrash(ship) { })); } for (let i = 0; i < ship.mass + 3; i++) { - particles.add(new Particle(...ship.poc, { + particles.add(new Particle(...ship.com, { color: '#f75722', lifetime: Math.random() * 50 + 40, size: Math.random() * 0.2 + 0.2, @@ -47,7 +47,7 @@ export function createCrash(ship) { })); } for (let i = 0; i < ship.mass * 2 + 3; i++) { - particles.add(new Particle(...ship.poc, { + particles.add(new Particle(...ship.com, { color: '#888', lifetime: Math.random() * 30 + 55, size: Math.random() * 0.5 + 0.4, diff --git a/js/world/ship.mjs b/js/world/ship.mjs index ea593b7..5f410e7 100644 --- a/js/world/ship.mjs +++ b/js/world/ship.mjs @@ -161,6 +161,7 @@ export default class Ship extends Body { } moduleCollided(module) { + if (this.landed) return; let speed = Math.sqrt(this.xvel ** 2 + this.yvel ** 2); if (module.type !== 'thruster' || speed > consts.CRASH_SPEED) { events.crash(); @@ -202,13 +203,18 @@ export default class Ship extends Body { let thrustForce = -forward * consts.THRUST_POWER * this.thrust; let turnForce = (turnRight - turnLeft) * consts.TURN_POWER; + if (this.fuel <= 0) { + this.fuel = 0; + thrustForce = 0; + } else { + this.fuel -= Math.abs(thrustForce) * consts.FUEL_BURN_RATE; + } turnForce *= this.rotationPower; - this.fuel -= Math.abs(thrustForce) * consts.FUEL_BURN_RATE; this.applyDirectionalForce(0, thrustForce, turnForce); this.modules.forEach(m => { - if (m.type !== 'thruster') return; + if (m.type !== 'thruster' || thrustForce == 0) return; m.power += forward; });