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

Added game over screen

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
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();

18
src/screen.js
View File

@ -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,

1
src/utils.js
View File

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