update example

.prettierignore

@@ -2,3 +2,4 @@
 **/node_modules
 
 *.html
+*.css

src/js/.gitignore

@@ -1 +1 @@
-game.js
+game.js*

src/js/game.example.js

@@ -1,10 +1,11 @@
 import { App } from './app.js';
 import { Scene, SceneLayer } from './scene.js';
-import { Rect, StrokeRect } from './objects.js';
+import { Rect, StrokeRect, Sprite } from './objects.js';
 
+// init player
 let Player = {
-  x: 10,
-  y: 10,
+  x: 400 / 2 - 5,
+  y: 400 / 2 - 5,
   rect: null,
 };
 Player.rect = new Rect(Player.x, Player.y, 10, 10, 'black');
@@ -13,16 +14,27 @@ Player.rect.ticker = () => {
   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', [
+// init scene layers
+let layerBg = new SceneLayer('background', [
   new Rect(50, 50, 100, 100, 'red'),
   new StrokeRect(150, 150, 40, 40, 'green', 'blue', 1),
-
-  Player.rect,
 ]);
-firstScene.addLayer(firstLayer);
+
+let layerHud = new SceneLayer('hud', [
+  new Sprite('compass.png', 15, 15),
+  new Sprite('compass-arrow.png', 27, 21),
+]);
+
+let layerInstances = new SceneLayer('Instances', [Player.rect]);
+
+// init app
+let app = new App(document.querySelector('canvas'), 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;
 
@@ -31,6 +43,7 @@ window.addEventListener('DOMContentLoaded', () => {
   document.body.appendChild(app.view);
 });
 
+// player key press listener
 document.addEventListener('keydown', (e) => {
   switch (e.code) {
     case 'ArrowUp':

src/styles.css

@@ -0,0 +1,4 @@
+canvas {
+	image-rendering: crisp-edges;
+	image-rendering: pixelated;
+}