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 terrain like the one in Tiny Wings with Flash and Box2D – adding more bumps

Emanuele Feronato Actionscript 3, Box2D, Flash, Game design

I want to show you an improved version of the Tiny Wings terrain you’ve already seen at Create a terrain like the one in Tiny Wings with Flash and Box2D – adding textures.

This time hills have more bumps and are more irregular, getting a little closer to the original look and feel.

I also placed a sphere you can drive with left and right arrow keys to move along the terrain, and my movieMonitor to show you the performance.

Move the ball with LEFT and RIGHT arrows.

This is the source code:

No need to download anything, simply copy and paste in any Tiny Wings source code you’ll find around the blog.

Net time, I’ll try to texture the hills with something decent.

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 19

  1. Chris

    The irregular hills are very cool, and look very nice.

    On a similar note:
    I was just playing one of those motorcycle games last night, where you try to keep it from flipping over and hitting the rider on the head as you try to get to the end of the level.

    Any idea how these games create their terrain? They’ve obviously been created by hand (vs programatically), but I’m not sure how they would draw it out, store the series of points, and create “solid” objects from it?

  2. Flopsie

    @Chris, yeah, I tried to make a similar game, but I don’t want a random generated terrain. As I’m not so familiar with box2D I gave up any attempts.. :/

  3. Rick

    Is AS3 Box2D not ready for iOS? I took your above code and simply set right=true (so it would start to run) and commented out the performance meter.

    It was very choppy on my iPad2

  4. Post
    Author
  5. Julian

    @Rick of cause it is. Check out Haxe (haxe.org) to compile as3 into a native iOS app. It runs very smooth then on android, iOS and webos.

  6. Scott

    @Chris Im not sure exactly how to make the bike part of it. But youtube AS3 sidescroller devnote has a good tut on this. So once you have this you would have to make the bike part. Which would not have be the same as the player. Each wheel would have to have controll.

  7. Chris

    Awesome, thanks Scott!

    It makes sense that a per-pixel test would probably be most straightforward, and actually work ;)

    I’ll have to test out if it is fast enough for what I need :D

  8. Papa

    Unfortunately the boris version of box2d has a nasty b2vec2 memory leak. The levels can’t be gigantic because of that.

  9. Pingback: Aymeric Lamboley » Create a game like Tiny Wings

  10. alex

    How did you move your Sphere sprite, I can only see the code below:
    if (left) {
    theSphere.ApplyTorque(-0.5);
    }
    if (right) {
    theSphere.ApplyTorque(0.5);
    }

Leave a Reply

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