Here it is: my entry for the HTML5 game contest held by wooga.
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.
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.