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

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.