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;

this.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.

create() {
    // Existing Code...
    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!

this.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 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.

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

    this.scoreTitle = this.add.text(50, 30, "SCORE", textStyle);
    this.scoreTitle.fixedToCamera = true;
    this.scoreTitle.setOrigin(0.5, 0.5);

    this.scoreValue = this.add.text(50, 60, "0", textStyle);
    this.scoreValue.fixedToCamera = true;
    this.scoreValue.setOrigin(0.5, 0.5);
}

3. Increase Score and Update Text

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. After changing the score, you can either update the score immediately, or update it every frame in the update() method. We will do it right away.

onAsteroidBulletCollision(object1, object2) {
    ...
    this.playerScore += 10;        
    this.scoreValue.setText(this.playerScore);
}

Extensions

  • Take a look through the Phaser 3 Text Examples and see if you can spruce up the labels on the screen using a Google WebFont perhaps (or some other special formatting).
  • Maybe you could remove 1 point every time an asteroid disappears off the bottom of the screen so that the player feels some pressure to stop asteroids from disappearing off the bottom of the screen.

Potential Solution(s)

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

create() {
    // ... 

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

    this.scoreTitle = this.add.text(50, 30, "SCORE", textStyle);
    this.scoreTitle.fixedToCamera = true;
    this.scoreTitle.setOrigin(0.5, 0.5);

    this.scoreValue = this.add.text(50, 60, "0", textStyle);
    this.scoreValue.fixedToCamera = true;
    this.scoreValue.setOrigin(0.5, 0.5);

    this.playerScore = 0;         
}

onAsteroidBulletCollision(asteroid, bullet) {
    // ...

    this.playerScore += 10;        
    this.scoreValue.setText(this.playerScore);
}