79 lines
1.9 KiB
JavaScript
79 lines
1.9 KiB
JavaScript
import { GAME_HEIGHT, GAME_WIDTH } from "./modules/constants.js";
|
|
import {
|
|
Camera,
|
|
CanvasResizer,
|
|
Debug,
|
|
GameObject,
|
|
MapManagement,
|
|
} from "./modules/game-objects/index.js";
|
|
|
|
const maps = [
|
|
{
|
|
name: "overworld",
|
|
imageId: "overworld",
|
|
elementId: "level1",
|
|
selected: true,
|
|
},
|
|
{ name: "ocean", imageId: "overworld", elementId: "level2" },
|
|
];
|
|
|
|
const clicableObjects = ["debug", "level1", "level2"];
|
|
|
|
class Game extends GameObject {
|
|
constructor({ canvas }) {
|
|
super();
|
|
|
|
const canvasResizer = new CanvasResizer({
|
|
canvas: canvas,
|
|
width: GAME_WIDTH,
|
|
height: GAME_HEIGHT,
|
|
percentage: 0.9,
|
|
});
|
|
const mapManagement = new MapManagement({ maps: maps });
|
|
const camera = new Camera({ map: mapManagement.selected });
|
|
const debug = new Debug({ debug: false });
|
|
this.gameObjects = [canvasResizer, mapManagement, camera, debug];
|
|
|
|
this.canvas = canvas;
|
|
this.ctx = this.canvas.getContext("2d");
|
|
this.lastTime = 0;
|
|
|
|
clicableObjects.forEach((elementId) => {
|
|
document.getElementById(elementId).addEventListener("click", () => {
|
|
this.onMouseClick(elementId);
|
|
});
|
|
});
|
|
}
|
|
|
|
clear(ctx) {
|
|
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
}
|
|
|
|
loop(time) {
|
|
const delta = (time - this.lastTime) / 1000;
|
|
this.lastTime = time;
|
|
this.update(delta);
|
|
this.clear(this.ctx);
|
|
this.render(this.ctx);
|
|
requestAnimationFrame(this.loop.bind(this));
|
|
}
|
|
}
|
|
|
|
function moveCamera(dx, dy) {
|
|
cameraX = Math.min(
|
|
Math.max(cameraX + dx, 0),
|
|
Math.floor((320 - canvasResizer.width) / TILE_SIZE)
|
|
);
|
|
cameraY = Math.min(
|
|
Math.max(cameraY + dy, 0),
|
|
Math.floor((240 - canvasResizer.height) / TILE_SIZE)
|
|
);
|
|
}
|
|
|
|
async function run() {
|
|
const game = new Game({ canvas: document.getElementById("game") });
|
|
await game.load();
|
|
game.loop(0);
|
|
}
|
|
|
|
run();
|