“String Avoider” HTML5 game prototype updated: adding scissors powerup

I was recreating some levels of the original String Avoider game when something on level one captured my attention: it’s a little scissor icon I always avoided because I thought it was a deadly obstacle to avoid, but for some reason today I hit it and discovered collecting scissors does not kill you but shorten the string.

This means, it’s a powerup. So let’s add this kind of powerup to the game.

First, I need a new icon to be added to my sprite sheet file which now it’s called icons.png.

Here it is:

Now I am ready to place the new icon on the game, check for collision when the string moves, and shorten the string by actually deleting the second half of the array of points which forms the string.

Have a 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. Make your string touch an obstacle or reach the end and the game will restart in two seconds. Get the scissors powerup and the string will shorten.

If you have a mobile device, play the game directly at this link.

The code is very easy and the few lines added have been highlighted to make them even more clear:

And now you are able to add scissors powerup. Next step, time to create levels, meanwhile download the source code.