diff --git a/assets/css/wc/lander-vehicle.css b/assets/css/wc/lander-vehicle.css index 793b28b..84e3bd7 100644 --- a/assets/css/wc/lander-vehicle.css +++ b/assets/css/wc/lander-vehicle.css @@ -1,16 +1,17 @@ lander-vehicle { + --lander-altitude: calc(var(--lander_position_y) * 1%); + --lander-scale: calc(1 - (var(--lander_position_y) / 100)); + display: block; position: absolute; - inset-block-end: calc(var(--lander_position_y) * 1%); + inset-block-end: var(--lander-altitude); inset-inline-start: calc(var(--lander_position_x) * 1%); inline-size: calc(5 * var(--unit_root)); block-size: calc(4 * var(--unit_root)); transform-origin: 50% 50%; - transition-property: transform, inset-block-end, inset-inline-start; - transition-duration: 0.05s; - transition-timing-function: linear; transform: - translate(-50%, -50%) + translateX(-50%) + scale(var(--lander-scale), var(--lander-scale)) rotate( calc(var(--lander_rotation) * 1deg) ); diff --git a/assets/mjs/model.mjs b/assets/mjs/model.mjs index 3ca6f5c..c6260b9 100644 --- a/assets/mjs/model.mjs +++ b/assets/mjs/model.mjs @@ -1,4 +1,11 @@ export const MODEL = { + altitude: { + name: 'Altitude', + initial: 10_000, + min: 0, + max: 11_0000, + affects: 'lander', + }, fuel: { name: 'Fuel', initial: 100, @@ -23,8 +30,15 @@ export const MODEL = { rotation: { name: 'Rotation', initial: 0, - min: -90, - max: 90, + min: 0, + max: 360, + affects: 'lander', + }, + rotational_speed: { + name: 'Rotational speed', + initial: 0, + min: -10, + max: 10, affects: 'lander', }, running: { @@ -37,8 +51,8 @@ export const MODEL = { speed: { name: 'Speed', initial: 0.1, - min: -5, - max: 5, + min: -1, + max: 1, affects: 'lander', }, thruster: { @@ -110,26 +124,26 @@ export const INDICATORS = { export const KEYMAP = { 'ArrowUp': { affects: 'thruster', - change: 5, + change: 2, active: false, }, 'ArrowDown': { affects: 'thruster', - change: -5, + change: -2, active: false, }, 'ArrowLeft': { - affects: 'rotation', - change: -5, + affects: 'rotational_speed', + change: -0.1, active: false, }, 'ArrowRight': { - affects: 'rotation', - change: 5, + affects: 'rotational_speed', + change: 0.1, active: false, }, }; export const PARAMETERS = { - gravity: 0.1, + gravity: 0.25, } \ No newline at end of file diff --git a/assets/mjs/wc/game-engine.mjs b/assets/mjs/wc/game-engine.mjs index b857d18..2fcfe9d 100644 --- a/assets/mjs/wc/game-engine.mjs +++ b/assets/mjs/wc/game-engine.mjs @@ -11,11 +11,15 @@ export default class GameEngine extends GameElement { #gameRunning; #gameStarted; #gameEnded; - #gameEventFrequency = 50; // Milliseconds - #gameDuration = 0; // Counts the time elapsed based on multiples of `this.#gameEventFrequency` - #gameInterval; // Placeholder for window.setInterval so that it can be cleared later. + #timers = { + gameTimeStart: 0, + elapsedTime: 0, + currentTime: 0, + }; #keyMap = KEYMAP; #limitsExceeded = false; + #animationRef; + #landerElem; #gameRunningStateChanged = (runningState) => { this.#gameRunning = runningState; @@ -25,29 +29,29 @@ export default class GameEngine extends GameElement { this.#gameStarted = true; this.#gameRunningStateChanged(true); this.#addLanderKeyboardHandlers(); - this.#gameDuration = 0; - this.#gameInterval = window.setInterval(this.gameLoop, this.#gameEventFrequency); + this.#timers.gameTimeStart = performance.now(); + this.#animationRef = requestAnimationFrame(this.gameLoop); } #unpauseGame() { if (!this.#gameRunning) { this.#addLanderKeyboardHandlers(); this.#gameRunningStateChanged(true); - this.#gameInterval = window.setInterval(this.gameLoop, this.#gameEventFrequency); + this.#animationRef = requestAnimationFrame(this.gameLoop); } } #pauseGame() { this.#gameRunningStateChanged(false); this.#removeLanderKeyboardHandlers(); - window.clearInterval(this.#gameInterval); + cancelAnimationFrame(this.#animationRef); } #stopGame() { this.#gameEnded = true; - console.log('Game ended after duration', this.#gameDuration); + console.log('Game ended after duration', performance.now() - this.#timers.gameTimeStart); this.#removeLanderKeyboardHandlers(); - window.clearInterval(this.#gameInterval); + cancelAnimationFrame(this.#animationRef); } #addLanderKeyboardHandlers() { @@ -93,6 +97,7 @@ export default class GameEngine extends GameElement { let currentItem = INDICATORS[keyName]; this.modelIndicators[keyName] = currentItem.initial; }); + this.#landerElem = this.querySelector('lander-vehicle'); this.#updateCustomProperties(); this.#startGame(); } @@ -143,7 +148,7 @@ export default class GameEngine extends GameElement { handleGameStateKeyboardInupts(event) { let keyName = event.key; - + if (keyName == 'Enter') { if (this.#gameStarted && !this.#gameRunning) { this.#unpauseGame(); @@ -165,14 +170,21 @@ export default class GameEngine extends GameElement { } updateLanderPosition() { - let newSpeed = parseFloat(this.modelLander.speed) + PARAMETERS.gravity - parseFloat(this.modelLander.thruster * 0.005); - this.modelLander.speed = newSpeed.toFixed(1); - this.modelLander.position_y = (parseFloat(this.modelLander.position_y) - newSpeed).toFixed(1); + // let timeSinceLastPosition = this.#timers.elapsedTime; + + // let newSpeed = parseFloat(this.modelLander.speed) + PARAMETERS.gravity - parseFloat(this.modelLander.thruster * 0.005); + // this.modelLander.speed = newSpeed.toFixed(1); + + let newYPosition = parseFloat(this.modelLander.position_y - PARAMETERS.gravity + (this.modelLander.thruster * 0.005)).toFixed(2); + + // this.modelLander.thruster @ 50% = counters gravity @ 0.25 + this.modelLander.position_y = newYPosition; + // this.modelLander.rotation = this.modelLander.rotation + this.modelLander.rotational_speed; } gameLoop() { - // Increment game duration counter - this.#gameDuration = this.#gameDuration + this.#gameEventFrequency; + this.#timers.elapsedTime = performance.now() - this.#timers.currentTime; + this.#timers.currentTime = performance.now(); // Go through the batched inputs and change the lander's position Object.keys(this.#keyMap).forEach(keyName => { @@ -186,7 +198,12 @@ export default class GameEngine extends GameElement { this.checkLimits(); this.updateLanderPosition(); this.#updateCustomProperties(); - if (this.#limitsExceeded) this.#stopGame(); + + if (this.#limitsExceeded) { + this.#stopGame(); + } else { + this.#animationRef = requestAnimationFrame(this.gameLoop); + } } connectedCallback() {