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

Mahyar Ebadi
  • 143
  • 1
  • 6
  • 2
    a more important question: How many saves do you need to get gold? – Colin D Aug 10 '12 at 19:32
  • Haha great question. I wasn't able to :) – Mahyar Ebadi Aug 12 '12 at 07:15
  • Check my answer to a similar question [How to make HTML5 games like Google Doodle's Doctor Who?](http://stackoverflow.com/questions/20136141/how-to-make-html5-games-like-google-doodles-doctor-who/20150126#20150126) – nmoliveira Nov 22 '13 at 16:52

2 Answers2

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.

Nick
  • 8,964
  • 4
  • 26
  • 37
epascarello
  • 204,599
  • 20
  • 195
  • 236
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

Diode
  • 24,570
  • 8
  • 40
  • 51
  • 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. – Mahyar Ebadi Aug 10 '12 at 19:30
  • You are welcome :) . Google doodles are really awesome. This one is the best I think - http://www.google.com/logos/2011/lespaul.html . It uses Canvas, other HTML elements and Audio. – Diode Aug 10 '12 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. – Mahyar Ebadi Aug 10 '12 at 20:23