diff --git a/public/entities/box.svg b/public/entities/box.svg
new file mode 100644
index 0000000..1237569
--- /dev/null
+++ b/public/entities/box.svg
@@ -0,0 +1,29 @@
+
diff --git a/public/entities/player-attacking.svg b/public/entities/player-attacking.svg
new file mode 100644
index 0000000..a088201
--- /dev/null
+++ b/public/entities/player-attacking.svg
@@ -0,0 +1,69 @@
+
diff --git a/public/entities/player-idle.svg b/public/entities/player-idle.svg
new file mode 100644
index 0000000..a857534
--- /dev/null
+++ b/public/entities/player-idle.svg
@@ -0,0 +1,69 @@
+
diff --git a/public/entities/rock.svg b/public/entities/rock.svg
new file mode 100644
index 0000000..fa489df
--- /dev/null
+++ b/public/entities/rock.svg
@@ -0,0 +1,21 @@
+
diff --git a/public/entities/zombie-idle.svg b/public/entities/zombie-idle.svg
new file mode 100644
index 0000000..b757918
--- /dev/null
+++ b/public/entities/zombie-idle.svg
@@ -0,0 +1,60 @@
+
diff --git a/public/entities/zombie-walking.svg b/public/entities/zombie-walking.svg
new file mode 100644
index 0000000..820bce1
--- /dev/null
+++ b/public/entities/zombie-walking.svg
@@ -0,0 +1,60 @@
+
diff --git a/renderer/index.ts b/renderer/index.ts
index 93961b0..db92c57 100644
--- a/renderer/index.ts
+++ b/renderer/index.ts
@@ -31,11 +31,11 @@ async function loadAssets() {
const [bg, box, player, rock, zombie, zombieHit] = await Promise.all([
loadImage("/map.webp"),
- loadImage("/entities/block.svg"),
- loadImage("/entities/player_alive_1.svg"),
- loadImage("/entities/rocks.svg"),
- loadImage("/entities/zombie_alive_1.svg"),
- loadImage("/entities/zombie_alive_2.svg"),
+ loadImage("/entities/box.svg"),
+ loadImage("/entities/player-attacking.svg"),
+ loadImage("/entities/rock.svg"),
+ loadImage("/entities/zombie-idle.svg"),
+ loadImage("/entities/zombie-walking.svg"),
]);
assets.loaded = true;
@@ -76,42 +76,6 @@ function getEntityImage(entity: Entity): HTMLImageElement | null {
}
}
-function getEntityOffset(entity: Entity): { x: number; y: number } {
- switch (entity.getType()) {
- case EntityType.Zombie: {
- if (entity.getHealth() === 1) {
- return { x: -2, y: 0 };
- } else {
- return { x: 14, y: 0 };
- }
- }
- default: {
- return { x: 0, y: 0 };
- }
- }
-}
-
-function getEntityRatio(entity: Entity): { width: number; height: number } {
- switch (entity.getType()) {
- case EntityType.Box: {
- return { width: 0.87, height: 1 }; // 41x47
- }
- case EntityType.Player: {
- return { width: 1, height: 1 }; // 64x64
- }
- case EntityType.Rock: {
- return { width: 1, height: 0.76 }; // 67x51
- }
- case EntityType.Zombie: {
- if (entity.getHealth() === 1) {
- return { width: 0.61, height: 1 }; // 40x65
- } else {
- return { width: 1, height: 1 }; // 64x64
- }
- }
- }
-}
-
export class Renderer {
private readonly assets: RendererAssets;
private readonly cellSize: number;
@@ -192,8 +156,6 @@ export class Renderer {
}
const entityPosition = entity.getPosition();
- const entityOffset = getEntityOffset(entity);
- const entityScale = getEntityRatio(entity);
this.ctx.globalAlpha =
entity.getType() === EntityType.Zombie && entity.getHealth() === 1
@@ -202,14 +164,10 @@ export class Renderer {
this.ctx.drawImage(
entityImage,
- entityPosition.x * this.cellSize +
- ((1 - entityScale.width) / 2) * this.cellSize +
- entityOffset.x,
- entityPosition.y * this.cellSize +
- ((1 - entityScale.height) / 2) * this.cellSize +
- entityOffset.y,
- this.cellSize * entityScale.width,
- this.cellSize * entityScale.height,
+ entityPosition.x * this.cellSize,
+ entityPosition.y * this.cellSize,
+ this.cellSize,
+ this.cellSize,
);
this.ctx.globalAlpha = 1;