Add zombie death visuals to renderer

webdevcody · Oct 27, 2024 · a3d442a · a3d442a
1 parent dd5060a
commit a3d442a
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 18 deletions.
diff --git a/renderer/Assets.ts b/renderer/Assets.ts
@@ -6,6 +6,7 @@ export interface RendererAssets {
   player: HTMLImageElement | null;
   rock: HTMLImageElement | null;
   zombie: HTMLImageElement | null;
+  zombieDead: HTMLImageElement | null;
   zombieWalking: HTMLImageElement | null;
 }
 
@@ -17,6 +18,7 @@ export const assets: RendererAssets = {
   player: null,
   rock: null,
   zombie: null,
+  zombieDead: null,
   zombieWalking: null,
 };
 
@@ -27,22 +29,25 @@ export async function loadAssets() {
 
   assets.loading = true;
 
-  const [bg, box, player, rock, zombie, zombieHit] = await Promise.all([
-    loadAssetImage("/map.webp"),
-    loadAssetImage("/entities/box.svg"),
-    loadAssetImage("/entities/player-attacking.svg"),
-    loadAssetImage("/entities/rock.svg"),
-    loadAssetImage("/entities/zombie-idle.svg"),
-    loadAssetImage("/entities/zombie-walking.svg"),
-  ]);
+  const [bg, box, player, rock, zombie, zombieDead, zombieWalking] =
+    await Promise.all([
+      loadAssetImage("/map.webp"),
+      loadAssetImage("/entities/box.svg"),
+      loadAssetImage("/entities/player-attacking.svg"),
+      loadAssetImage("/entities/rock.svg"),
+      loadAssetImage("/entities/zombie-idle.svg"),
+      loadAssetImage("/entities/zombie-dead.svg"),
+      loadAssetImage("/entities/zombie-walking.svg"),
+    ]);
 
   assets.loaded = true;
   assets.bg = bg;
   assets.box = box;
   assets.player = player;
   assets.rock = rock;
   assets.zombie = zombie;
-  assets.zombieWalking = zombieHit;
+  assets.zombieDead = zombieDead;
+  assets.zombieWalking = zombieWalking;
 }
 
 export async function loadAssetImage(src: string): Promise<HTMLImageElement> {

diff --git a/renderer/Renderer.ts b/renderer/Renderer.ts
@@ -134,7 +134,9 @@ export class Renderer {
         return assets.rock;
       }
       case EntityType.Zombie: {
-        if (entity.hasChange(ChangeType.Walking)) {
+        if (entity.hasChange(ChangeType.Killed)) {
+          return assets.zombieDead;
+        } else if (entity.hasChange(ChangeType.Walking)) {
           return assets.zombieWalking;
         } else {
           return assets.zombie;
@@ -191,7 +193,7 @@ export class Renderer {
   private registerEntity(entity: Entity) {
     const entityImage = this.getEntityImage(entity);
 
-    if (entityImage === null || entity.dead()) {
+    if (entityImage === null || (entity.dead() && !entity.hasChanges())) {
       return;
     }
 

diff --git a/simulators/zombie-survival/Entity.ts b/simulators/zombie-survival/Entity.ts
@@ -80,6 +80,10 @@ export class Entity {
     return this.changes.some((change) => change.type === type);
   }
 
+  public hasChanges(): boolean {
+    return this.changes.length !== 0;
+  }
+
   public hit() {
     if (!this.destructible) {
       return;

diff --git a/simulators/zombie-survival/ZombieSurvival.ts b/simulators/zombie-survival/ZombieSurvival.ts
@@ -199,19 +199,19 @@ export class ZombieSurvival {
     this.player.clearChanges();
     this.player.shoot();
 
-    for (let i = 0; i < this.zombies.length; i++) {
+    for (let i = 0; i < this.zombies.length && !this.player.dead(); i++) {
       const zombie = this.zombies[i];
-
-      if (this.player.dead()) {
-        break;
-      }
-
       const initialPosition = zombie.getPosition();
+      const initialZombieHealth = initialHealth[i];
 
       zombie.clearChanges();
       zombie.walk();
 
-      if (initialHealth[i] !== zombie.getHealth()) {
+      if (initialZombieHealth !== 0 && zombie.getHealth() === 0) {
+        zombie.addChange({ type: ChangeType.Killed });
+      }
+
+      if (initialZombieHealth !== zombie.getHealth()) {
         zombie.addChange({ type: ChangeType.Hit });
       }