Google Interactive Doodle

Question

Does anybody know how the Google Interactive Doodles for Olympics work. http://www.google.com/doodles/soccer-2012

I find that the Div is hplogo and the style is right above it, like:

     #hplogo{background:url(/logos/2012/soccer12-hp.png)....

I can't figure out how the score is calculated; How the objects are moved, etc. Is it a readable JS file? Thanks in advance.

Sincerely, A fellow developer

Answer 1

Some doodles use Canvas for showing the animations. Different frames, taken from a loaded image are drawn using a timer in javascript.

Some use CSS property background-image. CSS propertybackground-position is changed using a javascript timer to create animation.

Animations are made interactive using more javascript.

e.g: http://www.google.com/logos/2012/hurdles12-hp-sprite.png, http://www.google.com/logos/2012/basketball12-hp-anim.png