Setting up the game field

On Jul 11, 2017 11:21 am, by phaserjs

Do you remember we are going to build a 4 rows x 5 columns game field? Let’s place some tiles on the table. For the same reason that we declared tileSize variable, that is to have all main game settings assigned only once, we are going to create three new variables.

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

var tileSize = 80;

var numRows = 4;

var numCols = 5;

var tileSpacing = 10;

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

Let’s see the meaning of these new variables:

numRows is the number of rows to be placed.
numCols is the number of columns to be placed.
tileSpacing is the distance between two contiguous tiles, in pixels.

We don’t want to have all tiles to be placed next to each other and that’s why we need to put some empty space among them: although it does not affect game play, it will make our game look better. You will spend a lot of time making your games look better, so this is definitively a good habit to be used to.

Now it’s time to change create function once again, to add a new line:

create: function() {
    this.placeTiles();
}

create: function() {

this.placeTiles();

}

Here you will see we can also define our own custom functions. Actually, your average programming day will be full of creating custom functions. This is the first custom function we created: it’s called placeTiles , and will be
used to place all game tiles.

In JavaScript, this always refers to the owner of the function we’re executing, or rather, to the object that a function is a method of.

Using this, we have to write placeTiles function as a method of playGame object. Remember, functions inside objects are called methods. Our function declaration will be placed after create method, just like we wrote create after preload a few minutes ago.

create: function() {
    this.placeTiles();
},

placeTiles: function() {
    // function code goes here
}

create: function() {

this.placeTiles();

placeTiles: function() {

// function code goes here

}

Here is our placeTiles function created. It still does nothing because there’s no code to be executed inside, just a comment.

In a line of code, everything after // is considered a comment and is not executed by JavaScript. Use comments to keep your source code readable.

Also, remember to separate the methods inside an object with a comma, or you will get an error. Finally we can write the code inside placeTiles to add the tiles on the stage:

placeTiles: function() {
    for(var i = 0; i < numCols; i++) {
        for(var j = 0; j < numRows; j++) {
            game.add.image(i * (tileSize + tileSpacing), j * (tileSize +
            tileSpacing), "tiles");
        }
    }
}

placeTiles: function() {

for(var i = 0; i < numCols; i++) {

for(var j = 0; j < numRows; j++) {

game.add.image(i * (tileSize + tileSpacing), j * (tileSize +

tileSpacing), "tiles");

}

There’s a lot of new stuff here, so let’s start from the result. Run the game, and that’s what you will see:

Now we have all tiles placed in a 4 rows x 5 column grid. That’s exactly what we wanted. Now let’s have a look how we made it possible, analyzing placeTiles content line by line:

for(var i = 0; i < numCols; i++) {
    ...
}

for(var i = 0; i < numCols; i++) {

...

}

This is the first time you encounter a loop, in this case a for loop. Loops can execute a block of code – remember, everything included between curly brackets a given number of times.

The for loop is executed as long as a specified condition is satisfied.

for loops are handy, if you want to run the same code over and over again, each time with a different value. In this example the value which changes is that of variable i , ranging from zero to the greatest integer number smaller than numCols – that is the number of columns in the stage – increasing its value by one at each loop iteration.

How can I say that? Let’s analyze the syntax of a for loop:

for (start action; condition; recurring action) {
    code block to be executed
}

for (start action; condition; recurring action) {

code block to be executed

}

start action is executed only once before the loop starts, just like it was on the previous line.
condition defines the condition for running the loop. The loop will be executed as long as the condition is satisfied.
recurring action is executed each time after the loop has been executed.

So in our case the start action is setting i variable to zero. The condition is satisfied until i is less than numCols. The recurring action is adding 1 to i at the end of each iteration. Inside the loop we just analyzed, we have another loop:

for(var j = 0; j < numRows; j++) {
    ...
}

for(var j = 0; j < numRows; j++) {

...

}

This works according to the same concept seen before, it just iterates through rows rather than columns and uses variable j . Once for loops have been explained, we can jump to the core of this step, that is the line which places the tiles:

game.add.image(i * (tileSize + tileSpacing), j * (tileSize + tileSpacing), "tiles");

1	game.add.image(i * (tileSize + tileSpacing), j * (tileSize + tileSpacing), "tiles");

You already saw how to place images with add.image , the concept does not change, it’s just we place each image in a different position according to i and j values, which as you should already know change at each loop iteration.

At the end of both loops, we will have all the tiles correctly placed on the screen. Anyway, there is a better way to place tiles: if you look how we placed the tiles, you will see the upper left tile is placed next to the upper left corner of the stage. This is not an error, but the board does not look good as it’s not centered in the stage. That’s what we are going to do now.