jusemon/game-engine
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(#8): improve debug

Browse source
This commit is contained in:
Juan Sebastián Montoya 2024-09-14 18:38:50 -05:00
parent 4e2905cf96
commit 731a32303a
8 changed files with 84 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

50
modules/game-objects/map.js
View file

@ -3,39 +3,56 @@ import { createCanvas } from "../utils.js";
import { GameObject } from "./game-object.js";
export class Map extends GameObject {
constructor({ name, imageId, elementId, selected = false }) {
super();
constructor({ name, imageId, elementId, selected = false, debug = false }) {
super({ debug });
this.name = name;
this.imageId = imageId;
this.image = document.getElementById(imageId);
this.width = this.image.width;
this.imageWidth = this.image.width;
this.imageHeight = this.image.height;
this.selected = selected;
this.elementId = elementId;
this.debug = debug;
}
async load() {
const levelConfig = await fetch("/resources/" + this.name + ".json");
this.levelConfig = await levelConfig.json();
const layer = this.levelConfig.layers[0];
const { data, height, width } = layer;
this.width = width;
this.height = height;
this.data = data;
}
get level() {
if (this._level) {
return this._level;
}
const levelConfig = this.levelConfig;
const layer = levelConfig.layers[0];
const { data, height, width } = layer;
const { ctx, canvas } = createCanvas(width * TILE_SIZE, height * TILE_SIZE);
const { ctx, canvas } = createCanvas(
this.width * TILE_SIZE,
this.height * TILE_SIZE
);
for (let row = 0; row < height; row++) {
for (let col = 0; col < width; col++) {
if (row < 0 || col < 0 || row >= height || col >= width) continue;
for (let row = 0; row < this.height; row++) {
for (let col = 0; col < this.width; col++) {
if (row < 0 || col < 0 || row >= this.height || col >= this.width)
continue;
const tile = data[row * width + col] - 1;
if (this.debug) {
ctx.strokeRect(
col * TILE_SIZE,
row * TILE_SIZE,
TILE_SIZE,
TILE_SIZE
);
}
const tile = this.data[row * this.width + col] - 1;
ctx.drawImage(
this.image,
(tile * TILE_SIZE) % this.width,
Math.floor((tile * TILE_SIZE) / this.width) * TILE_SIZE,
(tile * TILE_SIZE) % this.imageWidth,
Math.floor((tile * TILE_SIZE) / this.imageWidth) * TILE_SIZE,
TILE_SIZE,
TILE_SIZE,
col * TILE_SIZE,
@ -49,6 +66,13 @@ export class Map extends GameObject {
return (this._level = canvas);
}
onMouseClick(elementId) {
if (elementId === "debug") {
this.debug = !this.debug;
this._level = null;
}
}
render(ctx, sourceX, sourceY, width, height) {
if (!this.levelConfig || !this.selected) {
return;