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
Resources:
List of images/audio/sprites that are used in the doodle
1. Static Image
This static image loads by default on all the browsers.If the HTML5 is not supported then it will be remain as is.
2.Image Sprite
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.
Sprite coordinates should be defined in the JavaScript
3.Audio
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.
4.HTML5 canvas
The entire doodle is placed in the HTML5 canvas container and updated dynamically using javascript functions.The first step in creating a html5 canvas is to get the application context
html:
<canvas id="hplogoc" width="662" height="224" style="cursor: default;"></canvas>
Javascript:
a= document.getElementById("hplogoc");
a.getContext && ($ = a.getContext("2d"));
Some Basic concepts that help you in understanding better.
This is the JavaScript event that is triggered if all the required data for audio and video files are loaded in the browser.
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.
This is a conditional statement used in javascript to execute the program based on the conditon
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.
Pinata Movement
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.
Scoring Categories
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
Button transitions
Also Read
How google creates interactive doodles
Google first world’s fair magnifying glass doodle-how did they do ?
Google dancing animation doodle- How did they do
