Google’s Pacman Doodle – Reverse Engineering 101

Google’s homepage today (May 21, 2010) has a Pacman doodle – and the interesting thing is: its playable! And is Google’s first ever playable doodle!
Being a geek, I decided to have a look at the source code to find out how Google had done it.

I didn’t reverse-engineer the entire code; I just wanted to get a general idea of how they had done it … it seems to me that Google, after all, has extremely concise and efficient code to solve a lot of their problems.
So, first of all they have a

element that contains the playable area:

view source

print?

01	<div id=lga>

02	<a href="/search?q=PAC-MAN+30th+Anniversary&ct=pacman10-hp&oi=ddle" id="dlink">

03

a>

04	<div id=logo style="width:554px;height:186px;background:black url(logos/pacman10-hp.png) 0 0 no-repeat;position:relative;margin-bottom:9px" title="PAC-MAN's 30th Birthday! Doodle with PAC-MAN™ & ©1980 NAMCO BANDAI Games Inc.">

05	<div id="logo-l" style="width:200px;height:2px;left:177px;top:157px;background:#990;position:absolute;display:none;overflow:hidden">

06	<div id="logo-b" style="position:absolute;left:0;background:#ff0;height:8px;width:0">

07

div>

08

div>

09

div>

10

...

11

div>

And then there is their magic script:

view source

print?

01

What it seems to be doing is the following:

• Sets the CSS styles and properties for the various playable HTML elements.
• Loads the Pacman Javascript code : at http://www.google.com/logos/js/pacman10-hp.2.js
  (note: this link was valid when I loaded it on May 21, 2010, the day of the doodle, but might be removed later. Its up to Google, and I don’t want to store an offline copy for legal and other reasons.)
• Once the game is completed, redirects to the link in the element, which is basically a search for the phrase “PAC-MAN 30th Anniversary”.
• Responds to the “Insert Coin” button press to restart the game.

In Google style: really neat and efficient!
I used two online resources to format Google’s HTML and Javascript code better: