Added basic physics, and high score

Makefile

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

src/box.js

@@ -21,18 +21,14 @@ class Box {
         this.speedY -= G * time;
         this.speedY = Math.max(this.speedY, -MAX_SPEED);
 
-
         this.x += this.speedX * time;
         this.y += this.speedY * time;
+    }
 
-        if (this.y <= 0) {
-            this.y = 0;
-            this.speedY = 0;
-            this.jumpCounter = MAX_JUMP;
-        }
-
-        this.x = Math.max(0, Math.min(1, this.x));
-
+    collide(y) {
+        this.y = y;
+        this.speedY = 0;
+        this.jumpCounter = MAX_JUMP;
     }
 
     jump(_x, _y) {

src/main.js

@@ -1,4 +1,4 @@
-let box, scene;
+let scene;
 
 init();
 loop();
@@ -8,8 +8,13 @@ function init() {
     // Initialize scene
     scene = new Scene(document.getElementById('canvas'));
     scene.autoResize();
-    box = new Box();
-    scene.add(box);
+
+    let box = new Box();
+    scene.addObject(box);
+
+    scene.addPlatform(new Platform(0.2, 0.5, 0.3));
+    scene.addPlatform(new Platform(0.6, 0.2, 0.2));
+    scene.addPlatform(new Platform(0.7, 0.7, 0.3));
 
     // Initialize listeners
     window.addEventListener('resize', () => scene.autoResize());

src/platform.js

@@ -0,0 +1,13 @@
+class Platform {
+    constructor(x, y, width) {
+        this.x = x;
+        this.y = y;
+        this.width = width;
+        this.height = 0.02;
+        this.color = 'rgb(0, 255, 0)';
+    }
+
+    update() {
+
+    }
+}

src/scene.js

@@ -3,6 +3,8 @@ class Scene {
         this.canvas = canvas;
         this.context = canvas.getContext('2d');
         this.objects = [];
+        this.platforms = [];
+        this.maxHeight = 0;
     }
 
     width() {
@@ -36,37 +38,112 @@ class Scene {
 
     update(time = 0.002) {
         for (let object of this.objects) {
+
+            // Update high score
+            this.maxHeight = Math.max(object.y, this.maxHeight);
+
+            let previous = {
+                x: object.x,
+                y: object.y + object.size / 2,
+            };
+
             object.update(time);
+
+            let next = {
+                x: object.x,
+                y: object.y + object.size / 2,
+                size: object.size,
+            };
+
+            // Detect collision with platform
+            for (let platform of this.platforms) {
+
+                let p = {
+                    x: platform.x,
+                    y: platform.y + platform.height / 2,
+                    width: platform.width,
+                    height: platform.height,
+                };
+
+                if (previous.y >= p.y && next.y < p.y) {
+                    if (next.x >= p.x - p.width / 2 - next.size / 2) {
+                        if (next.x <= p.x + p.width / 2 + next.size / 2) {
+                            // Collision detected
+                            object.collide(p.y - next.size/2);
+                        }
+                    }
+                }
+            }
+
+            // Collision with the ground
+            if (object.y <= 0) {
+                object.collide(0);
+            }
+
+            // Collisions with the border of the screen
+            object.x = Math.max(object.x, object.size / 2);
+            object.x = Math.min(object.x, 1 - object.size / 2);
         }
     }
 
-    add(object) {
+    addObject(object) {
         this.objects.push(object);
     }
 
+    addPlatform(object) {
+        this.platforms.push(object);
+    }
+
     render() {
         this.clear();
         this.drawBackground();
 
         for (let object of this.objects) {
-            this.draw(object);
-            // object.drawOn(this.canvas);
+            this.drawObject(object);
         }
+
+        for (let platform of this.platforms) {
+            this.drawPlatform(platform);
+        }
+
+        this.drawHud();
     }
 
-    draw(object) {
+    drawObject(object) {
         let size = object.size * this.width();
 
         this.context.fillStyle = 'rgb(0, 0, 0)';
         this.context.beginPath();
 
         this.context.rect(
-            object.x * this.width(),
-            (1 - object.y) * this.height() - size,
+            (object.x - object.size / 2) * this.width(),
+            (1 - object.y - object.size / 2) * this.height(),
             size,
             size,
         );
         this.context.fill();
     }
 
+    drawPlatform(object) {
+        let width = object.width * this.width();
+        let height = object.height * this.height();
+
+        this.context.fillStyle = object.color || 'rgb(0, 0, 0)';
+        this.context.beginPath();
+
+        this.context.rect(
+            (object.x - object.width / 2) * this.width(),
+            (1 - object.y - object.height / 2) * this.height(),
+            width,
+            height,
+        );
+        this.context.fill();
+    }
+
+    drawHud() {
+        this.context.font = "20px Arial";
+        this.context.fillStyle = 'rgb(255, 255, 255)';
+        this.context.fillText("High score: " + Math.floor(100 * this.maxHeight), 0, 20);
+    }
+
 }