Game Over Man!

To provide a complete game experience we should make sure the player knows that the game is over when they have run out of lives. After they have been told that it’s “GAME OVER” then they should also then be able to restart the game and try to beat their previous score!

Task Definition

• When the player has zero lives remaining the game should transition to a ‘GameOver’ state.
• This will mean setting up a whole new state object and transitioning to that state.
• When in the GameOver state, the user should be able to press a button on the keyboard to restart the game.

Hints

To complete this task you will need to setup a GameOverState in a separate JavaScript file (just like when we started the main game section of this course). The new state can be empty initially (perhaps just add a background image so that you know it has worked). Eventually, you can add labels to show the text ‘GAME OVER’ at the top of the screen and “Press Z to Restart” at the bottom.

The following phaser functions will be useful for this task;

game.state.add(name, state)

After you have created your new state in a separate JavaScript file, you will need to register the state with your game. This is similar to how you register a sprite - it has a simple name so that you can access it easily in the future.

game.state.start(name)

This function lets you transition to a different state in your game. Transitioning to a new state is a bit like visiting a new page on a web-site - it’s possible to share data between the states, but by default - data is mostly restricted to a single state. This helps to keep things clean, tidy and modular.

Walkthrough

1. Create the GameOver State

Just like we did with maingamestate.js right back at the beginning of the course, we’ll need to create a ‘gameOverState’ object that the game can transition too. To start with, create gameoverstate.js in your source directory and create a completely empty object called gameOverState which looks like the state we had when we started this whole project.

The empty state object should contain the following three (empty) functions for now; preload(), create() and update().

var gameOverState = { }

gameOverState.preload = function() { 

}

gameOverState.create = function() {

}

gameOverState.update = function() {

}

2. Load source/gameoverstate.js in your HTML head

In the same way that we have to load the source/maingamestate.js file at the top of our index.html file we should also load source/gameoverstate.js.

<script src="source/gameoverstate.js"></script>

3. Register the State

In your index.html file you already register your mainGameState using game.state.add(“MainGame”, mainGameState);. You should add a similar line of code for the gameOverState so that you can transition there when you need too.

game.state.add("GameOver", gameOverState);

4. Transition to the State

When the player has finally run out of lives, you should transition to the game over state using game.state.start(name). You could simply check for this every frame in the update loop - if the player ever has zero (or fewer) lives remaining, then you should transition immediately to the GameOver state!

mainGameState.update = function() {
    ...

    if ( this.playerLives <= 0 ) {
        game.state.start("GameOver");
    }
}

5. Prettify the Game Over State

It’s now time to put some of those skills you have learned in the main game to use! You already know how to add text, images and sound effects to your game - go back through some of the previous lessons and make a game over screen using the skills you have learned. You are always welcome to jump to the sample solution below if you run out of time or aren’t interested in making your own game over screen.

Extensions

• You also might want to consider making the player’s score a global variable so that you can access it in the GameOverState. This means you can show the player their final score before they start again and try to beat it.

Potential Solution(s)

var gameOverState = { }

gameOverState.preload = function() { 

}

gameOverState.create = function() {
    var textStyle = {font: "14px Arial", fill: "#ccddff", align: "center"}

    var title = game.add.text(game.width * 0.5, game.height * 0.2, "GAME OVER");
    title.anchor.setTo(0.5, 0.5);

    var scoreTitle = game.add.text(game.width * 0.5, game.height * 0.6, "Your Score");
    scoreTitle.anchor.setTo(0.5, 0.5);

    var scoreValue = game.add.text(game.width * 0.5, game.height * 0.8, score);
    scoreValue.anchor.setTo(0.5, 0.5);

    this.spaceKey = game.input.keyboard.addKey(Phaser.Keyboard.SPACE);
}

gameOverState.update = function() {
    if (this.spaceKey.isDown) {
        game.state.start("MainGame");
    }
}

mainGameState.update = function() {
    ...

    if (this.lives <= 0) {
        game.state.start("GameOver");
    }
}

<script src="/source/gameoverstate.js"></script>

game.state.add("GameOver", gameOverState);