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.

“String Avoider” HTML5 game reinvented with mobile phones in mind

Emanuele Feronato Game design, HTML5, Javascript, Phaser

If you liked the post “String Avoider” HTML5 game updated to Phaser 2.6.2 and want to continue in the creation of your own string avoider game, there is something more to keep in mind if you want your game to work well on mobile devices.

First, we have to fix a graphic glitch due to Phaser (and PIXI) lineTo method, which causes a graphic error when the angle between two segments drawn with lineTo method is too close to 180 degrees.

This is what I mean:

There is really no way to avoid this while you use a series of lineTo methods because Phaser (and PIXI) does not feature caps and joints management in lineStyle like good old AS3 did.

To fix this glitch, we’ll have to reposition the graphic pen each time we use a lineTo method, you will find this fix at line 201 of the source code.

Then we added a start and an end where the string starts and must stop, but above all there was an important change in the way the string is moved.

If you play the game on mobile, with your string running under your finger, you won’t be able to see the position of your string head because it’s covered by your finger. This would affect gameplay in a very negative way, so I changed the way it works: if you touch the canvas in any position and move your mouse/finger, the string will move the same way following your input movement, but you will be able to see your string head because if you are a smart player you won’t be covering it with your finger.

Look at the game:

Touch the canvas, and “start” circle will disappear revealing the string, drag your finger anywhere and see how the string follows your finger movements. Touch an obstacle or reach the end and the game will restart in two seconds.

This is way better, isn’t it? You can also play directly on your mobile device from this link.

And obviously the graphic glitch disappeared. Here is the full commented source code:

Next time I will create some levels, meanwhile 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.

Leave a Reply

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