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 prototype of The Moops – Combos of Joy – Step 2

Emanuele Feronato Actionscript 3, Box2D, Flash, Game design

Here we are with the 2nd part of the tutorial to create a game like The Moops. The guys at Heavy Boat, the studio behind the game, are following the tutorial too, so I hope I’ll try to make something really similar to their game.

In the first part I showed you how to fire the ball and hit squares, now it’s time to remove hit squares after a certain amount of time. There’s nothing new as we only have to work on contact listeners as explained in this post.

Let’s see the main class:

Let’s examine lines 14 and 16:

First I need to create a new custom contact listener, then I have to bind it to the world to use it in the simulation.

At this time we need to add some custom properties to boxes we are creating:

From lines 58 to 61 I’m attaching an Object to the box, whose properties are the name, the stamina and a Boolean variable called hit.

Now things will work this way: if a box is hit by the ball or by another box, that is if the box collides with any other body in the stage, hit is set to true and if hit is true its stamina will be decreased at every frame. Once the stamina reaches zero, the box is removed.

This routine will be placed in update function:

Lines 90-95 deal with stamina.

And that’s enough for main class, now we just have to extend the built in b2ContactListener
in a file called customContactListener.as.

The new class just set hit property to true if a box gets hit.

This is the result:

Mouse click to shoot the ball, try to hit a box and make the box hit more boxes, and see what happens.

Download the source code. Next time, we’ll add some graphics.

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 7

  1. Chris Moeller

    It’s looking really cool! Plays a lot like their game!
    Weird thing happens when I scroll up/down to the demo on the page- all of a sudden there is a huge amount of blocks in the center calling down for a second before being removed, but they are removed pretty fast.

  2. Arun K

    @Chris Moeller,

    I believe that behavior is something that is due the the flash player (versions from 10.1). When the embedded flash file is not in focus, i.e. the flash file is not in displayed right now on the screen and is somewhere else on the webpage, the flash player automatically reduces the frame rate (to about 2 FPS) to reduce the CPU cycles consumed by it.

  3. DogGonMad

    To continue Arun K’s explanation, Flash does not render the frame when it is not in view, while timer events continue to fire, this causes the build-up.

  4. 2zo

    Thank you for this tutorial. I’m really interested in the third step. Are you going to publish it any time soon?

    Thanks

Leave a Reply

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