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.

[Update, 5/22/2010: for those looking for an offline, downloadable version of the Google Doodle, you can find it at http://github.com/macek/google_pacman . Thanks to "tom" for listing it in the comments below.]

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 <div> element that contains the playable area:

<div id=lga>
  <a href="/search?q=PAC-MAN+30th+Anniversary&ct=pacman10-hp&oi=ddle" id="dlink">
  </a>
  <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.">
    <div id="logo-l" style="width:200px;height:2px;left:177px;top:157px;background:#990;position:absolute;display:none;overflow:hidden">
      <div id="logo-b" style="position:absolute;left:0;background:#ff0;height:8px;width:0">
      </div>
    </div>
  </div>
  ...
</div>

And then there is their magic script:

<script>
    google.pml = function() {
        function d(a) {
            if (!google.pml_installed) {
                google.pml_installed = true;
                if (!a) {
                    document.getElementById("logo").style.background = "black";
                    window.setTimeout(function() {
                        var b = document.getElementById("logo-l");
                        if (b) b.style.display = "block"
                    }, 400)
                }
                a = document.createElement("script");
                a.type = "text/javascript";
                a.src = "logos/js/pacman10-hp.2.js";
                google.dom.append(a)
            }
        }
        function e() {
            if (document.f && document.f.btnI) document.f.btnI.onclick = function() {
                typeof google.pacman != "undefined" ? google.pacman.insertCoin() : d(false);
                return false
            }
        }
        if (!google.pml_loaded) {
            google.pml_loaded = true;
            window.setTimeout(function() {
                document.f && document.f.q && document.f.q.value == "" && d(true)
            }, 1E4);
            e();
            google.rein && google.rein.push(e);
            google.dstr && google.dstr.push(function() {
                google.pacman && google.pacman.destroy();
                if (google.pml_installed) {
                    for (var a = (document.getElementById("xjsc") || document.body).getElementsByTagName("script"), b = 0, c; c = a[b++];) c.src.indexOf("/logos/js") != -1 && google.dom.remove(c);
                    google.pml_installed = false
                }
            });
            google.pacManQuery = function() {
                google.nav(document.getElementById("dlink").href)
            }
        }
    };
</script>

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 <a id=”dlink”> 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:

• Cool HTML formatter
• Online Javascript beautifier