When the player runs out of time, we need to stop the game and show a game over screen. How can we make a game over screen?
Right, with another state.
|
1 2 3 4 |
game.state.add("TitleScreen", titleScreen); game.state.add("PlayGame", playGame); game.state.add("GameOver", gameOver); game.state.start("TitleScreen"); |
Once the state has been added to the game, we will call it once the timer reaches zero. Look at decreaseTime method:
|
1 2 3 4 5 6 7 |
decreaseTime: function() { timeLeft --; this.timeText.text = "Time left: " + timeLeft; if(timeLeft == 0) { game.state.start("GameOver"); } } |
And now it’s just a matter of building the new state, with the “Game Over” text, the score and the message to tap to restart. Nothing new in the following code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
var gameOver = function(game) {} gameOver.prototype = { create: function() { var style = { font: "32px Monospace", fill: "#00ff00", align: "center" } var text = game.add.text( game.width / 2, game.height / 2, "Game Over\n\nYour score: " + score + "\n\nTap to restart", style ); text.anchor.set(0.5); } } |
Play the game, and after a minute you should see something like this:
Ok, now tap to restart. You can’t. We have to write another couple of lines.
Download Source
File: showing-game-over-screen.zip