6

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

3

2 Answers 2

6

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

3
  • You're amazing! I had some experience with XNA and I was wondering if they are doing any updates to the picture or moving the body parts manually via JS. Thank you so much! This helps lots. Aug 10, 2012 at 19:30
  • You are welcome :) . Google doodles are really awesome. This one is the best I think - google.com/logos/2011/lespaul.html . It uses Canvas, other HTML elements and Audio.
    – Diode
    Aug 10, 2012 at 19:40
  • Woah that one is really cool :) I didn't know that audio could be used like that. Thanks a thon, I learned way more than I thought today. Aug 10, 2012 at 20:23
6

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.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.