diff --git a/Makefile b/Makefile index dd4c680..b88eff2 100644 --- a/Makefile +++ b/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 \ diff --git a/src/box.js b/src/box.js index bec47d4..be05ae9 100644 --- a/src/box.js +++ b/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; diff --git a/src/game.js b/src/game.js index 81e0ccf..ddb0c21 100644 --- a/src/game.js +++ b/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) { diff --git a/src/menu.js b/src/menu.js index aebcc67..8e15339 100644 --- a/src/menu.js +++ b/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 { diff --git a/src/scene.js b/src/scene.js index 230339a..8e76c23 100644 --- a/src/scene.js +++ b/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); diff --git a/src/screen.js b/src/screen.js index dddd309..0201717 100644 --- a/src/screen.js +++ b/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) { } diff --git a/src/utils.js b/src/utils.js new file mode 100644 index 0000000..23ad65b --- /dev/null +++ b/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, + }; +}