From 495a90aaec30db3f942e8b937d2dd2bada0f421f Mon Sep 17 00:00:00 2001 From: Shaun O'Connell Date: Sat, 17 Feb 2024 17:19:04 +1300 Subject: [PATCH] Add an SVG background as the lander --- assets/css/wc/lander-vehicle.css | 7 ++-- assets/css/wc/vehicle-booster.css | 2 +- assets/img/lander.svg | 18 ++++++++++ assets/img/rocket.svg | 60 +++++++++++++++++++++++++++++++ assets/mjs/wc/game-engine.mjs | 7 +--- 5 files changed, 85 insertions(+), 9 deletions(-) create mode 100644 assets/img/lander.svg create mode 100644 assets/img/rocket.svg diff --git a/assets/css/wc/lander-vehicle.css b/assets/css/wc/lander-vehicle.css index 01e6d4c..6e8a330 100644 --- a/assets/css/wc/lander-vehicle.css +++ b/assets/css/wc/lander-vehicle.css @@ -3,9 +3,12 @@ lander-vehicle { position: absolute; inset-block-start: calc(var(--lander_position_y) * 1%); inset-inline-start: calc(var(--lander_position_x) * 1%); - inline-size: calc(5 * var(--unit_root)); + inline-size: calc(2.5 * var(--unit_root)); block-size: calc(5 * var(--unit_root)); - background-color: gold; + background-size: contain; + background-image: url('../../img/lander.svg'); + background-position: 50% 50%; + background-repeat: no-repeat; transform-origin: 50% 50%; transition-property: transform; transition-duration: 1s; diff --git a/assets/css/wc/vehicle-booster.css b/assets/css/wc/vehicle-booster.css index d80f3ee..21e0385 100644 --- a/assets/css/wc/vehicle-booster.css +++ b/assets/css/wc/vehicle-booster.css @@ -25,7 +25,7 @@ vehicle-booster { inset-block-start: 99%; inset-inline-start: 50%; block-size: calc(var(--booster_length) * var(--unit_root)); - inline-size: var(--unit_root); + inline-size: calc(var(--unit_root) / 2); transform: var(--booster_default_translate) var(--booster_scale_default); transform-origin: 50% 0%; background-color: red; diff --git a/assets/img/lander.svg b/assets/img/lander.svg new file mode 100644 index 0000000..095ab42 --- /dev/null +++ b/assets/img/lander.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/img/rocket.svg b/assets/img/rocket.svg new file mode 100644 index 0000000..c3ea6e3 --- /dev/null +++ b/assets/img/rocket.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/mjs/wc/game-engine.mjs b/assets/mjs/wc/game-engine.mjs index 4110eb6..2d63674 100644 --- a/assets/mjs/wc/game-engine.mjs +++ b/assets/mjs/wc/game-engine.mjs @@ -36,10 +36,6 @@ export default class GameEngine extends GameElement { #gameLoop = function () { this.#gameDuration++; - - // if (this.#gameDuration > 1_000) { - // this.stopGame(); - // } } startGame() { @@ -61,7 +57,7 @@ export default class GameEngine extends GameElement { stopGame() { this.#gameEnded = true; - console.log('game ended after duration', this.#gameDuration); + console.log('Game ended after duration', this.#gameDuration); document.removeEventListener('keyup', this.handleKeyboardInterrupts); window.clearInterval(this.#gameInterval); } @@ -72,7 +68,6 @@ export default class GameEngine extends GameElement { } handleKeyboardInterrupts(event) { - console.log('event.key', event.key); switch (event.key) { case 'Enter': if (this.#gameStarted && !this.#gameRunning) {