Google Interactive Doodle

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

Answers:

Answer

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

Answer

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.