HTML5 Drag and Match engine updated to Phaser 2.6.2 with masks and a lot of custom options

Here we go with another prototype updated to the last Phaser official release, 2.6.2.

After updating – and improving – Space is Key and String Avoider prototypes, now it’s time to update – and improve – the drag and match engine.

The improvement has been made over three main features:

* A mask has been added to hide tiles outside the game field, this is very important to grant the effect of a tile disappearing from a side of the board and appearing to the other side.

* A lot of custom options have been added, inside gameOptions global object. You can change several things such as tile size, board size and offset, as well as the number of different colors on the board

* All the code which handles something which moves – basically the tiles – has been placed inside update method which Phaser runs at each frame, to prevent strange flickering which appears in latest Phaser versions when you move sprites outside update method.

Now, it’s time to play:

I placed the board inside a way bigger canvas to show you how mask works, hiding the part of the sprites which are outside the board. Drag and move the tiles around the board.

If you have a mobile device, you can play directly fron this link.

And here we go with the completely commented source code:

There’s an upcoming book about this kind of tile games, so if you want to learn more you will have plenty of examples, meanwhile download the source code.