Create HTML5 Vertical Endless Runner cross platform games

Using Phaser framework and other FREE software
Endless runner games are gaining more and more popularity and they are really easy to code.
I will take you by hand through the creation of a complete HTML5 vertical endless runner cross platform game with a lot of features and room for customization.
100 pages + 31 source code examples with a free update to come in a few days.

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

Emanuele Feronato Game design, HTML5, Javascript, Phaser

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.

Stay up to date
Follow me on the social networks and never miss a post.

Official Emanuele Feronato Facebook page

Official Emanuele Feronato Twitter account

From null to full HTML5 cross platform game

I will take you by hand from the bare bones of JavaScript programming through the creation of a full cross platform HTML5 game, with detailed explainations and source code.

If you don't know where to start, then From null to full HTML5 cross platform game is the book for you.

Leave a Reply

Your email address will not be published. Required fields are marked *