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 The Impossible Line – Final prototype

Emanuele Feronato Actionscript 3, Flash, Game design, iOS

As promised, here is the final prototype of The Impossible Line game.

In first step I showed you how to draw following mouse movement.

In second step I showed you how to create the collision radar.

In this big update I am introducing the remaining features:

* Goal: you now have to reach the green circle at the right of the stage.

* Death: happens when you hit a wall.

* Light powerup: in the original game you activate it with an icon, in this version you have to touch it to activate it. I am using the same principle seen in the second step to create the radar, together with some gradient fill to achieve quite the same effect you can see in the original game.

* Replay: once you win or lose the game, you can see the replay of your action. This is an amazing feature which can be done just recording player position at every frame by storing it into a vector, then moving the player according to vector values.

To make everything fit into a quite small and still readable full commented script, I removed some basic features introduce at step 1 such as drawing and rotating.

You should be able to add them by yourself in a matter of seconds. Here is the script:

And this is the result:

Move the white circle to the green circle avoiding white walls and looking at the red radar. Get the yellow circle to turn on the light. Refresh once you win or die.

Download the source code. Next time, I am going to show you how to port it to iPad using Starling.

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 4

  1. Adam Dickinson

    Dear Emanuele Feronato,

    please do not show people how to copy our game and then port to ipad…it’s not nice.
    Instead please show them how to make original games.
    many thanks

    Adam (production Director Mi)

  2. Nix

    Emanuele can you make flash as3 level editor tutorials?
    Why? It will be unique tutorial, I cant find any as3 level editor tutorials, there are a few source code for basic level editor but not tuts, its alomost useless.
    Why level editor?
    Look it this website
    This guy created only two flash games with level editor, only 2, and sometimes there are 250 users online. His website is better than most other flash website with hundrets flash games.

  3. Victoria

    Wow! Thank you for such detailed step-by-step tutorial! It’s very useful for all starting game developers who want to develop their own HTML5 game! Wish there were more such resources when I started

Leave a Reply

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