Added pause button

Makefile

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

src/box.js

@@ -1,6 +1,6 @@
-const MAX_SPEED = 20;
+const MAX_SPEED = 3;
 const MAX_JUMP = 2;
-const G = 500;
+const G = 10;
 
 const MAX_FRAME = 9;
 
@@ -25,7 +25,7 @@ class Box {
         this.jumpCounter = MAX_JUMP;
     }
 
-    update(time = 0.002) {
+    update(time = 0.02) {
 
         if (this.animate !== 0) {
             this.frameNumber += this.animate;

src/game.js

@@ -21,7 +21,7 @@ class Game {
         screen.addListeners();
     }
 
-    update(time = 0.002) {
+    update(time = 0.02) {
         this.mainScreen.update(time);
 
         if (this.mainScreen.status === Status.Finished) {

src/menu.js

@@ -95,21 +95,17 @@ class Menu extends Screen {
         let e = event.changedTouches[0];
 
         let box = this.enlargeBox(this.newGameBox());
-        if (e.clientX > box.x && e.clientX < box.x + box.width) {
-            if (e.clientY > box.y && e.clientY < box.y + box.height) {
-                this.status = Status.Finished;
-                this.after = AfterMenu.Start;
-            }
+        if (isInBox(position(e), box)) {
+            this.status = Status.Finished;
+            this.after = AfterMenu.Start;
         }
 
         box = this.enlargeBox(this.exitBox());
-        if (e.clientX > box.x && e.clientX < box.x + box.width) {
-            if (e.clientY > box.y && e.clientY < box.y + box.height) {
-                this.status = Status.Finished;
-                this.after = AfterMenu.Exit;
-            }
+        if (isInBox(position(e), box)) {
+            this.status = Status.Finished;
+            this.after = AfterMenu.Exit;
         }
-    }
+}
 
     enlargeBox(box) {
         return {

src/scene.js

@@ -43,7 +43,7 @@ class Scene extends Screen {
     start() {
         if (!this.started) {
             this.started = true;
-            this.cameraSpeed = 0.005;
+            this.cameraSpeed = 0.0005;
         }
     }
 
@@ -55,7 +55,20 @@ class Scene extends Screen {
         this.context.fill();
     }
 
-    update(time = 0.002) {
+    update(time = 0.02) {
+
+        if (this.wakingTimer !== undefined) {
+            this.wakingTimer -= time;
+
+            if (this.wakingTimer < 0) {
+                this.wakingTimer = undefined;
+                this.status = Status.Running;
+            }
+        }
+
+        if (this.status !== Status.Running) {
+            return;
+        }
 
         // Check if the game is lost
         if (this.player.y + this.player.size < this.cameraHeight) {
@@ -171,15 +184,86 @@ class Scene extends Screen {
     }
 
     drawHud() {
-        this.context.font = "20px Arial";
+        // Draw scores
+        let fontSize = 20;
+        this.context.font = fontSize + "px Arial";
         this.context.fillStyle = 'rgb(255, 255, 255)';
         this.context.fillText("Current score: " + Math.floor(100 * this.currentHeight), 0, 20);
         this.context.fillText("High score: " + Math.floor(100 * this.maxHeight), 0, 50);
+
+        // Draw pause buttons
+        let box = this.makePauseBox();
+        this.context.fillStyle = 'rgba(255, 255, 255, 0.5)';
+        this.context.beginPath();
+        this.context.rect(box.x, box.y, box.width, box.height);
+        this.context.fill();
+
+        this.context.fillStyle = 'rgba(0, 0, 0, 0.5)';
+        this.context.beginPath();
+        this.context.rect(
+            box.x + box.width * 0.3,
+            box.y + box.height * 0.1,
+            box.width * 0.1,
+            box.height * 0.8,
+        );
+        this.context.fill();
+
+        this.context.beginPath();
+        this.context.rect(
+            box.x + box.width * 0.6,
+            box.y + box.height * 0.1,
+            box.width * 0.1,
+            box.height * 0.8,
+        );
+        this.context.fill();
+
+        if (this.status === Status.Paused || this.status === Status.Waking) {
+
+            let fontSize = 50;
+            this.context.font = fontSize + "px Arial";
+
+            this.context.beginPath();
+            this.context.rect(0, 0, this.width(), this.height());
+            this.context.fill();
+
+            let text = this.status === Status.Paused ? "Paused" : Math.floor(this.wakingTimer + 1);
+            text = text + "";
+
+            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);
+
+        }
+    }
+
+    makePauseBox() {
+
+        let startX = 0.85;
+        let startY = 0.05;
+        let size = 0.1;
+
+        return {
+            x: startX * this.width(),
+            y: startY * this.width(),
+            width: size * this.width(),
+            height: size * this.width(),
+        };
     }
 
     onTouchStart(event) {
 
         let e = event.changedTouches[0];
+
+        if (this.started) {
+            if (this.status === Status.Running && isInBox(position(e), this.makePauseBox())) {
+                this.status = Status.Paused;
+            } else if (this.status === Status.Paused) {
+                this.status = Status.Waking;
+                this.wakingTimer = 3;
+            }
+        }
+
         this.start();
         if (e !== undefined) {
             this.player.jump(e.clientX / window.innerWidth, e.clientY / window.innerHeight);

src/screen.js

@@ -1,7 +1,9 @@
 const Status = {
     Idle: 0,
     Running: 1,
-    Finished: 2,
+    Paused: 2,
+    Waking: 3,
+    Finished: 4,
 };
 
 class Screen {
@@ -55,7 +57,7 @@ class Screen {
 
     }
 
-    update(time = 0.002) {
+    update(time = 0.02) {
 
     }
 

src/utils.js

@@ -0,0 +1,12 @@
+function isInBox(pos, box) {
+    return (
+        (pos.x > box.x && pos.x < box.x + box.width) &&
+        (pos.y > box.y && pos.y < box.y + box.height));
+}
+
+function position(event) {
+    return {
+        x: event.clientX,
+        y: event.clientY,
+    };
+}