ticker

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;
+  }
+});

src/js/objects.js

@@ -4,6 +4,7 @@ class Object {
     this.y = y;
     this.width = w;
     this.height = h;
+    this.ticker = null;
   }
 }
 

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) => {