feat(#15): separate sprite from player

index.js

@@ -5,8 +5,9 @@ import {
   FpsCounter,
   GameObject,
   MapManagement,
+  Player,
+  SpriteSheet,
 } from "./modules/game-objects/index.js";
-import { Player, SpriteSheet } from "./modules/game-objects/player.js";
 
 const backgroundMaps = [
   {

modules/game-objects/animation.js

@@ -0,0 +1,7 @@
+export class Animation extends GameObject {
+  constructor({ frames = [], name, x = 0, y = 0 }) {
+    super({ x, y });
+    this.frames = frames;
+    this.name = name;
+  }
+}

modules/game-objects/index.js

@@ -4,3 +4,6 @@ export { FpsCounter } from "./fps-counter.js";
 export { GameObject } from "./game-object.js";
 export { MapManagement } from "./map-management.js";
 export { Map } from "./map.js";
+export { Player } from "./player.js";
+export { Sprite } from "./sprite.js";
+export { SpriteSheet } from "./sprite-sheet.js";

modules/game-objects/player.js

@@ -1,89 +1,6 @@
 import { TILE_SIZE } from "../constants.js";
 import { GameObject } from "./game-object.js";
 
-export class Animation extends GameObject {
-  constructor({ frames = [], name, x = 0, y = 0 }) {
-    super({ x, y });
-    this.frames = frames;
-    this.name = name;
-  }
-}
-
-export class Sprite extends GameObject {
-  constructor({ image, x = 0, y = 0, width = 0, height = 0, index = 0 }) {
-    super({ x, y, height, width });
-    this.index = index;
-    this.image = image;
-    this.imageWidth = this.image.width;
-    this.imageHeight = this.image.height;
-  }
-
-  render(ctx, destinationX, destinationY) {
-    ctx.drawImage(
-      this.image,
-      this.x,
-      this.y,
-      this.width,
-      this.height,
-      destinationX,
-      destinationY,
-      this.width,
-      this.height
-    );
-    if (this.debug) {
-      ctx.fillStyle = "Red";
-      ctx.font = "normal 8pt Pixelify Sans";
-      ctx.fillText(this.index, destinationX, destinationY + 8);
-    }
-  }
-}
-
-export class SpriteSheet extends GameObject {
-  constructor({
-    imageId,
-    x = 0,
-    y = 0,
-    tileWidth = TILE_SIZE,
-    tileHeight = TILE_SIZE,
-    offsetX = 0,
-    offsetY = 0,
-  }) {
-    super({ x, y });
-    this.image = document.getElementById(imageId);
-    this.imageWidth = this.image.width;
-    this.imageHeight = this.image.height;
-    this.tileWidth = tileWidth;
-    this.tileHeight = tileHeight;
-    this.offsetX = offsetX;
-    this.offsetY = offsetY;
-  }
-
-  get sprites() {
-    if (this.gameObjects?.length) {
-      return this.gameObjects;
-    }
-    const sprites = [];
-    let index = 0;
-    for (let row = 0; row < this.imageHeight; row += this.tileHeight) {
-      for (let col = 0; col < this.imageWidth; col += this.tileWidth) {
-        sprites.push(
-          new Sprite({
-            image: this.image,
-            index,
-            x: col + this.offsetX,
-            y: row + this.offsetY,
-            width: this.tileWidth,
-            height: this.tileHeight,
-          })
-        );
-        index++;
-      }
-    }
-
-    return (this.gameObjects = sprites);
-  }
-}
-
 export class Player extends GameObject {
   constructor({
     gameObjects = [],

modules/game-objects/sprite-sheet.js

@@ -0,0 +1,49 @@
+import { TILE_SIZE } from "../constants.js";
+import { GameObject } from "./game-object.js";
+import { Sprite } from "./sprite.js";
+
+export class SpriteSheet extends GameObject {
+  constructor({
+    imageId,
+    x = 0,
+    y = 0,
+    tileWidth = TILE_SIZE,
+    tileHeight = TILE_SIZE,
+    offsetX = 0,
+    offsetY = 0,
+  }) {
+    super({ x, y });
+    this.image = document.getElementById(imageId);
+    this.imageWidth = this.image.width;
+    this.imageHeight = this.image.height;
+    this.tileWidth = tileWidth;
+    this.tileHeight = tileHeight;
+    this.offsetX = offsetX;
+    this.offsetY = offsetY;
+  }
+
+  get sprites() {
+    if (this.gameObjects?.length) {
+      return this.gameObjects;
+    }
+    const sprites = [];
+    let index = 0;
+    for (let row = 0; row < this.imageHeight; row += this.tileHeight) {
+      for (let col = 0; col < this.imageWidth; col += this.tileWidth) {
+        sprites.push(
+          new Sprite({
+            image: this.image,
+            index,
+            x: col + this.offsetX,
+            y: row + this.offsetY,
+            width: this.tileWidth,
+            height: this.tileHeight,
+          })
+        );
+        index++;
+      }
+    }
+
+    return (this.gameObjects = sprites);
+  }
+}

modules/game-objects/sprite.js

@@ -0,0 +1,30 @@
+import { GameObject } from "./game-object.js";
+
+export class Sprite extends GameObject {
+  constructor({ image, x = 0, y = 0, width = 0, height = 0, index = 0 }) {
+    super({ x, y, height, width });
+    this.index = index;
+    this.image = image;
+    this.imageWidth = this.image.width;
+    this.imageHeight = this.image.height;
+  }
+
+  render(ctx, destinationX, destinationY) {
+    ctx.drawImage(
+      this.image,
+      this.x,
+      this.y,
+      this.width,
+      this.height,
+      destinationX,
+      destinationY,
+      this.width,
+      this.height
+    );
+    if (this.debug) {
+      ctx.fillStyle = "Red";
+      ctx.font = "normal 8pt Pixelify Sans";
+      ctx.fillText(this.index, destinationX, destinationY + 8);
+    }
+  }
+}