Phaser for Beginners

Showing the score

To keep track of the score, I am sure you find it obvious now, we need to store it in a variable. Let’s create a variable called score.

Inside playGame object, we will need another variable to visually display the score on the stage. How about another text?

That’s why I am going to create a playGame property called scoreText, which is declared as null.

In JavaScript null means “nothing”, or an empty value.

Having a null variable does not mean we can’t assign it a value when we need.

Once create method is executed, it means a new game is started so we set score to zero. Also, you should be able to see what the remaining lines do:

We are adding a new text using scoreText property we defined before. You should already know how to add and style to the text. First, we defined a text style, then we created the text itself applying such style. Also notice how we can write anything we want inside the text content. When we created the title screen we only wrote a string “Crack Alien Code” but now we are also writing the content of score variable. Moreover, text strings are not static but we can change their content on the fly.

text property of a text will change the string displayed.

Do you want to show the score in real time?

Look at checkTiles function:

Once the player makes a successful match, score is incremented and then we can update a text simply by setting its text property. Run the game and see how your score increments at each successful match.

Showing the score on the screen does not complete the game. There is more that we can do.

Download Source


Next Tutorial →

Increasing difficulty by adding a timer

← Previous Tutorial

Playing sounds