Phaser for Beginners

Giving the game a twist

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.

When the tiles are shown on the screen, tilesLeft is set to the entire amount of tiles in the game, that is 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.

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:

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?

By the way, did you try to play it on a mobile device?
Here’s how the game looks like on my iPhone 5:

Actually not the best way to play a game. There’s nothing “cross-platform” in it.

Download Source


Next Tutorial →

Make the game more mobile friendly

← Previous Tutorial

Restarting the game