diff --git a/src/js/game.js b/src/js/game.js index cf44b57..93c84c6 100644 --- a/src/js/game.js +++ b/src/js/game.js @@ -2,12 +2,25 @@ import { App } from './app.js'; import { Scene, SceneLayer } from './scene.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 firstScene = new Scene(app.canvas, app.context, 400, 400); let firstLayer = new SceneLayer('background', [ new Rect(50, 50, 100, 100, 'red'), new StrokeRect(150, 150, 40, 40, 'green', 'blue', 1), + + Player.rect, ]); firstScene.addLayer(firstLayer); @@ -17,3 +30,20 @@ app.scene = firstScene; window.addEventListener('DOMContentLoaded', () => { 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; + } +}); diff --git a/src/js/objects.js b/src/js/objects.js index 0895dc3..599f7da 100644 --- a/src/js/objects.js +++ b/src/js/objects.js @@ -4,6 +4,7 @@ class Object { this.y = y; this.width = w; this.height = h; + this.ticker = null; } } diff --git a/src/js/scene.js b/src/js/scene.js index 54161e9..e0bff3c 100644 --- a/src/js/scene.js +++ b/src/js/scene.js @@ -14,10 +14,22 @@ export class Scene { } 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 this.#layers.forEach((layer) => { layer.objects().forEach((item) => {