Google’s 15th birthday was celebrated with a pinata themed doodle that showers chocolates when hit with a stick.Score is calculated based on the number of chocolates that fall from the pinata and you cannot hit more than 10 times.
Ok that was one awesome doodle and hours of hitting madness.Now back to business! How Google created this doodle and what logic was applied to obtain this effect? Lets Dig in.
Creating Google’s 15th birthday doodle
List of images/audio/sprites that are used in the doodle
This static image loads by default on all the browsers.If the HTML5 is not supported then it will be remain as is.
If the browser supports HTML5 you need to load the images dynamically using sprites.This will reduce the bandwidth as all the images are stitched into one single sprite.This can be cropped to fit the single image based on the needs.
A merry sound that loads in the background starts playing immediately after the “play” button is clicked.HTML5 audio is implemented here and it uses the audio file with extension .ogg and .mp3 depending on the compatibility. OGG file is a container for audio files that consumes less amount of bandwidth and hence used instead of mp3 file format.
Two kinds of files are available in the page.One that is played on loop and another one when the stick hits the pinata.Click both the files to play.
<canvas id="hplogoc" width="662" height="224" style="cursor: default;"></canvas>
a= document.getElementById("hplogoc"); a.getContext && ($ = a.getContext("2d"));
Some Basic concepts that help you in understanding better.
After the background music starts playing , if you switch to another tab you can note that music stops playing.This is because of requestanimation frame which stops the process if the user is not viewing it currently.This enables better browser performance and efficiency.
This HTML5 feature enables browser to select the image part from the sprite and load them into the visible frame.
In this example if the variable x is set as 10 if it is not zero.
Actual action starts when the user presses play button.The audio file starts playing and the browser is now waiting for the event to trigger.
As you can see pressing space bar will wave the stick at the pinata.browser waits for the space button event to trigger by looking for the keycode number.
The keycode number for space bar is 32.
The hanging pinata moves like a pendulum using the canvas drawing
Once the stick hits the pinata the position is calculated at that point of time and score is increased based on the place of impact.
In the end when the user completes all the 10 tries a popup image will appear based on the score.
Similarly the scores can be shared in google+ using the score specific image