ticker
This commit is contained in:
parent
74e9b34253
commit
a740e6c863
|
@ -2,12 +2,25 @@ import { App } from './app.js';
|
||||||
import { Scene, SceneLayer } from './scene.js';
|
import { Scene, SceneLayer } from './scene.js';
|
||||||
import { Rect, StrokeRect } from './objects.js';
|
import { Rect, StrokeRect } from './objects.js';
|
||||||
|
|
||||||
|
let Player = {
|
||||||
|
x: 10,
|
||||||
|
y: 10,
|
||||||
|
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;
|
||||||
|
};
|
||||||
|
|
||||||
let app = new App(document.querySelector('canvas'), 400, 400);
|
let app = new App(document.querySelector('canvas'), 400, 400);
|
||||||
|
|
||||||
let firstScene = new Scene(app.canvas, app.context, 400, 400);
|
let firstScene = new Scene(app.canvas, app.context, 400, 400);
|
||||||
let firstLayer = new SceneLayer('background', [
|
let firstLayer = new SceneLayer('background', [
|
||||||
new Rect(50, 50, 100, 100, 'red'),
|
new Rect(50, 50, 100, 100, 'red'),
|
||||||
new StrokeRect(150, 150, 40, 40, 'green', 'blue', 1),
|
new StrokeRect(150, 150, 40, 40, 'green', 'blue', 1),
|
||||||
|
|
||||||
|
Player.rect,
|
||||||
]);
|
]);
|
||||||
firstScene.addLayer(firstLayer);
|
firstScene.addLayer(firstLayer);
|
||||||
|
|
||||||
|
@ -17,3 +30,20 @@ app.scene = firstScene;
|
||||||
window.addEventListener('DOMContentLoaded', () => {
|
window.addEventListener('DOMContentLoaded', () => {
|
||||||
document.body.appendChild(app.view);
|
document.body.appendChild(app.view);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
|
@ -4,6 +4,7 @@ class Object {
|
||||||
this.y = y;
|
this.y = y;
|
||||||
this.width = w;
|
this.width = w;
|
||||||
this.height = h;
|
this.height = h;
|
||||||
|
this.ticker = null;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -14,10 +14,22 @@ export class Scene {
|
||||||
}
|
}
|
||||||
|
|
||||||
run() {
|
run() {
|
||||||
this.#scene();
|
this.#update();
|
||||||
|
this.#draw();
|
||||||
}
|
}
|
||||||
|
|
||||||
#scene() {
|
#update() {
|
||||||
|
// read layers & draw items
|
||||||
|
this.#layers.forEach((layer) => {
|
||||||
|
layer.objects().forEach((item) => {
|
||||||
|
if (typeof item.ticker == 'function') {
|
||||||
|
item.ticker();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
#draw() {
|
||||||
// read layers & draw items
|
// read layers & draw items
|
||||||
this.#layers.forEach((layer) => {
|
this.#layers.forEach((layer) => {
|
||||||
layer.objects().forEach((item) => {
|
layer.objects().forEach((item) => {
|
||||||
|
|
Loading…
Reference in New Issue