While we have the basis for a game now, arcade games traditionally encourage you to keep playing the game over and over to try to get the highest score possible. If we’re going to entice players to keep coming back to our game, we need to make sure they’re able to measure their progress by add some points to their score whenever they destroy an asteroid!

Task Definition

During this task we will need to accomplish the following;

  • When the game starts, create a variable to store the player’s score and set it to zero.
  • Create a text label on the screen that displays the user’s current score.
  • Whenever the player destroys an asteroid, the player’s score should increase.
  • You should update the text for the score label every update incase the player’s score has changed.

Hints

Your first step will involve adding some text to the screen. After you have that text appearing on the screen, you will need to keep track of the player’s score in a variable and update their score whenever an asteroid is destroyed. You will also need to update the text label on the screen with the users new score whenever it changes (or simply every ‘update’).

You will find the following Phaser methods useful in completing this task;

game.add.text(x, y, text, displayOptions)

This method can be used to add a text label to your game in exactly the same way that you are adding sprites for the player ship and asteroids. See the Phaser Text Reference for possible values in displayOptions (which describes how your text should look).

text.fixedToCamera = true;

Setting this property on a sprite or text object it will always remain in the same place on the screen, regardless of where you move the camera.

text.setText();

Use this function to update the text that is displayed in a text object you have previously created.

Walkthrough

1. Add a Score Variable

The first thing we will do is add a this.playerScore variable in the create function of your game and initialize it to zero.

mainGameState.create = function() {
    ...
    this.playerScore = 0;
}

2. Add the Text

Next up you want to create some text objects on your screen. These are similar to sprite in the sense that you create them during your create function and they will exist in the game world. In fact, you can even move them around like sprites if you want too!

game.add.text(x, y, text, displayOptions)

dispayOptions is an object which can take a number of parameters. It is a little bit similar to CSS in a sense, but the properties and values are a bit different. Here is an example of a ‘displayOptions’ object you might pass to game.add.text.

var displayOptions = {
    font: "16px Arial", 
    fill: "#ffffff", 
    align: "center"
}

You probably want to add two labels at this point, one fixed label which just says “SCORE” and a second label to contain the actual value of the player’s score. Then it’s super easy to update the player’s score when it changes - as you just have to update the scoreValue label instead of the scoreTitle label.

    var textStyle = {font: "16px Arial", fill: "#ffffff", align: "center"}

    this.scoreTitle = game.add.text(game.width * 0.85, 30, "SCORE", textStyle);
    this.scoreTitle.fixedToCamera = true;
    this.scoreTitle.anchor.setTo(0.5, 0.5);

    this.scoreValue = game.add.text(game.width * 0.75, 30, "0", textStyle);
    this.scoreValue.fixedToCamera = true;
    this.scoreValue.anchor.setTo(0.5, 0.5);

    this.playerScore = 0;

3. Increase Score

Next we should give the player some points when an asteroid is destroyed. This will typically just be a case of adding a number to the variable in your onAsteroidBulletCollision() function.

mainGameState.onAsteroidBulletCollision = function(object1, object2) {
    ...
    this.playerScore += 50;
}

4. Update the Score Label

Whenever the player’s score changes, you will need to make sure the label on the screen reflects the current score. This is best done in the main update loop so it doesn’t matter where the score has changed. For now, we will simply do it every frame using this.scoreValue.setText();.

mainGameState.update = function() {
    ...
    this.scoreValue.setText(this.playerScore);
}

Extensions

  • It would be better if we didn’t update the score label every frame. Updating a label in a game can be quite a lot of work to do 60 times per second. Maybe you could add a ‘currentValue’ property to the ‘scoreValue’ object and use that to keep track of the value being rendered. If the player’s score is different to this, then you can update the text and this value.

Potential Solution(s)

Click on the button below to see an example solution for this problem;

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

        this.scoreTitle = game.add.text(game.width * 0.75, 10, "SCORE", textStyle);
        this.scoreTitle.fixedToCamera = true;
        this.scoreTitle.anchor.setTo(0.5, 0.5);

        this.scoreValue = game.add.text(game.width * 0.75, 30, "0", textStyle);
        this.scoreValue.fixedToCamera = true;
        this.scoreValue.anchor.setTo(0.5, 0.5);

        this.playerScore = 0;
    },
    update: function() {
        ...
        this.scoreValue.setText(this.playerScore);
    },
    onAsteroidBulletCollision: function() {
        ...
        this.playerScore += 50;
    }