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.

Creation of a String Avoider game using Stencyl and image API

Emanuele Feronato Flash, Game design, Stencyl

I am quite impressed by Stencyl 3.1 image API.

Some days ago I showed you how to create a destructible terrain with this API, now it’s time to see something new, what about a String Avoider game?

I am a big fan of string avoider game, since 2007 when I released the first String Avoider prototype made with AS2. Then I made it with AS3, Starling, Corona SDK and I also made a game out of this concept: Stringy.

Now, let’s make the same thing with Stencyl.

This is what we are going to create:

Move the mouse to make the string follow it, and don’t touch the maze.

Everything will be really simple, as the prototype requires only one scene and one behavior attached to it. The scene itself has two events, Created and Drawing.

Let’s have a look at them:


This is executed once the scene is crated, I am attaching the image and initizalize variables and stuff. The behavior is fully commented, refer to the original string avoider post for a more in-depth look at the logic behind it


This is executed at each frame, and it represents the core of the game. Here we just use some trigonometry to simulate a string movement and use the image API to check for collisions

And that’s it, I would like to port it on a mobile devices to test the performances, it’s just a matter of some trigonometry operations so I think the most CPU consuming task should be the string drawing, I will let you know, meanwhile download the project file.

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 2

  1. SadiQ

    How about adding a background texture and a mask to reveal it where the string would be?
    Wouldn´t it be faster than drawing a line?

  2. Pingback: HTML5 String Avoider game made with Phaser - Emanuele Feronato

Leave a Reply

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