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.

Basic Box2D rope

Emanuele Feronato Actionscript 3, Box2D, Flash

It’s time to create a rope with Box2d.

To start defining a rope, we’ll start from something similar: a chain. A chain is a series of two or more connected links. The smaller and closer the links, the more flexible the chain. So we can define a rope as a “perfect chain”, with infinite links.

In a Box2D simulation, ropes as we know them aren’t possible. But we can construct chains, and according to the number of links they can approximate a rope quite well.

Obviously, the higher the number of links, the more accurate the simulation, the slowest and CPU intensive the simulation.

I found 10 links are a good compromise between simulation and performance.

Every link is (guess what?) linked to the previous one with a revolute joint. Refer to Box2D joints: Revolute Joint if you need more information about revolute joints.

The core of the whole script is the link variable. I simply “save” the reference of the last chain placed on the stage and create the joint between the last chain placed and the one I am going to place.

So I’m having the first link with a joint with the ceiling, the second one with a joint on the first one, the third with a joint on the second and so on.

And this is the result:

Every object is draggable, except the ceiling.

Download the source code, Box2D library included, and enjoy.

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 27

  1. Yarden Refaeli

    how about the sweet old school game with the cup and the ball?

    A ball is connected to the bottom of a cup, and you need to play with the cup till the ball get inside it… I dunno if you know what I mean, the game can be found in many variations.


  2. Jjet42

    Hay why don’t you make a tutorial for storing user data on their machine? That way the game remebers where they left off or their personal settings. Maybe even remember how they play and become harder. I heard its easy they are called Flash Cookies or something like that.

  3. oliver_l1

    Hi Emanuele,

    this has nothing to do with box2d.when i enter your site i get a html script virus warning via antivir.

    Check your site!

  4. Matt

    Any suggestions for using movieclips as the rope segments. I’m trying to work them into the code but then nothing displays.

    Awesome class BTW.

  5. linto

    Hi Emanuele,

    I don’t know whether this is the right place to post this question.

    How will we implement an object whose one side is transparent ( objects hitting that side will pass through) and the other side is not (objects will bounce hitting that side). The scenario is implementation of a pipe through which a ball rolls… but objects hitting the outer side of the pipe should not bounce back….objects should move as if they are passing below/above that pipe..

    Thanks in advance

  6. Jaleel

    you have created lots of useful programs great. i would suggest you to create an menu for these programs so that we can quickly reach the desired one.

  7. Pingback: iPhone Dev » Rope Simulate with Cocos2d and Box2d

  8. ScanPlayGames


    I am working on a game and was in need of Box2D rope. Your sample is great here but it seems to be using an older build of Box2D where several of the above functions have been deprecated.

    If anyone wants to see a full, working source for this example using the latest Box2D for AS3, I posted the updated code here:
    click for rope

  9. harilalkm

    Hi, it’s great tutorial.
    I have a doubt . i need to change the position of the ceiling instead of rope?

    i have tried differnt method.. Am new Box2d ..

  10. Cocos2d

    Hi Emanuele, great work. I am trying to get a similar rope in Cocos2D Box2D. I don’t know what I am doing wrong. Can you please help me. Thanks in Advance!

  11. godslave

    Hi, I’m new with box2d and libgdx and i’m trying to build a path like in the Stick stunt biker game.At first I tried to do this with a strong rope with polygon shape using prismaticJoint and distance joint but it’s not working as i expected. then i tried to do with chainShape and failed again to make the path curve smooth for my bike.for bike i follow the tutorial “creation-of-a-box2d-car-with-10-customizable-parameters”.
    Any suggestion on how could i build the path.

  12. Pingback: Rope Simulation with Cocos2d and Box2d | iPhone Dev

  13. Pingback: libGDX: Hanging Rope [duplicate] | BlogoSfera

Leave a Reply

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