HTML5 prototype of iOS hit “Hero Slide” made with Phaser – adding animations and matching tiles

Did you enjoy the first step of Hero Slide prototype made with Phaser?

Time to proceed to next step, you already know how to:

* Initialize the game
* Place random tiles on the map
* Move tiles with WASD keys

And now you’ll see these new features:

* Add animation to tile creation and movement
* Match tiles

The game matches two tiles when the player tries to move two adjacent tiles of the same kind in a direction but they both can’t move, in this case similar tiles will slide one over the other, popping one slide, freeing the game field and allowing you to keep playing. I really suck when it’s time to explain game mechanics, so you’d better have a look at the original iOS game.

Now, play the game with WASD key – focus the canvas first.

As you can see, animations make the game look smoother and you can match tiles.

And this is the commented source code, with new lines highlighted:

That’s all at the moment, during next step I will show you how to make bombs explode and how to control game with swipe, meanwhile download the source code.