diff --git a/src/scene.js b/src/scene.js index 8ba9f12..1de3072 100644 --- a/src/scene.js +++ b/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,31 +223,33 @@ 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 - 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(); + if (this.status === Status.Running) { + // Draw pause button + 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.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(); + 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) { @@ -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 (e !== undefined) { - this.player.jump(e.clientX / window.innerWidth, e.clientY / window.innerHeight); + + 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(); diff --git a/src/screen.js b/src/screen.js index 0201717..0c825f6 100644 --- a/src/screen.js +++ b/src/screen.js @@ -2,8 +2,9 @@ const Status = { Idle: 0, Running: 1, Paused: 2, - Waking: 3, - Finished: 4, + GameOver: 3, + 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, diff --git a/src/utils.js b/src/utils.js index 23ad65b..6a6538b 100644 --- a/src/utils.js +++ b/src/utils.js @@ -10,3 +10,4 @@ function position(event) { y: event.clientY, }; } +