Preventing the player to select more than two tiles each turn

On Jul 11, 2017 6:19 pm, by phaserjs

As said, not only we have to let the player select only two tiles, but we also have to prevent the same tile from being selected twice. A selected tile can’t be selected again. Moreover, we must store selected tiles somewhere, as later in the development of the game we must check if tile symbols match. First things first, let’s create a new variable, an array which will store selected
tiles.

We will call it selectedArray, and it will start as an empty array:

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

var tileSize = 80;

var numRows = 4;

var numCols = 5;

var tileSpacing = 10;

var tilesArray = [];

var selectedArray = [];

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

Now, we said selectedArray will contain selected tiles, so it means we have to add tiles in it once they are selected by the player. But according to game rules, before inserting a new tile in the array we have to check if the player hasn’t already selected two tiles and the currently selected tile hasn’t been already selected.

This may sound complicated, but can be achieved in only two lines of code added to showTile function:

showTile: function(target){
    if(selectedArray.length < 2 && selectedArray.indexOf(target) == -1){
        target.frame = target.value;
        selectedArray.push(target);
    }
}

showTile: function(target){

if(selectedArray.length < 2 && selectedArray.indexOf(target) == -1){

target.frame = target.value;

selectedArray.push(target);

}

Run the game, and you’ll see you won’t be able to select more than two different tiles.

What changed in the script? First, we added something you are already familiar with:

selectedArray.push(target);

1	selectedArray.push(target);

You should remember push method adds a new item to the end of an array, in this case selectedArray. Then, there’s another line which introduces some new concepts:

if(selectedArray.length < 2 && selectedArray.indexOf(target) == -1){
    ...
}

if(selectedArray.length < 2 && selectedArray.indexOf(target) == -1){

...

}

First, let me introduce you the if statement. Very often when you write code, you want to perform different actions for different decisions, or perform some actions only in some cases. You can use conditional statements in your code to do this, and if is the most common statement.

if statement executes a block of JavaScript code if a given condition is true.

We can write the average if statement in this form:

if(condition) {
    // block of code to be executed if the condition is true
}

if(condition) {

// block of code to be executed if the condition is true

}

So now we know how if statement works.

Now let’s see the condition in detail:

selectedArray.length < 2 && selectedArray.indexOf(target) == -1

1	selectedArray.length < 2 && selectedArray.indexOf(target) == -1

We are checking the length of selectedArray. If it’s less than two, this means we still haven’t selected two tiles.

length property returns the number of elements in an array.

We are also checking if the currently selected tile is already in selectedArray array, which means we already selected that tile.

indexOf method returns the position of a given element in the array. If there is no occurrence, indexOf returns -1.

In this case, we check for indexOf to be equal to -1 , to be sure there’s no occurrence of the selected tile in selectedArray array.

== operator means equal to.

The whole if condition will be true only if both conditions are true.

&& is the and logical operator used to connect two conditions

Translated in everyday language, we wrote “if the selected array has less than two elements and there’s no occurrence in the array of the tile we just selected, then insert the tile in the array”.

A lot of new concepts in just a couple of lines, but now the player will follow the rules of the game, at least during the selection of tiles. Now there is another rule to develop, the most important one, because it’s the one which will reward player’s memory: if the player selects two tiles with the same value they will be removed from the stage. We will cover back the tiles otherwise.