93 lines
2.2 KiB
JavaScript
93 lines
2.2 KiB
JavaScript
import { GAME_HEIGHT, GAME_WIDTH } from "./modules/constants.js";
|
|
import {
|
|
Camera,
|
|
CanvasResizer,
|
|
FpsCounter,
|
|
GameObject,
|
|
MapManagement,
|
|
} from "./modules/game-objects/index.js";
|
|
|
|
const backgroundMaps = [
|
|
{
|
|
name: "overworld",
|
|
imageId: "overworld",
|
|
elementId: "level1",
|
|
layer: 0,
|
|
selected: true,
|
|
},
|
|
{ name: "ocean", imageId: "overworld", elementId: "level2" },
|
|
];
|
|
|
|
const foregroundMaps = [
|
|
{
|
|
name: "overworld",
|
|
imageId: "overworld",
|
|
elementId: "level1",
|
|
layer: 1,
|
|
selected: true,
|
|
},
|
|
{ name: "ocean", imageId: "overworld", elementId: "level2", layer: 2 },
|
|
];
|
|
|
|
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 camera = new Camera({
|
|
gameObjects: [
|
|
new MapManagement({ maps: backgroundMaps }),
|
|
new MapManagement({ maps: foregroundMaps }),
|
|
],
|
|
});
|
|
const fpsCounter = new FpsCounter({ debug: false });
|
|
this.gameObjects = [canvasResizer, camera, fpsCounter];
|
|
|
|
this.canvas = canvas;
|
|
this.ctx = this.canvas.getContext("2d");
|
|
this.lastTime = 0;
|
|
}
|
|
|
|
async load() {
|
|
await super.load();
|
|
clicableObjects.forEach((elementId) => {
|
|
document.getElementById(elementId).addEventListener("click", () => {
|
|
this.onMouseClick(elementId);
|
|
});
|
|
});
|
|
document.addEventListener("keydown", (event) => {
|
|
this.onKeyPressed(event.key);
|
|
});
|
|
document.addEventListener("keyup", (event) => {
|
|
this.onKeyReleased(event.key);
|
|
});
|
|
}
|
|
|
|
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));
|
|
}
|
|
}
|
|
|
|
async function run() {
|
|
const game = new Game({ canvas: document.getElementById("game") });
|
|
await game.load();
|
|
game.loop(0);
|
|
}
|
|
|
|
run();
|