Phaser for Beginners

Giving each button a custom property and accessing it when touched/clicked

Before we continue interacting with tiles and buttons, we have to store somewhere all tile values. And above all, assign each tile a value which will represent its image. Since we have 10 different types of tiles, each tile type can easily be coded with a number ranging from 0 to 9. Also, having two tiles for each type, the numeric representation of all tiles will be: 0, 0, 1, 1, 2 … 8, 8, 9, 9. Where to store these values? In an array.

An array is a special variable, which can hold more than one value at a time, under a single variable name, and you can access the values by referring to an index number.

You will master arrays in a couple of minutes, at the moment let’s create a new variable called tilesArray which will store all tiles information. At the beginning it will be an empty array, which we will populate later in the code.

tilesArray will now be populated with tile values as mentioned above.

Empty arrays are defined with open/close square brackets [] .

Populate the array and assign a custom property to tiles changing placeTiles:

As you can see, the function has been modified with some new code: there’s a new for loop at the beginning, something changed in the loop which iterates through columns and there’s a new line near the end of the function.

Let’s examine in detail what changed:

This is a for loop – you should already be familiar with it – which iterates for numRows * numCols push times, that is the total amount of tiles.

push adds new items to the end of an array.

At each iteration, push method adds a new item to the end of tilesArray adding zero, then zero again, then one, then one again until a couple of nines.

Math.floor rounds a number downward to its nearest integer.

Just to figure out what tilesArray contains at this time, let’s output its content to browser console:

Now, let’s see the start action of next loop:

Now it’s i = 0 rather than var i = 0. Why?

Because you have already declared i variable in the previous loop inside the same function. You only need to declare a variable once.

And finally we can give each tile its proper value.

value isn’t a built-in property of tile object, it’s just a custom variable we are assigning to tile. In other words, we are storing each tile value somewhere inside the tile itself. Somewhere, but exactly where? Inside value property.

You access an array element with index i by including the index between square brackets. The array element with index 0 – the first element – is accessed with[0] .

This way, the first tile placed will have value property equal to the first array element, that is tilesArray[0] , the second tile placed will have value property equal to the second array element, that is tilesArray[1] , and so on. Are you ready for a test drive?

Let’s change showTile function this way:

The button which is clicked / touched is passed in showTile function as an argument called target, then we access to its value property, which we previously set. Run the game and select some tiles to see their values in the console window:

Everything seems to work the right way, at least behind the curtains. Actually, players won’t see the values of the tiles they select.

Download Source


Next Tutorial →

Showing tiles once selected

← Previous Tutorial

Turning tile into clickable buttons