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 “Down the Mountain” prototype made with Phaser updated: adding a player character, recycling assets and getting rid of arrays

Emanuele Feronato Game design, HTML5, Javascript, Phaser

Here we go with another step in Down the Mountain series, introducing three new features:

1) A player character. This time you control a real (fake) 3D character going down the mountain. Being some kind of isometric game using hexagon rather than a real 3D game, we can’t simply flip the sprite when we move to the left or to the right, because of the source of light. I needed to create two frames, one for the character facing left, one for the character facing right.

2) I am recycling assets rather than destroying old hexagons and creating new ones. Now hexagons which disappear from the top are simply moved to the bottom. This way the game does not need to create any more sprites other than the ones already in the game at the moment it starts. This will allow us to save memory and CPU, especially when dealing with mobile devices.

3) The code does not rely anymore on arrays to save the game field. Although this is not a killer improvement, it will make you easier to port the game into other language or frameworks.

Let’s have a look at the game:

Tap or click on the left or on the right half of the canvas to move the player down left/right.

The source code is still a bit in need to be otpimized, so it does not have comments yet, but it’s not that hard to understand:

Next time I’ll introduce some obstacles and start commenting the code, 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

Leave a Reply

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