61 lines
1.4 KiB
JavaScript
61 lines
1.4 KiB
JavaScript
import { App, Scene, SceneLayer, Rect, StrokeRect, Sprite } from './engine.js';
|
|
|
|
// init player
|
|
let Player = {
|
|
x: 400 / 2 - 5,
|
|
y: 400 / 2 - 5,
|
|
rect: null,
|
|
};
|
|
Player.rect = new Rect(Player.x, Player.y, 10, 10, 'black');
|
|
Player.rect.ticker = () => {
|
|
Player.rect.y = Player.y;
|
|
Player.rect.x = Player.x;
|
|
};
|
|
|
|
// init scene layers
|
|
let layerBg = new SceneLayer('background', [
|
|
new Rect(50, 50, 100, 100, 'red'),
|
|
new StrokeRect(150, 150, 40, 40, 'green', 'blue', 1),
|
|
]);
|
|
|
|
let layerHud = new SceneLayer('hud', [
|
|
new Sprite('/assets/compass.png', 15, 15),
|
|
new Sprite('/assets/compass-arrow.png', 27, 21),
|
|
]);
|
|
|
|
let layerInstances = new SceneLayer('Instances', [Player.rect], { debug: true });
|
|
|
|
// init app
|
|
let app = new App(400, 400);
|
|
|
|
// init scene
|
|
let firstScene = new Scene(app.canvas, app.context, 400, 400);
|
|
firstScene.addLayer(layerBg);
|
|
firstScene.addLayer(layerInstances);
|
|
firstScene.addLayer(layerHud);
|
|
|
|
app.scene = firstScene;
|
|
|
|
// add app view in document
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
document.body.appendChild(app.view);
|
|
});
|
|
|
|
// player key press listener
|
|
document.addEventListener('keydown', (e) => {
|
|
switch (e.code) {
|
|
case 'ArrowUp':
|
|
Player.y -= 1;
|
|
break;
|
|
case 'ArrowDown':
|
|
Player.y += 1;
|
|
break;
|
|
case 'ArrowLeft':
|
|
Player.x -= 1;
|
|
break;
|
|
case 'ArrowRight':
|
|
Player.x += 1;
|
|
break;
|
|
}
|
|
});
|