Add gameover screen

Scenes/GameOver.js

@@ -0,0 +1,127 @@
+import { KEYS, STYLES } from "../config.js";
+import Player from "../Sprites/Player.js";
+import TextButton from "../Sprites/TextButton.js";
+
+export default class GameOverScene extends Phaser.Scene {
+  #soundBtnSelect;
+  #soundBtnClick;
+  #soundErr;
+
+  constructor() {
+    super({
+      key: KEYS.SCENE.GAME_OVER
+    })
+
+    this.#soundBtnSelect;
+    this.#soundBtnClick;
+    this.#soundErr;
+  }
+
+  init(data) {
+    const currentTime = data.time;
+
+    const minutes = ("0" + Math.floor(currentTime / 60)).slice(-2);
+    const seconds = ("0" + currentTime % 60).slice(-2);
+
+    this.time = `${minutes}:${seconds}`;
+  }
+
+  create() {
+    console.log(`[${KEYS.SCENE.GAME_OVER}:init] Invoked`);
+
+    /*
+      For FX transition, a coloured background is needed
+      to prevent visual gaps during scene transition.
+    */
+    this.add.rectangle(0, 0, this.game.config.width, this.game.config.height, 0x1F0E1C).setOrigin(0);
+
+    this.#sound();
+    this.#art();
+    this.#fullscreenHandler();
+    this.#sideBanner();
+    this.#text();
+  }
+
+  #sound() {
+    this.#soundBtnSelect = this.sound.add(KEYS.SOUND.BTN.SELECT);
+    this.#soundBtnClick = this.sound.add(KEYS.SOUND.BTN.CLICK);
+    this.#soundErr = this.sound.add(KEYS.SOUND.ERR);
+  }
+
+  #art() {
+    const art = this.add.image(
+      this.game.config.width,
+      this.game.config.height,
+      KEYS.MENU.ART
+    );
+
+    art.setOrigin(1);
+    art.setScale(1.5);
+
+    const bg = this.add.image(0, 0, KEYS.MENU.BG);
+    bg.setOrigin(0);
+    bg.setAlpha(.1);
+  }
+
+  #fullscreenHandler() {
+    const btn = this.add.image(
+      this.game.config.width - 48,
+      48,
+      KEYS.MENU.BTN.FULLSCREEN
+    );
+
+    btn.setInteractive();
+
+    btn.on("pointerdown", () => {
+      if (!document.fullscreenElement) {
+        document.documentElement.requestFullscreen();
+        btn.setTexture(KEYS.MENU.BTN.EXIT_FULLSCREEN);
+      } else {
+        document.exitFullscreen();
+        btn.setTexture(KEYS.MENU.BTN.FULLSCREEN);
+      }
+    });
+
+    btn.on("pointerover", () => btn.setScale(1.1));
+    btn.on("pointerout", () => btn.setScale(1));
+  }
+
+  #sideBanner() {
+    const sideBanner = this.add.rectangle(0, 0, this.game.config.width * .1, this.game.config.height, 0x6F0F00)
+    sideBanner.setOrigin(0);
+
+    const shield = this.add.image(sideBanner.width, 50, KEYS.MENU.SHIELD);
+    shield.setOrigin(.5, 0);
+
+    shield.postFX.addShine(.5, .5, 5);
+
+    new Player(
+      this,
+      192 + (sideBanner.width / 4),
+      this.game.config.height
+    );
+  }
+
+  #text() {
+    const title = this.add.text(
+      (this.game.config.width * .1) * 1.5,
+      this.game.config.height * .28,
+      "GAME OVER",
+      STYLES.TEXT.TITLE
+    );
+
+    title.setOrigin(0);
+
+    const timeElapsed = this.add.text(
+      title.x, title.y * 1.5,
+      `Time Elapsed: ${this.time}`,
+      {...STYLES.TEXT.SMALL, wordWrap: { width: 340 }, lineSpacing: 18}
+    );
+
+    // exitGame Button
+    new TextButton(this, timeElapsed.x, timeElapsed.y * 1.2, "Exit Game", () => {
+      this.scene.stop(KEYS.SCENE.GAME);
+      this.scene.start(KEYS.SCENE.MENU);
+    });
+  }
+}

config.js

@@ -5,6 +5,7 @@ const KEYS = Object.freeze({
     DIFFICULTY_SELECTOR: "SCENE_DIFFICULTY_SELECTOR",
     GAME: "SCENE_GAME",
     PAUSE: "SCENE_PAUSE",
+    GAME_OVER: "SCENE_GAME_OVER",
   }),
   MENU: Object.freeze({
     BG: "MENU_BG",
@@ -22,15 +23,26 @@ const KEYS = Object.freeze({
     GROUND_TILES: "GAME_GROUND_TILES",
     BTN: Object.freeze({
       PAUSE: "GAME_BTN_PAUSE"
-    })
+    }),
+    UI: Object.freeze({
+      HEART: "GAME_UI_HEART"
+    }),
+    MAGIC: "GAME_MAGIC"
   }),
   CHARACTERS: Object.freeze({
-    OLD_MAN: "OLD_MAN"
+    OLD_MAN: "OLD_MAN",
+    HOWLER: "HOWLER"
   }),
   SOUND: Object.freeze({
     BATTLE: "SOUND_BATTLE",
     NOMOREMAGIC: "SOUND_NO_MORE_MAGIC",
     RISING: "SOUND_RISING",
+    FOOTSTEP: "SOUND_FOOTSTEP",
+    MAGIC_SPARKLE: "SOUND_MAGIC_SPARKLE",
+    HOWLER: Object.freeze({
+      HURT: "SOUND_HOWLER_HURT",
+      ATTACK: "SOUND_HOWLER_ATTACK"
+    }),
     BTN: Object.freeze({
       SELECT: "SOUND_BTN_SELECT",
       CLICK: "SOUND_BTN_CLICK"
@@ -45,6 +57,18 @@ const KEYS = Object.freeze({
       HURT: "OLD_MAN_HURT",
       IDLE: "OLD_MAN_IDLE",
       WALK: "OLD_MAN_WALK"
+    }),
+    HOWLER: Object.freeze({
+      STILL: "HOWLER_STILL",
+      ATTACK: "HOWLER_ATTACK",
+      DEATH: "HOWLER_DEATH",
+      HURT: "HOWLER_HURT",
+      IDLE: "HOWLER_IDLE",
+      WALK: "HOWLER_WALK",
+      RUN_ATTACK: "HOWLER_RUN_AND_ATTACK"
+    }),
+    MAGIC: Object.freeze({
+      SHOOT: "MAGIC_SHOOT"
     })
   })
 });
@@ -67,6 +91,9 @@ const IMAGES = Object.freeze({
     }),
     BTN: Object.freeze({
       PAUSE: "./assets/game/pause.png"
+    }),
+    UI: Object.freeze({
+      HEART: "./assets/game/heart.png"
     })
   })
 });
@@ -75,6 +102,12 @@ const SOUND = Object.freeze({
   BATTLE: "./assets/sound/battleTheme.mp3",
   NOMOREMAGIC: "./assets/sound/noMoreMagic.mp3",
   RISING: "./assets/sound/rising.mp3",
+  FOOTSTEP: "./assets/sound/footstep_grass.wav",
+  MAGIC_SPARKLE: "./assets/sound/magic_sparkle.wav",
+  HOWLER: Object.freeze({
+    HURT: "./assets/sound/howler_hurt.mp3",
+    ATTACK: "./assets/sound/howler_attack.mp3"
+  }),
   BTN: Object.freeze({
     SELECT: "./assets/sound/select_001.ogg",
     CLICK: "./assets/sound/click_002.ogg"
@@ -87,11 +120,19 @@ const SPRITE_SHEETS = Object.freeze({
     OLD_MAN: Object.freeze({
       PNG: "./assets/game/characters/OldMan.png",
       JSON: "./assets/game/characters/OldMan.json"
-    })
+    }),
+    HOWLER: Object.freeze({
+      PNG: "./assets/game/characters/Howler.png",
+      JSON: "./assets/game/characters/Howler.json"
+    }),
   }),
   GROUND_OBJECTS: Object.freeze({
     PNG: "./assets/game/groundObjects/spritesheet.png",
     JSON: "./assets/game/groundObjects/spritesheet.json"
+  }),
+  MAGIC: Object.freeze({
+    PNG: "./assets/game/magic/spritesheet.png",
+    JSON: "./assets/game/magic/spritesheet.json"
   })
 });
 

main.js

@@ -3,14 +3,15 @@ import MenuScene from "./Scenes/Menu.js";
 import GameScene from "./Scenes/Game.js";
 import DifficultySelectorScene from "./Scenes/DifficultySelector.js";
 import PauseScene from "./Scenes/Pause.js";
+import GameOverScene from "./Scenes/GameOver.js";
 
 const config = {
   type: Phaser.AUTO,
   parent: "game",
   dom: {
     createContainer: true
   },
-  scene: [PreloadScene, MenuScene, DifficultySelectorScene, GameScene, PauseScene],
+  scene: [PreloadScene, MenuScene, DifficultySelectorScene, GameScene, PauseScene, GameOverScene],
   backgroundColor: "#1F0E1C",
   scale: {
     width: 1920,