The score

This is the 11th step out of 16 of the Gamedev Phaser tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Phaser-Content-Kit/demos/lesson11.html.

Having a score can also make the game more interesting — you can try to beat your own high score, or your friend's. In this article we'll add a scoring system to our game.

We will use a separate variable for storing the score and Phaser's text() method to print it out onto the screen.

New variables

Add two new variables right after the previously defined ones:

// …
let scoreText;
let score = 0;

Adding score text to the game display

Now add this line at the end of the create() function:

scoreText = game.add.text(5, 5, "Points: 0", {
  font: "18px Arial",
  fill: "#0095DD",
});

The text() method can take four parameters:

The x and y coordinates to draw the text at.
The actual text that will be rendered.
The font style to render the text with.

The last parameter looks very similar to CSS styling. In our case the score text will be blue, sized at 18 pixels, and use the Arial font.

Updating the score when bricks are destroyed

We will increase the number of points every time the ball hits a brick and update the scoreText to display the current score. This can be done using the setText() method — add the two new lines seen below to the ballHitBrick() function:

function ballHitBrick(ball, brick) {
  brick.kill();
  score += 10;
  scoreText.setText(`Points: ${score}`);
}

That's it for now — reload your index.html and check that the score updates on every brick hit.

Compare your code

You can check the finished code for this lesson in the live demo below, and play with it to understand better how it works:

Next steps

We now have a scoring system, but what's the point of playing and keeping score if you can't win? Let's see how we can add a victory state, allowing us to win the game.