96 lines
2.3 KiB
JavaScript
96 lines
2.3 KiB
JavaScript
import { TILE_SIZE } from "../constants.js";
|
|
import { createCanvas } from "../utils.js";
|
|
import { GameObject } from "./game-object.js";
|
|
|
|
export class Map extends GameObject {
|
|
constructor({ name, imageId, elementId, layer = 0, selected = false }) {
|
|
super();
|
|
this.name = name;
|
|
this.imageId = imageId;
|
|
this.layer = layer;
|
|
this.image = document.getElementById(imageId);
|
|
this.imageWidth = this.image.width;
|
|
this.imageHeight = this.image.height;
|
|
this.selected = selected;
|
|
this.elementId = elementId;
|
|
}
|
|
|
|
async load() {
|
|
const response = await fetch(`/resources/${this.name}.json`, {
|
|
cache: "force-cache",
|
|
});
|
|
this.levelConfig = await response.json();
|
|
const layer = this.levelConfig.layers[this.layer];
|
|
const { data, height, width } = layer ?? {};
|
|
this.width = width;
|
|
this.height = height;
|
|
this.data = data;
|
|
}
|
|
|
|
get level() {
|
|
if (this._level) {
|
|
return this._level;
|
|
}
|
|
if (!this.width || !this.height) {
|
|
return null;
|
|
}
|
|
const { ctx, canvas } = createCanvas(
|
|
this.width * TILE_SIZE,
|
|
this.height * TILE_SIZE
|
|
);
|
|
|
|
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 = this.data[row * this.width + col] - 1;
|
|
if (this.debug && tile > -1) {
|
|
ctx.strokeRect(
|
|
col * TILE_SIZE,
|
|
row * TILE_SIZE,
|
|
TILE_SIZE,
|
|
TILE_SIZE
|
|
);
|
|
}
|
|
|
|
ctx.drawImage(
|
|
this.image,
|
|
(tile * TILE_SIZE) % this.imageWidth,
|
|
Math.floor((tile * TILE_SIZE) / this.imageWidth) * TILE_SIZE,
|
|
TILE_SIZE,
|
|
TILE_SIZE,
|
|
col * TILE_SIZE,
|
|
row * TILE_SIZE,
|
|
TILE_SIZE,
|
|
TILE_SIZE
|
|
);
|
|
}
|
|
}
|
|
|
|
return (this._level = canvas);
|
|
}
|
|
|
|
onMouseClick(elementId) {
|
|
super.onMouseClick(elementId);
|
|
if (elementId === "debug") this._level = null;
|
|
}
|
|
|
|
render(ctx, sourceX, sourceY, width, height) {
|
|
if (!this.levelConfig || !this.selected || !this.level) {
|
|
return;
|
|
}
|
|
|
|
ctx.drawImage(
|
|
this.level,
|
|
sourceX,
|
|
sourceY,
|
|
width,
|
|
height,
|
|
0,
|
|
0,
|
|
width,
|
|
height
|
|
);
|
|
}
|
|
}
|