Showing the score

On Jul 13, 2017 6:31 pm, by phaserjs

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.

var tileSize = 80;
var numRows = 4;
var numCols = 5;
var tileSpacing = 10;
var tilesArray = [];
var selectedArray = [];
var playSound;
var score;
var game = new Phaser.Game(500, 500);

var tileSize = 80;

var numRows = 4;

var numCols = 5;

var tileSpacing = 10;

var tilesArray = [];

var selectedArray = [];

var playSound;

var score;

var game = new Phaser.Game(500, 500);

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.

playGame.prototype = {
    scoreText: null,
    soundArray: [],
    preload: function() {
        ...
    }
    ...
}

playGame.prototype = {

scoreText: null,

soundArray: [],

preload: function() {

...

}

...

}

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:

create: function() {
    score = 0;
    this.placeTiles();
    if (playSound) {
        this.soundArray[0] = game.add.audio("select", 1);
        this.soundArray[1] = game.add.audio("right", 1);
        this.soundArray[2] = game.add.audio("wrong", 1);
    }
    
    var style = {
        font: "32px Monospace",
        fill: "#00ff00",
        align: "center"
    }
    
    this.scoreText = game.add.text(5, 5, "Score: " + score, style);
}

create: function() {

score = 0;

this.placeTiles();

if (playSound) {

this.soundArray[0] = game.add.audio("select", 1);

this.soundArray[1] = game.add.audio("right", 1);

this.soundArray[2] = game.add.audio("wrong", 1);

}

var style = {

font: "32px Monospace",

fill: "#00ff00",

align: "center"

}

this.scoreText = game.add.text(5, 5, "Score: " + score, style);

}

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:

checkTiles: function() {
    if(selectedArray[0].value == selectedArray[1].value) {
        if(playSound) {
            this.soundArray[1].play();
        }
        
        score ++;
        this.scoreText.text = "Score: " + score;
        selectedArray[0].destroy();
        selectedArray[1].destroy();
    } else {
        if(playSound) {
            this.soundArray[2].play();
        }
        
        selectedArray[0].frame = 10;
        selectedArray[1].frame = 10;
    }
    
    selectedArray.length = 0;
}

checkTiles: function() {

if(selectedArray[0].value == selectedArray[1].value) {

if(playSound) {

this.soundArray[1].play();

}

score ++;

this.scoreText.text = "Score: " + score;

selectedArray[0].destroy();

selectedArray[1].destroy();

} else {

if(playSound) {

this.soundArray[2].play();

}

selectedArray[0].frame = 10;

selectedArray[1].frame = 10;

}

selectedArray.length = 0;

}

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.