Game is now working

src/box.js

@@ -4,6 +4,11 @@ const G = 500;
 
 class Box {
     constructor() {
+        this.size = 0.1;
+        this.reset();
+    }
+
+    reset() {
         // All these values are in percentage of the screen
         this.x = 0.5;
         this.y = 0;
@@ -11,7 +16,6 @@ class Box {
         this.speedX = 0;
         this.speedY = 0;
 
-        this.size = 0.1;
         this.jumpCounter = MAX_JUMP;
     }
 

src/main.js

@@ -6,19 +6,16 @@ loop();
 function init() {
 
     // Initialize scene
-    scene = new Scene(document.getElementById('canvas'));
-    scene.autoResize();
-
     let box = new Box();
-    scene.addObject(box);
+    scene = new Scene(document.getElementById('canvas'), 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());
+    window.addEventListener('resize', () => {
+        scene.autoResize()
+    });
+
     document.addEventListener('touchstart', (event) => {
+        scene.start();
         let e = event.changedTouches[0];
         box.jump(e.clientX / window.innerWidth, e.clientY / window.innerHeight);
     });

src/scene.js

@@ -1,10 +1,33 @@
 class Scene {
-    constructor(canvas) {
+    constructor(canvas, player) {
         this.canvas = canvas;
         this.context = canvas.getContext('2d');
-        this.objects = [];
+        this.player = player;
-        this.platforms = [];
         this.maxHeight = 0;
+        this.initialize();
+    }
+
+    initialize() {
+        this.autoResize();
+        this.player.reset();
+        this.platforms = [];
+        this.cameraHeight = 0;
+        this.cameraSpeed = 0;
+        this.started = false;
+
+        // Generate random initial platforms
+        for (let i = 0.25; i <= 2; i += 0.33) {
+            let platform = new Platform(Math.random(), i, 0.2);
+            this.addPlatform(platform);
+        }
+
+    }
+
+    start() {
+        if (!this.started) {
+            this.started = true;
+            this.cameraSpeed = 0.005;
+        }
     }
 
     width() {
@@ -37,22 +60,40 @@ class Scene {
     }
 
     update(time = 0.002) {
-        for (let object of this.objects) {
+
+        // Check if the game is lost
+        if (this.player.y + this.player.size < this.cameraHeight) {
+            this.initialize();
+        }
+
+        // The last platform is the highest.
+        let last = this.platforms[this.platforms.length - 1];
+
+        // If the last platform is on screen, we need to create the next platform.
+        if (last.y <= this.cameraHeight + 1) {
+            let diff = 0.1 + Math.random() * 0.4;
+            let platform = new Platform(Math.random(), last.y + diff, 0.2);
+            this.platforms.push(platform);
+        }
+
+        // Increase position of the camera
+        this.cameraHeight += this.cameraSpeed * time * this.height();
+
 
         // Update high score
-            this.maxHeight = Math.max(object.y, this.maxHeight);
+        this.maxHeight = Math.max(this.player.y, this.maxHeight);
 
         let previous = {
-                x: object.x,
+            x: this.player.x,
-                y: object.y + object.size / 2,
+            y: this.player.y + this.player.size / 2,
         };
 
-            object.update(time);
+        this.player.update(time);
 
         let next = {
-                x: object.x,
+            x: this.player.x,
-                y: object.y + object.size / 2,
+            y: this.player.y + this.player.size / 2,
-                size: object.size,
+            size: this.player.size,
         };
 
         // Detect collision with platform
@@ -69,25 +110,20 @@ class Scene {
                 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);
+                        this.player.collide(p.y - next.size/2);
                     }
                 }
             }
         }
 
         // Collision with the ground
-            if (object.y <= 0) {
+        if (this.player.y <= 0) {
-                object.collide(0);
+            this.player.collide(0);
         }
 
         // Collisions with the border of the screen
-            object.x = Math.max(object.x, object.size / 2);
+        this.player.x = Math.max(this.player.x, this.player.size / 2);
-            object.x = Math.min(object.x, 1 - object.size / 2);
+        this.player.x = Math.min(this.player.x, 1 - this.player.size / 2);
-        }
-    }
-
-    addObject(object) {
-        this.objects.push(object);
     }
 
     addPlatform(object) {
@@ -98,14 +134,12 @@ class Scene {
         this.clear();
         this.drawBackground();
 
-        for (let object of this.objects) {
-            this.drawObject(object);
-        }
-
         for (let platform of this.platforms) {
             this.drawPlatform(platform);
         }
 
+        this.drawObject(this.player);
+
         this.drawHud();
     }
 
@@ -117,7 +151,7 @@ class Scene {
 
         this.context.rect(
             (object.x - object.size / 2) * this.width(),
-            (1 - object.y - object.size / 2) * this.height(),
+            (1 - object.y - object.size / 2 + this.cameraHeight) * this.height(),
             size,
             size,
         );
@@ -133,7 +167,7 @@ class Scene {
 
         this.context.rect(
             (object.x - object.width / 2) * this.width(),
-            (1 - object.y - object.height / 2) * this.height(),
+            (1 - object.y - object.height / 2 + this.cameraHeight) * this.height(),
             width,
             height,
         );