HTML5 prototype of iOS hit “Hero Slide” made with Phaser – adding explosions when matching bombs

The Hero Slide series continue, with another important feature to add and some code optimization.

Let’s see what you learned in steps 1 and 2:

* Initialize the game
* Place random tiles on the map
* Move tiles with WASD keys
* Add animation to tile creation and movement
* Match tiles

Now I optimized a bit the code because it was a bit redundant, using an universal function to move the tiles rather than writing distinct code for each direction, and added the capability of removing tiles adjacent to a match when you match bombs. I used an array called detonations to save all tiles we will detonate – it could be more than one if you match more than two bombs.

First, have a look at the commented code:

And now let’s play the game:

Move tiles with WASD keys and try to match two bombs – focus the canvas first.

There is still a lot to do with animations, since all events run on their own and the result is a bit messy, and this is what we are going to do in next step, as well as handling swipe movement. At that time, the prototype will be complete and we will only have to add gameplay. Meanwhile, download the source code.