escalator/escalator-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added game over screen

Browse Source
This commit is contained in:
Thomas Forgione 2018-08-23 10:37:50 +02:00
parent 1850464154
commit 83a5ac0f6a
No known key found for this signature in database
GPG Key ID: 203DAEA747F48F41
3 changed files with 84 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
src/scene.js
View File

@ -76,7 +76,7 @@ class Scene extends Screen {
// Check if the game is lost // Check if the game is lost
if (this.player.y + this.player.size < this.cameraHeight) { if (this.player.y + this.player.size < this.cameraHeight) {
this.initialize(); this.status = Status.GameOver;
} }
// The last platform is the highest. // The last platform is the highest.
@ -162,6 +162,10 @@ class Scene extends Screen {
this.context.resetTransform(); this.context.resetTransform();
this.drawHud(); this.drawHud();
if (this.status === Status.GameOver) {
this.drawGameOver();
}
} }
drawHighScoreLine() { drawHighScoreLine() {
@ -184,7 +188,7 @@ class Scene extends Screen {
this.context.font = "15px Dimbo"; this.context.font = "15px Dimbo";
this.context.fillStyle = "rgb(255, 255, 255)"; 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) { drawObject(object) {
@ -219,31 +223,33 @@ class Scene extends Screen {
this.context.fillStyle = 'rgb(255, 255, 255)'; this.context.fillStyle = 'rgb(255, 255, 255)';
this.context.fillText("Score: " + Math.floor(100 * this.currentHeight), 0, 20); this.context.fillText("Score: " + Math.floor(100 * this.currentHeight), 0, 20);
// Draw pause buttons if (this.status === Status.Running) {
let box = this.makePauseBox(); // Draw pause button
this.context.fillStyle = 'rgba(255, 255, 255, 0.5)'; let box = this.makePauseBox();
this.context.beginPath(); this.context.fillStyle = 'rgba(255, 255, 255, 0.5)';
this.context.rect(box.x, box.y, box.width, box.height); this.context.beginPath();
this.context.fill(); 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.fillStyle = 'rgba(0, 0, 0, 0.5)';
this.context.beginPath(); this.context.beginPath();
this.context.rect( this.context.rect(
box.x + box.width * 0.3, box.x + box.width * 0.3,
box.y + box.height * 0.1, box.y + box.height * 0.1,
box.width * 0.1, box.width * 0.1,
box.height * 0.8, box.height * 0.8,
); );
this.context.fill(); this.context.fill();
this.context.beginPath(); this.context.beginPath();
this.context.rect( this.context.rect(
box.x + box.width * 0.6, box.x + box.width * 0.6,
box.y + box.height * 0.1, box.y + box.height * 0.1,
box.width * 0.1, box.width * 0.1,
box.height * 0.8, box.height * 0.8,
); );
this.context.fill(); this.context.fill();
}
if (this.status === Status.Paused || this.status === Status.Waking) { if (this.status === Status.Paused || this.status === Status.Waking) {
@ -260,11 +266,34 @@ class Scene extends Screen {
this.context.fillStyle = 'rgb(255, 255, 255)'; this.context.fillStyle = 'rgb(255, 255, 255)';
let size = this.context.measureText(text).width; 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() { makePauseBox() {
let startX = 0.85; let startX = 0.85;
@ -299,12 +328,22 @@ class Scene extends Screen {
} }
this.start(); 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(); Scene.background = new Image();

18
src/screen.js
View File

@ -2,8 +2,9 @@ const Status = {
Idle: 0, Idle: 0,
Running: 1, Running: 1,
Paused: 2, Paused: 2,
Waking: 3, GameOver: 3,
Finished: 4, Waking: 4,
Finished: 5,
}; };
class Screen { class Screen {
@ -16,6 +17,19 @@ class Screen {
this.autoResize(); 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) { addEventListener(type, callback) {
this.listeners.push({ this.listeners.push({
type: type, type: type,

1
src/utils.js
View File

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