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 Flash game like Space is Key with a lot of room for customization

Emanuele Feronato Actionscript 3, Flash, Game design

Did you ever play Space is Key by Christopher Jeffrey and its sequels?

It’s a quick one button game which can be used to learn some programming basics, so I am showing you this little prototype which allows a lot of customization such as player speed, jump height, jump rotation, number of floors and some minor features.

I am not using any physics engine because there’s no need in a game like this one, so let me show you the fully commented source code:

As you can see, I did not use any tween or special library, so the code can be easily ported in your preferred language.

And this is the result:

Try to jump with the mouse (yeah, no space here). No obstacles at the moment, I will introduce them in next step. If you are a fan of Space is Key series, you will notice I also fixed the jumping rotation when moving from right to left.

Edit: Got a mail from Chris, he told me « Also wanted to address the left/right jump that you ‘fixed’. It was actually designed and intended that way to do doing the ‘backflip’ instead of the ‘frontflip’ on some levels throws the player off and adds to the difficulty. »

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 6

  1. Pingback: Create a Flash game like Space is Key with a lot of room for customization | Adobe

  2. Hussein Tammam

    Hi Enamuele. I’m a very old fan of yours and really love your tutorials and I was wondering if you could do a tutorial on Ash framework. It’s a really good entity component system. Sadly though there are not many tutorials on it. I would be really grateful if you would check it out

  3. Pingback: Create an HTML5 game like Space is Key with a lot of room for customization - Emanuele Feronato

  4. Joshua Amoros

    Hello Mr. Feronato,

    do you have the TheSquare class, or is it a simple drawRect method to implement? (I tried using this source code and the TheSquare class is not found.)



Leave a Reply

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