Added game over screen

src/scene.js

@@ -76,7 +76,7 @@ class Scene extends Screen {
 
         // Check if the game is lost
         if (this.player.y + this.player.size < this.cameraHeight) {
-            this.initialize();
+            this.status = Status.GameOver;
         }
 
         // The last platform is the highest.
@@ -162,6 +162,10 @@ class Scene extends Screen {
         this.context.resetTransform();
 
         this.drawHud();
+
+        if (this.status === Status.GameOver) {
+            this.drawGameOver();
+        }
     }
 
     drawHighScoreLine() {
@@ -184,7 +188,7 @@ class Scene extends Screen {
 
         this.context.font = "15px Dimbo";
         this.context.fillStyle = "rgb(255, 255, 255)";
-        this.context.fillText("High score: " + Math.floor(100 * this.currentMaxHeight), 0, height - 5);
+        this.context.fillText("High score: " + this.score(this.currentMaxHeight), 0, height - 5);
     }
 
     drawObject(object) {
@@ -219,7 +223,8 @@ class Scene extends Screen {
         this.context.fillStyle = 'rgb(255, 255, 255)';
         this.context.fillText("Score: " + Math.floor(100 * this.currentHeight), 0, 20);
 
-        // Draw pause buttons
+        if (this.status === Status.Running) {
+            // Draw pause button
             let box = this.makePauseBox();
             this.context.fillStyle = 'rgba(255, 255, 255, 0.5)';
             this.context.beginPath();
@@ -244,6 +249,7 @@ class Scene extends Screen {
                 box.height * 0.8,
             );
             this.context.fill();
+        }
 
         if (this.status === Status.Paused || this.status === Status.Waking) {
 
@@ -260,11 +266,34 @@ class Scene extends Screen {
             this.context.fillStyle = 'rgb(255, 255, 255)';
             let size = this.context.measureText(text).width;
 
-            this.context.fillText(text, (this.width() - size) / 2, this.height() / 2 + fontSize);
+            this.fillText(text, (this.width() - size) / 2, this.height() / 2 + fontSize);
 
         }
     }
 
+    drawGameOver() {
+        this.context.fillStyle = 'rgba(255, 255, 255, 0.5)';
+        this.context.beginPath();
+        this.context.rect(0, 0, this.width(), this.height());
+        this.context.fill();
+
+        this.context.fillStyle = 'rgb(255, 255, 255)';
+        this.context.font = "50px Dimbo";
+        this.centerFillText('Game Over', this.height() / 4);
+        this.centerStrokeText('Game Over', this.height() / 4);
+
+        let size = 40;
+        this.context.font = size + "px Dimbo";
+
+        let currentScoreText = "Your score: " + this.score(this.currentHeight);
+        this.centerFillText(currentScoreText, this.height() / 2);
+        this.centerStrokeText(currentScoreText, this.height() / 2);
+
+        let highScoreText = "Highest score: " + this.score(this.maxHeight);
+        this.centerFillText(highScoreText, this.height() / 2 + 2 * size);
+        this.centerStrokeText(highScoreText, this.height() / 2 + 2 * size);
+    }
+
     makePauseBox() {
 
         let startX = 0.85;
@@ -299,12 +328,22 @@ class Scene extends Screen {
         }
 
         this.start();
+
+        if (this.status === Status.Running) {
             if (e !== undefined) {
                 this.player.jump(e.clientX / window.innerWidth, e.clientY / window.innerHeight);
             }
+        } else if (this.status === Status.GameOver) {
+            this.initialize();
+            this.status = Status.Running;
+        }
 
     }
 
+    score(height) {
+        return Math.floor(100 * height);
+    }
+
 }
 
 Scene.background = new Image();

src/screen.js

@@ -2,8 +2,9 @@ const Status = {
     Idle: 0,
     Running: 1,
     Paused: 2,
-    Waking: 3,
+    GameOver: 3,
-    Finished: 4,
+    Waking: 4,
+    Finished: 5,
 };
 
 class Screen {
@@ -16,6 +17,19 @@ class Screen {
         this.autoResize();
     }
 
+    centerFillText(text, height) {
+        let width = this.context.measureText(text).width;
+        let start = (this.width() - width) / 2;
+        this.context.fillText(text, start, height);
+    }
+
+    centerStrokeText(text, height) {
+        let width = this.context.measureText(text).width;
+        let start = (this.width() - width) / 2;
+        this.context.strokeText(text, start, height);
+    }
+
+
     addEventListener(type, callback) {
         this.listeners.push({
             type: type,

src/utils.js

@@ -10,3 +10,4 @@ function position(event) {
         y: event.clientY,
     };
 }
+