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 prototype of mobile hit “Flipping Legend” with top down view made with Phaser

Emanuele Feronato Game design, HTML5, Javascript, Phaser

Did you play Flipping Legend by Hiding Spot Games and NoodleCake Studio?

From the 5 stars TouchArcade review: “Flipping Legend has you playing as one of several character types who have the ability to flip diagonally across the world, much like a bishop on a chess board. So, you can’t hit anything right in front of you, necessarily. You have to be constantly thinking in diagonals, trying to string together jumps, because your health constantly decreases when you’re not bopping enemies”.

We are going to try to build something similar using HTML5 with Phaser. We’ll need to scale down the gane to a two-dimensional game, loosing some visual appeal but allowing to be played in portrait mode, which is an interesting feature.

As all infinite runners, there’s nothing “infinite” and the player won’t move, but it’s the entire game to move towards the player, giving the idea of the player running through an infinite world.

Also, we need two player sprites, as player can disappear from one side of the path appearing on the opposite side of the path, so in this case the “I am moving out” and the “I am moving in” effects are made each one with its own sprite and tween.

Last but not least, tweens and tiles are reused and once the game starts there’s no need to create new assets.

Let’s have a look at the game:

Click or tap on the left/right half of the canvas to move the hero accordingly. If you have a mobile device, play it directly from this link.

And this is the completely commentd source code, pay attention at the way I am using two sprites when the hero wraps around the path, and how I manage multiple resolutions:

Next time I will use the vertical black bars to place the GUI, 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 *