Creation of a match 3 game like Farm Heroes Saga using any language – Step 3: adding tiles to stage

Here we are with the 3rd step of the Farm Heroes Saga creation using any language. A brief recap:

In step 1 I showed you the variable and constants to use to create the game field, while in step 2 we discussed about the functions to use in order to populate the game field.

Now it’s time to see some action, and we are going to draw the game field using two popular HTML5 game frameworks, Phaser and Panda.

We are doing this with mobile development in mind, so we will create a 320×480 game which scales to fit the browser area.

Here it is what we are going to do:

Phaser 320×480 game scaled to 360×540 Panda 320×480 game scaled to 360×540

Since all game logic functions have already been defined, let’s jump straight to source code and see the interesting lines of both versions. Just keep in mind we will need three more constants:

TILESIZE: size of the tile, in pixels. We assume tiles have their registration point in the upper left corner

OFFSETX: horizontal distance from the upper left corner to the upper left corner of the first tile, in pixels

OFFSETY: vertical distance from the upper left corner to the upper left corner of the first tile, in pixels

We aare using the offsets to place our tiles anywhere on the game field. You may say I could create a layer and just position the layer with all tiles inside, but working with single offsets should assure more cross-language compatibility.

Source codes now:


Phaser version uses a single file for everything:

Lines 36-41: function drawLevel, which places items on the stage

Lines 43-47: configuring the game, setting its resolution and the functions to be called. At the moment onUpdate does not do anything, but we’ll find it useful next time

Lines 57-59: loading graphic assets

Lines 65-66: setting game scale mode


Panda needs to edit both config and game files.


Lines 5-8: defining game resolution and scaling


Lines 30-37: function drawLevel, which places items on the stage

Lines 46-48: loading graphic assets

The rest of both scripts are just plain JavaSCript functions I explained in step 2. Things will get interesting when we’ll start to add user interaction, selecting items to swap, but we’ll see it next time, meanwhile download the source code.

  • combo

    Perfect tutorial, thank you! :)

  • Pingback: Introducing Cocos2d-js adding it to the languages used to develop a Farm Heroes Saga prototype - Emanuele Feronato()

  • Mehmet

    Thanks a lot.
    We hope to see next part of the tutorial soon :)

  • Brook Monroe

    As a tutorial, not bad, but the JS really needs optimization. The variable i is global, rather than local, so it pollutes the global namespace and is vulnerable to unintended side-effects. There is too much recalculation of invariants–most (if not all) JS engines will not magically optimize that for you.

    (This advice intended more for budding game writers than as an admonishment for the tutorial writer. It’s a tutorial, not an exercise in efficient Javascript.)