Giving the game a twist

On Jul 18, 2017 11:48 pm, by phaserjs

We have to give the player something to do when all tiles have been removed and there’s still time to play. Listen to this idea: if you removed all tiles before the time runs out, another set of tiles is placed on the screen, so you can increase your score by making more matches. To reward you for successful matches, you will be awarded with two extra seconds at each match.

Does it sound complicated?

Didn’t you realize yet there’s nothing complicated when you use Phaser?

Let’s create a new variable which will inform us how many tiles are still placed on the board.

We’ll call it tilesLeft.

var tileSize = 80;
var numRows = 4;
var numCols = 5;
var tileSpacing = 10;
var tilesArray = [];
var selectedArray = [];
var playSound;
var score;
var timeLeft;
var tilesLeft;
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 timeLeft;

var tilesLeft;

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

When the tiles are shown on the screen, tilesLeft is set to the entire amount of tiles in the game, that is numRows * numCols.

placeTiles: function(){
    tilesLeft = numRows * numCols;
    ...
}

placeTiles: function(){

tilesLeft = numRows * numCols;

...

}

The remaining code is all to be placed in checkTiles method. When the player makes a successful match, we increase timeLeft by 2, actually adding two seconds to the game, and update timeText text.

At the same time, we decrease the amount of tiles left by two. Once there aren’t any tiles left on the table, we clear the arrays and place another set of tiles calling placeTiles function one more time. This will allow the player to continue to play.

checkTiles: function() {
    if(selectedArray[0].value == selectedArray[1].value) {
        if(playSound) {
            this.soundArray[1].play();
        }
    
        score ++;
        timeLeft +=2;
        this.timeText.text = "Time left: " + timeLeft;
        this.scoreText.text = "Score: " + score;
    
        selectedArray[0].destroy();
        selectedArray[1].destroy();

        tilesLeft -= 2;
        if(tilesLeft == 0) {
            tilesArray.length = 0;
            selectedArray.length = 0;
            this.placeTiles();
        }
    } 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 ++;

timeLeft +=2;

this.timeText.text = "Time left: " + timeLeft;

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

selectedArray[0].destroy();

selectedArray[1].destroy();

tilesLeft -= 2;

if(tilesLeft == 0) {

tilesArray.length = 0;

selectedArray.length = 0;

this.placeTiles();

}

} else {

if(playSound) {

this.soundArray[2].play();

}

selectedArray[0].frame = 10;

selectedArray[1].frame = 10;

}

selectedArray.length = 0;

}

There’s nothing new in this piece of code, only concepts that you already learned throughout this book. I would only commented these lines which will make the board refill if the player removed all tiles:

if(tilesLeft == 0) {
    tilesArray.length = 0;
    selectedArray.length = 0;
    this.placeTiles();
}

if(tilesLeft == 0) {

tilesArray.length = 0;

selectedArray.length = 0;

this.placeTiles();

}

We check for tilesLeft to be zero, and in this case we empty tilesArray array and selectedArray array, then call placeTiles method to place all tiles again on the board. Run the game and try to clear the board before time runs out, you will see that the game restarts. Will you be able to clear the board twice?