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.

The basics behind “wall jump” in platform games. HTML5 prototype made with Phaser and ARCADE physics

Emanuele Feronato Game design, HTML5, Javascript, Phaser

One nice feature I love to find in platform games is wall jump. It’s the ability to jump, hit a wall and jump again on the opposite direction. This ability is often used to let the player climb levels, jumping from wall to wall.

Thanks to Phaser and ARCADE physics, we can do it in just a few lines.

First, let’s have a look at the result: a simple autorunner with jump and wall jump abilities

Just tap or click to make the player jump. Every zone of the level is accessible thanks to wall jump. Try to jump while on a wall and see what happens. I made the level with Tiled Map Editor which is the best choice.

This is the level I exported in JSON:

It’s not that interesting but I am showing it to you because you will find some reference names – such as layer name – in the main code, which is fully commented:

That easy? Yes, that easy thanks to Phaser and ARCADE phyiscs. Do you have some platformer you would like to see deconstructed starting from this prototype? I do, and will show it to you next week. 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. Rory O’Kane

    This code has a bug – you can still jump off a wall after you slide off the wall and are touching nothing. You could avoid this problem by directly setting this.onWall to this.hero.body.blocked.right || this.hero.body.blocked.right instead of tangling it with the logic for being on the ground.

Leave a Reply

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