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 game engine behind “Mike Dangers” made in a few lines of code with Phaser and ARCADE physics

Emanuele Feronato Game design, HTML5, Javascript, Phaser

Did you play Mike Dangers by Henrique Silva? It’s also available on Google Play.

It’s an endless climber heavily influenced by old Commodore 64 glory Rick Dangerous.

mikedanger

All you have to do is climb your way to the sky, ladder after ladder, avoiding spikes, traps and monsters while collecting diamonds and idols.

Playing a bit with Phaser and ARCADE physics, I was able to replicate the main engine, as you can see from this prototype:

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

Despite the few lines of code – a bit more than 150 – I was able to add these features:

* Fake endless runner feeling. You aren’t “climbing”, I just tween the game then reposition it. Remember endless runners aren’t actually “endless”, I wrote an entire book about it.

* Object Pooling collection to use only a few sprites and only two tweens. If you aren’t familiar with object pooling, check this post.

* ARCADE physics managemetn and collision handling

* Eight different variables to play with to adjust gameplay

This is why Phaser is so awesome.

This is the source code of the first prototype, I have to add diamonds and enemies, then the game will be uploaded with line by line comments both here and on Learn Lazer. Anyway, the code is very simple and split into functions:

Next time I’ll add diamonds and enemies, 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 3

  1. Björn Ritzl

    Thank you for sharing yet another game de-make! I really enjoy reading your blog posts and it’s always nice to learn a little bit more about Phaser and other game engines and learn what can be done with them. I work with a cross platform game engine called Defold and decided to give it a try myself and implement the same Mike Dangers mechanics in Defold. My version can be found here: https://github.com/britzl/publicexamples/tree/master/examples/mike_dangers with an HTML5 export here: http://britzl.github.io/publicexamples/mike_dangers/index.html

    1. Post
      Author

Leave a Reply

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