ujs/src/js/game.example.js

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

app.scene = firstScene;

// add app view in document
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;
  }
});