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.

Create a HTML5 game like Space is Key using Phaser, tweens and ARCADE physics – step 4: adding background and colors

Emanuele Feronato Game design, HTML5, Javascript, Phaser

So we have our Space is Key game buikt with Phaser 2.6.2 though three steps: first we created the floors and make the player run and jump, then we added deadly obstacles to be avoided as well as some level design concepts and in 3rd step we made the player die with a particle explosion when the square hits an obstacle.

Now we are adding colors to the game as well as backgrounds. And guess what, we’ll make it while continuing to use just the same graphic resource. I also added a couple of new floors:

Click or tap to jump, now each floor has its own randomly picked colors thanks to removeRandomItem method, you can find a full list of Phaser array utilities in the post understanding Phaser array utilities using ArrayUtils class, have a look at it if you didn’t already, it’s full of useful information.

The commented source code with the new lines highlighted is here:

There is still something to do, but that’s all at the moment, download the source code of the entire project and try to create your own levels.

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 *