HTML5 game demo contest by Wooga: my entry

Here it is: my entry for the HTML5 game contest held by wooga.

The initiative by Wooga was great, combining a funny competition with a brilliant prize: hack a game, made only of web browsers technologies (HTML5, javascript, CSS, WebGL…), and we will give the winner one ticket to join the European Javascript Conference (, October 1-2 in Berlin, and up to 1000€ for trip and accomodation!

WOW! Impossible to give up the contest! Unfortunately I heard about it the day before deadline, while I was joining the onGameStart conference in Warsaw. No time to develop the next best seller game, but time enough to have fun and say I was here. 

So, do not expect a “World of Warcraft” like stuff. It is just a small, and maybe not so fun, puzzle game, where you have to memorize shape and colors of a retro looking alien (actually inspired by the old school original Space Invaders) while it is moving. Suddenly the alien will be remixed into an “alien multicolor salad”. You are call to glue together again the right alien’s pieces.

Technically speaking, everything is about classic DOM manipulation, except for the use of requestAnimationFrame, a relatively new API which has been thought to be the right way to implement an animation (or whatever interactive application) in javascript.

Due to rush (and actually a lack of knowledge on how to set the speed of the animation), I implemented it clumsily. I repeatedly make a dummy call to the animation API, incrementing a counter on each call, in order to activate my (re)drawing function only after a certain number of cycles. Something like the following:

Although this first solution seems to be easier, it loses a lot of the benefits you can derive from the use of requestAnimationFrame in a better and “frame aware” way.

Basically, you define the speed you desire, namely how many frames per second, using the time delta (in milliseconds) between “now” and last call you made to your requestAnimationFrame implementation. You thereafter use the resulting number to calculate how and when to update objects, leaving the browser the task to optimize execution by taking web application visibility and display’s refresh rate into account. Like in the following basic template:

See links in the references section below for further investigations.