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.

Develop a Flash game like Angry Birds using Box2D – predictive trajectory line

Emanuele Feronato Actionscript 3, Box2D, Flash, Game design

This should have been the last step of the Angry Birds series, but I got an interesting request from a reader and I wanted to show you how to do it.

We will see how to create a predictive trajectory line. Very useful for beginner and unskilled players.

This is what you’ll get: I added the predictive trajectory line to the script published on step 1 to reduce the total amount of code displayed:

Drag and release the bird with the mouse.

Where’s the magic? Let’s look at the source code:

When I drag the bird with birdMoved function (lines 49-60), at the end of such function I call another function called fakeRelease which will handle the trajectory line.

fakeRelease just adds a “fake” bird to the world and give it the linear velocity as if the player fired it, and you can see lines 62-78 are just a copy/paste of lines 95-111.

The difference is I simulate with a loop (line 82) a series of world steps and draw a circle in the position the bird would be at every step. The core of the function is at line 84.

And now you have the predictive trajectory line too. 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 39

  1. ami

    nice code, i love the simple of your explain , i Learning a lot from your blog.
    but i have a one note, you must put a refresh button i the swf, It’s annoying to refresh the page every time that you want to See the example.

  2. tambi jalouqa

    Looks amazing,

    But how are you incrementing the step through the same world without consequences. What if there was already some physics on the screen. do we have to create a new world?

  3. Danny

    An interesting example, since the other objects will actually be asleep while you loop the world step shouldn’t be too much of a problem.

    Although if you have some other stuff going on an identically set up world would fix that. Nice

  4. Digitalic

    I think you have done a good job of replicating the features of Angry Birds; it’s been good fun watching this tutorial series develop.

    I have a suggestion for a refinement that I think would be great for beginners to AS3. How about showing the catapult elastic? I have noticed that in Angry Birds, the elastic gets thinner as you stretch it and I think this would be a great learning opportunity without too much coding.

    Also, although I do appreciate that your code is for prototype purposes, I think that, for the benefit of beginners, it would be a good idea to avoid copy and pasting code into multiple functions as you have done with the predictive trajectory code. This could be placed in a function which reduces all sorts of ‘risks’ related to cut and paste and would set a good example to beginners.

  5. Anonymous

    I’m getting this error while implementing it with the other code :

    TypeError: Error #1010: A term is undefined and has no properties.
    at customContactListener/PostSolve()
    at Box2D.Dynamics::b2Island/Report()
    at Box2D.Dynamics::b2Island/SolveTOI()
    at Box2D.Dynamics::b2World/
    at Box2D.Dynamics::b2World/Step()
    at Main/fakeRelease()
    at Main/birdMoved()

    What might be wrong?

  6. George

    If you have other stuff moving in the Box2D world you should create a separate one for the trajectory… 150 world steps will mess up other bodies already in the world.
    Nice tutorial … I had already done a similar implementation but with 2 b2D worlds.

  7. Post
  8. Flex_Developer

    Hi, I am using your code in one application for touch mobile device. But this trajectory path drawing (fakeRelease()) is making touch movement of bird very slow. Commenting fakeRelease(),touch works normally. Can you please tell me what can be workaround for this?

  9. Pingback: How draw I draw Trajectory Line in Box2DWeb? | PHP Developer Resource

  10. Julien


    When you simulate the launch, you actually fast-forward the world.
    If there was other objects, they would have been fast-forwarded at the end of the fake launch.
    How do you get around that without creating another instance of the game?

  11. qurc

    Are there any options for calculating the trajectories of objects without creating physics objects and using world.step()? In the case where we using a multiple objects (and mobile device) all works very slowly:(

  12. CitrusNoob


    Nice tutorial, can you make this with CitrusEngine(with starling+Box2D)

    With box2d it’s ok but with Citrus I don’t know how we can do that


  13. Zach Foley

    Using world step to draw a predictive path won’t do. Because it will move all the other objects in the world too. Instead, just add up the vectors:

    var step:Number = 1 / 30;
    var position:b2Vec2 = new b2Vec2(dogsInPlay[0].art.x / WORLD_SCALE, dogsInPlay[0].art.y / WORLD_SCALE)
    var velocity:b2Vec2 = new b2Vec2(-launchStrengthMultiplier * Math.cos(launchAngle), -launchStrengthMultiplier * Math.sin(launchAngle))
    var gravity:b2Vec2 = new b2Vec2(0, world.GetGravity().y * step);

    var dotCount:int = 100;

    for (var i:int = 1; i <= dotCount; i++)

    position.x += velocity.x * step;
    position.y += velocity.y * step;
    position.y += gravity.y * step ;
    gravity.y += world.GetGravity().y * step;

    if (i % 5 == 0)

    trajectoryDots[i / 5].visible = true;
    trajectoryDots[i / 5].x = position.x * WORLD_SCALE;
    trajectoryDots[i / 5].y = position.y * WORLD_SCALE;
    trajectoryDots[i / 5].scaleX = ((i – dotCount) / dotCount);
    trajectoryDots[i / 5].scaleY = trajectoryDots[i / 5].scaleX;

Leave a Reply

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