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.

“Mike Dangers” HTML5 game engine made with Phaser and ARCADE physics – adding diamonds and real object pooling

Emanuele Feronato Game design, HTML5, Javascript, Phaser

Did you enjoy the first step of Mike Dangers series? There still a lot to do, so I am adding another important feature: diamonds.

Mike loves to collect diamonds as they are the in-game currency you can use to unlock new characters. So here we go with some diamonds to collect:

Just tap or click to make the player jump. Try to climb the ladders and collect diamonds. If you have a mobile device, you can play directly at this link.

But the most interesting thing happens when you open the console:

Everything related to diamonds and object pooling is logged in real time in the console. This is basically how it works:

* Each floor has a certain chance to have a diamond, that is not all floors will have a diamond.

* That said, at the beginning of the game we do not have a diamond instance for each floor istance, and that’s fine

* Diamonds placed in the game are stored in an array

* Each time the player collects a diamond or leaves a diamond on a disappearing floor, we remove the diamond from the in-game diamond array and place it into a diamond pool array

* When we need a new diamond, we first look into the diamond pool array. If we find it, we simply revive it, removing it from the pool array and placing it once again in the in-game array.

* If we can’t find a diamond in the diamond pool array, in this only case we generate a new diamond instance.

It may seem too complicated to handle diamonds in this way, as all in all we only have a few of them, but once you’ll add diamonds, spikes, boulders, idols, arrows and so on you will understand how critical is to create as few sprites as we can.

Also, we never destroy and recreate diamonds, we just kill and revive them, as you can see from the script:

In Phaser, when you kill a sprite, you sets its alive, exists and visible properties to false. When you revive it you bring it back to life with its alive, exists and visible properties all set to true.

Next time we will add deadly spikes, 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.

Comments 1

  1. mc

    There’s a bug, where some floors in the upper levels doesn’t have a ladder, so you’re get stucked on that floor

Leave a Reply

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