Created class scene

Makefile

@@ -4,6 +4,7 @@ www/js/escalator.js: $(shell find src -name "*.js")
 	mkdir -p www/js
 	cat \
 		src/open.js \
+		src/scene.js \
 		src/box.js \
 		src/main.js \
 		src/close.js \

src/main.js

@@ -1,40 +1,30 @@
-let canvas, ctx, box;
+let box, scene;
 
 init();
-render();
+loop();
 
 function init() {
-    // Initialize canvas
+
-    canvas = document.getElementById('canvas');
+    // Initialize scene
-    document.body.style.margin = '0px';
+    scene = new Scene(document.getElementById('canvas'));
-    onWindowResize();
+    scene.autoResize();
-    ctx = canvas.getContext('2d');
+    box = new Box();
+    scene.add(box);
 
     // Initialize listeners
-    window.addEventListener('resize', onWindowResize);
+    window.addEventListener('resize', () => scene.autoResize());
     document.addEventListener('touchstart', () => box.jump());
 
-    // Initialize game
-    box = new Box();
 }
 
-function render() {
+function loop() {
+
     // Manage physics
-    box.update();
+    scene.update();
 
     // Do rendering
-    // canvas.width = canvas.width
+    scene.render();
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.beginPath();
-    ctx.fillStyle = 'rgb(255, 0, 0)';
-    ctx.rect(0, 0, canvas.width, canvas.height);
-    ctx.fill();
 
-    box.drawOn(canvas);
+    requestAnimationFrame(loop);
-    requestAnimationFrame(render);
 }
 
-function onWindowResize() {
-    canvas.width = window.innerWidth;
-    canvas.height = window.innerHeight;
-}

src/object.js

@@ -1,3 +0,0 @@
-class Object {
-
-}

src/scene.js

@@ -0,0 +1,55 @@
+class Scene {
+    constructor(canvas) {
+        this.canvas = canvas;
+        this.context = canvas.getContext('2d');
+        this.objects = [];
+    }
+
+    width() {
+        return this.canvas.width;
+    }
+
+    height() {
+        return this.canvas.height;
+    }
+
+    resize(width, height) {
+        this.canvas.width = width;
+        this.canvas.height = height;
+    }
+
+    autoResize() {
+        this.canvas.width = window.innerWidth;
+        this.canvas.height = window.innerHeight;
+    }
+
+    clear() {
+        this.context.clearRect(0, 0, this.width(), this.height());
+    }
+
+    drawBackground() {
+        this.context.fillStyle = 'rgb(255, 0, 0)';
+        this.context.beginPath();
+        this.context.rect(0, 0, this.canvas.width, this.canvas.height);
+        this.context.fill();
+    }
+
+    update(time = 0.002) {
+        for (let object of this.objects) {
+            object.update(time);
+        }
+    }
+
+    add(object) {
+        this.objects.push(object);
+    }
+
+    render() {
+        this.clear();
+        this.drawBackground();
+
+        for (let object of this.objects) {
+            object.drawOn(this.canvas);
+        }
+    }
+}