How to create an HTML5 swap and match-3 game engine like the one used in Spellfall iOS game using Phaser

You already know there is an universe full of match-3 games out there, and each one has its way to combine and match symbols in order to do something the game requires.

Normally, at each move – no matter how you actually move – you should do at least a match.

Moreover, behind that “no matter how you actually move”, there always is a rule swap tiles.

This is not the case of Spellfall from Backflip Studios where you can swap any tile you want with any other tile you want, no matter where they are, and no matter if you make a match.

Definitively the simplest way to approach a match-3 game although the game has a lot of other features which make it quite difficult.

So, what I did today was writing a quick Phaser HTML5 demo of this kind of swapping tiles just like in the original game.

This is what you are going to create, also playable from this link:

Just drag a tile onto another tile to swap them.

There isn’t that much to say about the code, as it is even simpler than the HTML5 Drag and Match engine made with Phaser I published last month.

Here I am just using tweens and group swapping to keep some tiles always in front of the stage.

The fully commented source code is here:

And obviously you can download the entire project.

I will add some gameplay to this prototype this week, stay tuned.