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
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
Do you know how to view the page source code with a debugger? In Google Chrome, just hit F12. Open up the debugger and you can see the files. You will notice a JavaScript file. You can make it more readable by cleaning it up, but it will be compressed variable names.
来源：https://stackoverflow.com/questions/11907854/google-interactive-doodle