Add hearts display for lives

Author: rjoken

public/assets/gfx/heart-dead.png

@@ -0,0 +1,47 @@
+import Phaser from "phaser";
+
+export class LivesDisplay {
+  private scene: Phaser.Scene;
+  private sprites: Phaser.GameObjects.Sprite[] = [];
+  private x: number;
+  private y: number;
+  private spacing: number;
+  private totalLives: number;
+  private livesRemaining: number;
+
+  constructor(
+    scene: Phaser.Scene,
+    x: number = 4,
+    y: number = 4,
+    spacing: number = 18,
+    totalLives: number = 3,
+    livesRemaining: number = 3
+  ) {
+    this.scene = scene;
+    this.x = x;
+    this.y = y;
+    this.spacing = spacing;
+    this.totalLives = totalLives;
+    this.livesRemaining = livesRemaining;
+
+    for (let i = 0; i < this.totalLives; i++) {
+      const heart = scene.add
+        .sprite(x + i * spacing, y, "heart", livesRemaining > i ? 0 : 1)
+        .setOrigin(0, 0)
+        .setScrollFactor(0)
+        .setDepth(1000);
+      this.sprites.push(heart);
+    }
+  }
+
+  updateLivesRemaining(lives: number) {
+    this.livesRemaining = lives;
+    for (let i = 0; i < this.sprites.length; i++) {
+      this.sprites[i].setFrame(i < this.livesRemaining ? 0 : 1);
+    }
+  }
+
+  destroy() {
+    this.sprites.forEach((s) => s.destroy());
+  }
+}

public/assets/gfx/heart.png

@@ -56,6 +56,12 @@ export class SpriteAssets {
         frameHeight: 16,
       });
     }
+    if (!scene.textures.exists("heart")) {
+      scene.load.spritesheet("heart", "./assets/gfx/heart.png", {
+        frameWidth: 16,
+        frameHeight: 16,
+      });
+    }
   }
 
   static createSprites(scene: Phaser.Scene): void {

src/game/LivesDisplay.ts

@@ -5,6 +5,7 @@ import { AnalogKey, AnalogReport } from "../../components/ConnectDevice";
 import { SpriteAssets } from "../createSpriteAssets";
 import { Obstacle } from "../Obstacle";
 import { InputBar } from "../InputBar";
+import { LivesDisplay } from "../LivesDisplay";
 
 export class GameScene extends Phaser.Scene {
   private player!: Player;
@@ -16,8 +17,6 @@ export class GameScene extends Phaser.Scene {
   private scoreText!: Phaser.GameObjects.Text;
   private scoreTimer!: Phaser.Time.TimerEvent;
 
-  private livesText!: Phaser.GameObjects.Text;
-
   private switchy!: Phaser.GameObjects.Sprite;
 
   private background!: Phaser.GameObjects.TileSprite;
@@ -34,6 +33,8 @@ export class GameScene extends Phaser.Scene {
   private analogL: number = 0;
   private analogR: number = 0;
 
+  private livesDisplay!: LivesDisplay;
+
   constructor() {
     super("GameScene");
   }
@@ -87,24 +88,13 @@ export class GameScene extends Phaser.Scene {
 
     document.fonts.load('24px "Monogram"').then(() => {
       this.scoreText = this.add
-        .text(8, 0, `SCORE: ${this.score}`, {
+        .text(4, 18, `SCORE: ${this.score}`, {
           fontFamily: "Monogram",
           fontSize: "16px",
           color: "#0f380f",
         })
         .setOrigin(0, 0)
         .setDepth(1000);
-
-      this.livesText = this.add.text(
-        8,
-        12,
-        `LIVES: ${this.player.getLives()}`,
-        {
-          fontFamily: "Monogram",
-          fontSize: "16px",
-          color: "#0f380f",
-        }
-      );
     });
 
     this.scoreTimer = this.time.addEvent({
@@ -129,6 +119,9 @@ export class GameScene extends Phaser.Scene {
 
     this.inputBar = new InputBar(this);
 
+    this.livesDisplay = new LivesDisplay(this);
+    this.livesDisplay.updateLivesRemaining(this.player.getLives());
+
     this.events.on("shutdown", this.cleanup, this);
   }
 
@@ -204,7 +197,7 @@ export class GameScene extends Phaser.Scene {
       );
     } else {
       this.player.depleteLives();
-      this.livesText.setText(`LIVES: ${this.player.getLives()}`);
+      this.livesDisplay.updateLivesRemaining(this.player.getLives());
       this.player.startInvincibility();
     }
   }
@@ -234,6 +227,10 @@ export class GameScene extends Phaser.Scene {
       this.inputBar.destroy();
     }
 
+    if (this.livesDisplay) {
+      this.livesDisplay.destroy();
+    }
+
     this.obstacles.forEach((o) => o.destroy());
     this.obstacles = [];
   }