Tried to fix some collisions, improved in game menu

src/game.js

@@ -1,3 +1,9 @@
+const Screens = {
+    Exit: -1,
+    Menu: 0,
+    Game: 1,
+}
+
 class Game {
 
     constructor(canvas) {
@@ -5,13 +11,13 @@ class Game {
         this.canvas = canvas;
 
         // Create menu
-        let menu = new Menu(canvas);
+        this.menu = new Menu(canvas);
 
         // Create game scene
         let box = new Box();
         this.scene = new Scene(document.getElementById('canvas'), box);
 
-        this.changeScreen(menu);
+        this.changeScreen(this.menu);
     }
 
     changeScreen(screen) {
@@ -28,13 +34,15 @@ class Game {
         this.mainScreen.update(time);
 
         if (this.mainScreen.status === Status.Finished) {
-            if (this.mainScreen.after === AfterMenu.Start) {
+            if (this.mainScreen.after === Screens.Game) {
                 this.scene.initialize();
                 this.changeScreen(this.scene);
-            } else if (this.mainScreen.after === AfterMenu.Exit) {
+            } else if (this.mainScreen.after === Screens.Exit) {
                 if (navigator.app !== undefined && typeof navigator.app.exitApp === 'function') {
                     navigator.app.exitApp();
                 }
+            } else if (this.mainScreen.after === Screens.Menu) {
+                this.changeScreen(this.menu);
             }
         }
     }

src/menu.js

@@ -1,10 +1,9 @@
-const AfterMenu = {
-    Exit: 0,
-    Start: 1,
-};
-
 function resetHighScoreText() {
-    return "Reset high score (" + heightToScore(window.localStorage.getItem("maxHeight")) + ")";
+    return "High score: " + heightToScore(window.localStorage.getItem("maxHeight"));
+}
+
+function collectableText() {
+    return "Coins: " + window.localStorage.getItem("collectableNumber");
 }
 
 class Menu extends Gui {
@@ -17,18 +16,17 @@ class Menu extends Gui {
         this.addButton(new GuiButton(this.context, "Escalator", 0.5, 0.25, Type.StrokeFill));
 
         this.context.font = "30px Dimbo";
-        this.addButton(new GuiButton(this.context, "New Game", 0.5, 0.55, Type.StrokeFill, () => {
+        this.addButton(new GuiButton(this.context, "New Game", 0.5, 0.5, Type.StrokeFill, () => {
             this.status = Status.Finished;
-            this.after = AfterMenu.Start;
+            this.after = Screens.Game;
         }));
 
-        this.addButton(new GuiButton(this.context, resetHighScoreText, 0.5, 0.7, Type.StrokeFill, () => {
+        this.addButton(new GuiButton(this.context, resetHighScoreText, 0.5, 0.6, Type.StrokeFill));
-            window.localStorage.setItem("maxHeight", 0)
+        this.addButton(new GuiButton(this.context, collectableText, 0.5, 0.7, Type.StrokeFill));
-        }));
 
-        this.addButton(new GuiButton(this.context, "Exit", 0.5, 0.85, Type.StrokeFill, () => {
+        this.addButton(new GuiButton(this.context, "Exit", 0.5, 0.8, Type.StrokeFill, () => {
             this.status = Status.Finished;
-            this.after = AfterMenu.Exit;
+            this.after = Screens.Exit;
         }));
     }
 

src/scene.js

@@ -5,11 +5,11 @@ class Scene extends Screen {
         this.player = player;
         this.currentHeight = 0;
 
-        if (this.maxHeight === undefined) {
+        if (this.maxHeight == undefined) {
             this.maxHeight = 0;
         }
 
-        if (this.collectableNumber === undefined) {
+        if (this.collectableNumber == undefined) {
             this.collectableNumber = 0;
         }
 
@@ -179,10 +179,10 @@ class Scene extends Screen {
 
             // Ugly but don't care
             // Copied and adapted from sdz
-            if(    (collectable.x >= next.x + next.size / 2)
+            if(    (collectable.x - collectable.size / 2 >= next.x + next.size / 4)
-                || (collectable.x + collectable.size <= next.x)
+                || (collectable.x + collectable.size / 2 <= next.x - next.size / 4)
-                || (collectable.y >= next.y + next.size)
+                || (collectable.y - collectable.size / 2 >= next.y + next.size / 4)
-                || (collectable.y + collectable.size <= next.y)) {
+                || (collectable.y + collectable.size / 2 <= next.y - next.size / 4)) {
 
             } else {
                 collectable.collected = true;
@@ -241,7 +241,7 @@ class Scene extends Screen {
                 Collectable.texture,
                 0, 0, 64, 64,
                 (object.x - object.size / 2) * this.width(),
-                (1 - object.y - object.size / 2) * this.height(),
+                (1 - object.y) * this.height() - size / 2,
                 size, size
             );
         }
@@ -371,20 +371,61 @@ class Scene extends Screen {
         let text = this.newRecord ? "New Record!" : "Game Over";
         this.context.fillStyle = 'rgb(255, 255, 255)';
         this.context.font = "50px Dimbo";
-        this.centerFillText(text, this.height() / 4);
+        this.centerFillText(text, this.height() / 6);
-        this.centerStrokeText(text, this.height() / 4);
+        this.centerStrokeText(text, this.height() / 6);
 
         let size = 40;
         this.context.font = size + "px Dimbo";
 
         let currentScoreText = "Your score: " + heightToScore(this.currentHeight);
-        this.centerFillText(currentScoreText, this.height() / 2);
+        this.centerFillText(currentScoreText, this.height() / 3);
-        this.centerStrokeText(currentScoreText, this.height() / 2);
+        this.centerStrokeText(currentScoreText, this.height() / 3);
 
         let highScoreText = "Highest score: " + heightToScore(this.maxHeight);
-        this.centerFillText(highScoreText, this.height() / 2 + 2 * size);
+        this.centerFillText(highScoreText, this.height() / 3 + 1.5 * size);
-        this.centerStrokeText(highScoreText, this.height() / 2 + 2 * size);
+        this.centerStrokeText(highScoreText, this.height() / 3 + 1.5 * size);
 
+        let retryBox = this.makeRetryBox();
+        this.context.fillText("Retry", retryBox.x, retryBox.y + 40);
+        this.context.strokeText("Retry", retryBox.x, retryBox.y + 40);
+
+        let exitBox = this.makeExitBox();
+        this.context.fillText("Exit", exitBox.x, exitBox.y + 40);
+        this.context.strokeText("Exit", exitBox.x, exitBox.y + 40);
+
+    }
+
+    makeExitBox() {
+        let fontSize = 40;
+        let text = "Exit";
+        this.context.font = fontSize + "px Dimbo";
+        this.context.fillStyle = "rgb(255, 255, 255)";
+        this.context.strokeStyle = "rgb(0, 0, 0)";
+        let width = this.context.measureText(text).width;
+
+        return {
+            x: 2 * this.width() / 3 - width / 2,
+            y: 3 * this.height() / 4,
+            width: width,
+            height: fontSize,
+        }
+    }
+
+    makeRetryBox() {
+
+        let fontSize = 40;
+        let text = "Retry";
+        this.context.font = fontSize + "px Dimbo";
+        this.context.fillStyle = "rgb(255, 255, 255)";
+        this.context.strokeStyle = "rgb(0, 0, 0)";
+        let width = this.context.measureText(text).width;
+
+        return {
+            x: this.width() / 3 - width / 2,
+            y: 3 * this.height() / 4,
+            width: width,
+            height: fontSize,
+        }
     }
 
     makePauseBox() {
@@ -427,8 +468,17 @@ class Scene extends Screen {
                 this.player.jump(e.clientX / window.innerWidth, e.clientY / window.innerHeight);
             }
         } else if (this.status === Status.GameOver) {
+            let p = position(e);
+
+            if (isInBox(p, enlargeBox(this.makeRetryBox()))) {
+                // Retry game
                 this.initialize();
                 this.status = Status.Running;
+            } else if (isInBox(p, enlargeBox(this.makeExitBox()))) {
+                // Go back to menu
+                this.status = Status.Finished;
+                this.after = Screens.Menu;
+            }
         }
 
     }