From ea9d912e2f935a3fc302abcd9997c04a4096c2b4 Mon Sep 17 00:00:00 2001 From: Juan Sebastian Montoya Date: Fri, 20 Sep 2024 15:55:32 -0500 Subject: [PATCH] feat(#15): separate sprite from player --- index.js | 3 +- modules/game-objects/animation.js | 7 +++ modules/game-objects/index.js | 3 + modules/game-objects/player.js | 83 ---------------------------- modules/game-objects/sprite-sheet.js | 49 ++++++++++++++++ modules/game-objects/sprite.js | 30 ++++++++++ 6 files changed, 91 insertions(+), 84 deletions(-) create mode 100644 modules/game-objects/animation.js create mode 100644 modules/game-objects/sprite-sheet.js create mode 100644 modules/game-objects/sprite.js diff --git a/index.js b/index.js index 61fed36..f3776e6 100644 --- a/index.js +++ b/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 = [ { diff --git a/modules/game-objects/animation.js b/modules/game-objects/animation.js new file mode 100644 index 0000000..d9ac5f1 --- /dev/null +++ b/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; + } +} diff --git a/modules/game-objects/index.js b/modules/game-objects/index.js index fbeecb0..bae02d1 100644 --- a/modules/game-objects/index.js +++ b/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"; diff --git a/modules/game-objects/player.js b/modules/game-objects/player.js index 1d2c2d4..2af7011 100644 --- a/modules/game-objects/player.js +++ b/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 = [], diff --git a/modules/game-objects/sprite-sheet.js b/modules/game-objects/sprite-sheet.js new file mode 100644 index 0000000..747f847 --- /dev/null +++ b/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); + } +} diff --git a/modules/game-objects/sprite.js b/modules/game-objects/sprite.js new file mode 100644 index 0000000..06cd55a --- /dev/null +++ b/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); + } + } +}