Google’s Pacman Doodle – Reverse Engineering 101

21 May

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:

Advertisements

77 Responses to “Google’s Pacman Doodle – Reverse Engineering 101”

  1. Snoppies May 21, 2010 at 12:26 pm #

    if you press Insert Coin a second time, you get Ms. Pacman joining Pacman on the board, controllable by the WASD keys!

  2. flash May 21, 2010 at 12:38 pm #

    looks to me like the audio is via flash

  3. yoshi May 21, 2010 at 1:23 pm #

    i am have a tuff time getting it to run offline. I am only doing this to see how it works but no luck once i am done i will be removing the files

    heres how i have it set up

    pacman “folder”

    logo.html “code inside from the home page”

    logos “folder”
    —-pacman10-hp.png
    —-pacman10-hp-sprite.png

    —-swf “folder”
    —-pacman10-hp-sound.sw

    —-js
    —-pacman10-hp.2.js
    i must be missing something in the code or i am not understanding how it works anyhelp would be nice :D
    PS i get the background of the game to show but i can not play it

    • sumanrs May 21, 2010 at 1:31 pm #

      Hi yoshi,

      That’s interesting, I never thought about trying it offline.

      In the SWF folder: you seem to have a .sw file. Or is that just a mistype?

      Do you have any sort of Javascript debugger on your browser? Any error messages that you are able to see? Firebug on Firefox has a really great debugger – though I hear that Google Chrome’s debugger is excellent as well.

  4. yoshi May 21, 2010 at 1:37 pm #

    ya it was a mistype and no i will try to debug it now

  5. yoshi May 21, 2010 at 1:40 pm #

    google.pml = function() { is my error :(

  6. yoshi May 21, 2010 at 1:52 pm #

    i am stuck i will check in see if anyone has a idea later

  7. Nick May 21, 2010 at 1:54 pm #

    Isn’t the Javascript suppose to be in the logos folder, according to the code? Just a thought?

    • sumanrs May 21, 2010 at 2:09 pm #

      Yup, it has to be in the logos/js/ folder relative to the folder that contains the main HTML page, according to the code. (Disclaimer: I haven’t tried running this offline.)

  8. ie 5.5 May 21, 2010 at 2:00 pm #

    Do u downloaded the other JS?
    in “extern_js” path ??

    i’m stuck too…

  9. jimmajamma May 21, 2010 at 2:37 pm #

    This is most definitely created with GWT so the javascript is tough to follow.

    I’ve got the board rendering (the easy part), but I keep getting a js error on google.rein is undefined. I think they may be doing some domain checking. There must be a way to find an alternate entry point into the pacman code though.

    I’d love to get my hand on the gwt source java code. Not that pacman is a particularly complicated game to recreate, just that they’ve done a really nice job.

    I’m disappointed to hear about the flash component for the audio though.

    • John May 21, 2010 at 10:32 pm #

      Why do you think they used flash for the audio. Am having a hard time understanding too.

  10. Nick May 21, 2010 at 2:53 pm #

    You got the board to render? How did you do that? What are all the pieces needed?

  11. jimmajamma May 21, 2010 at 3:03 pm #

    I have the files zipped, what’s the easiest way to drop them to you?

    • Nick May 21, 2010 at 3:04 pm #

      via e-mail is fine, Zipster123@gmail.com

    • Nick May 21, 2010 at 3:18 pm #

      Thanks, I received the files. I will take a closer look at it, and hopefully have some more feedback, :D

    • Sonja May 21, 2010 at 3:31 pm #

      May I request them also?

    • sumanrs May 21, 2010 at 3:59 pm #

      Hi jimmajamma, can you perhaps post the ZIP file online – maybe at your personal website. So that people won’t have to individually request the files by leaving their e-mail addresses. :)

      Just trying to think about what the best way might be… you’re welcome to put up the link to the ZIP file on this comment, or I can add it to the main post if you would like (and of course credit you properly.)

    • Richard May 21, 2010 at 4:00 pm #

      Can I also get that zip?

      I have been collecting google doodles for some time now and it would be a shame to miss thie one

      rlh_115@yahoo.com

    • jayvier May 21, 2010 at 4:13 pm #

      send me the zip folder too? thanks jl.i@hotmail.com

    • Bin May 21, 2010 at 4:54 pm #

      please email me too thanks
      seattleBin@gmail.com

  12. ie 5.5 May 21, 2010 at 3:17 pm #

    and for me, rogeriorg@gmail.com

  13. max May 21, 2010 at 3:20 pm #

    me too, aijoll@gmail.com

  14. Doodle Noodle May 21, 2010 at 3:24 pm #

    I would like to have that files, too.

    doodlenoodle AT hush D0T ai

  15. yoshi May 21, 2010 at 3:44 pm #

    xyoshix@gmail.com for me

  16. yoshi May 21, 2010 at 3:50 pm #

    just a update i did add the folder and file for the sDgICiHCZzM.js but stll no luck

    • Nick May 21, 2010 at 4:18 pm #

      Yoshi,

      Could you please list the directory structure that you have, along with the file names for each location. This will help out everyone immensely in solving this conundrum, :)

      • yoshi May 21, 2010 at 5:40 pm #

        \pacman

        05/21/2010 04:36 PM .
        05/21/2010 04:36 PM ..
        05/21/2010 01:28 PM extern_js
        05/21/2010 01:06 PM logos
        05/21/2010 01:38 PM 2,477 pacman.html

        \pacman\extern_js

        05/21/2010 01:28 PM .
        05/21/2010 01:28 PM ..
        05/21/2010 03:52 PM f

        \pacman\extern_js\f

        05/21/2010 03:52 PM .
        05/21/2010 03:52 PM ..
        05/21/2010 01:35 PM CgJlbhICdXMrMAo4aEAILCswDjgPLCswFjgWLCswF
        zgHLCswGDgFLCswGTggLCswITg4QAEsKzAlOMqIASwrMCY4CywrMCc4BCwrMDU4BCwrMDw4AiwrMEA4E
        CwrMEE4BSwrMEU4ASwrME44BSwrMFE4AiyAAhM

        \pacman\extern_js\f\CgJlbhICdXMrMAo4aEAILCsw
        DjgPLCswFjgWLCswFzgHLCswGDgFLCswGTggLCswITg4QAEsKzAlOMqIASwrMCY4CywrMCc4BCwrMDU4
        BCwrMDw4AiwrMEA4ECwrMEE4BSwrMEU4ASwrME44BSwrMFE4AiyAAhM

        05/21/2010 01:35 PM .
        05/21/2010 01:35 PM ..
        05/21/2010 01:32 PM 61,478 sDgICiHCZzM.js

        \pacman\logos

        05/21/2010 01:06 PM .
        05/21/2010 01:06 PM ..
        05/21/2010 12:55 PM js
        05/21/2010 12:37 PM 7,413 pacman10-hp-sprite.png
        05/21/2010 01:06 PM 7,506 pacman10-hp.png
        05/21/2010 01:26 PM swf

        \pacman\logos\swf

        05/21/2010 01:26 PM .
        05/21/2010 01:26 PM ..
        05/21/2010 12:35 PM 1,384 pacman10-hp-sound.swf

        \pacman\logos\js

        05/21/2010 12:55 PM .
        05/21/2010 12:55 PM ..
        05/21/2010 12:40 PM 58,775 pacman10-hp.2.js

        i thank i got it all hope it save the lay out when i hit submit

  17. yoshi May 21, 2010 at 3:54 pm #

    thanks for the files did anyone get it running yet offline ?

    • Bill May 21, 2010 at 5:38 pm #

      I got it running locally. You have to modify the directory structure in the pacman JavaScript. I used firebugs net panel to see what files were pulled down. There’s a sprites png, a background png and a swf for audio. Once the paths are adjusted to reflect localhost it runs like a champ. Happy paccing!

  18. tom May 21, 2010 at 3:58 pm #

    mail me your files tdh87i@hotmail.com, i wanna give this a crack. what i have isn’t working either

  19. Chris May 21, 2010 at 4:09 pm #

    Hi,
    Can someone please email me the zip files so I can try the game offline, my email is chris.whittaker.15@hotmail.com . Thanks!

  20. RayfenWindspear May 21, 2010 at 4:22 pm #

    It would seem to me that the if statement
    if (!google.pml_installed) {
    05 google.pml_installed = true;
    06 if (!a) {

    is causing the main problems… you have all probably opted to remove it from your own html but it may be required within the pacman js itself to run. I have no basis for this theory yet as I have just begun my analysis.

    • RayfenWindspear May 21, 2010 at 4:52 pm #

      this is irritating… I’ve done many offline things such as this but never with javascript. I’m afraid I know very little about it :/

  21. PhocsM May 21, 2010 at 4:23 pm #

    Please send them to me, can’t render the board
    fox.matarael7[at]gmail.com

  22. michael May 21, 2010 at 4:28 pm #

    If anyone successfully manages to engineer a playable offline version of this let me know at psychicwhoosh@gmail.com

    There are some programmers talking about it over at http://www.reddit.com/r/programming/comments/c6pvw/how_was_the_google_game_made/

    They haven’t cracked it yet either, but maybe there is some insight to be found there.

    Thanks.

    • Nick May 21, 2010 at 5:52 pm #

      Michael,

      Would I be able to have a copy of the zipped files? E-mail: Zipster123@gmail.com. I have been working with much of the community on this all day, taking bits and pieces from everywhere. Thank you, :).

  23. David May 21, 2010 at 4:36 pm #

    I got the game working on my own server. Here are the files you need:

    .htaccess
    csi
    index.php
    images/
    images/srpr/
    images/srpr/nav_logo13.png
    logos/
    logos/js/
    logos/js/pacman10-hp.2.js
    logos/pacman10-hp.png
    logos/pacman10-hp-sprite.png
    logos/swf/
    logos/swf/pacman10-hp-sound.swf
    extern_js/
    extern_js/f/
    extern_js/f/CgJlbhICdXMrMAo4aEAILCswDjgPLCswFjgWLCswFzgHLCswGDgFLCswGTggLCswJTjKiAEsKzAmOAssKzAnOAQsKzA8OAIsKzBAOBAsKzBBOAUsKzBFOAEsKzBOOAUsKzBROAIsgAIT/
    extern_js/f/CgJlbhICdXMrMAo4aEAILCswDjgPLCswFjgWLCswFzgHLCswGDgFLCswGTggLCswJTjKiAEsKzAmOAssKzAnOAQsKzA8OAIsKzBAOBAsKzBBOAUsKzBFOAEsKzBOOAUsKzBROAIsgAIT/SRVVjQvnw5A.js

    • sumanrs May 21, 2010 at 5:32 pm #

      Anything special needed in the .htaccess?

      Also I’m wondering whether the extern_js JS file is custom generated for each Google user – but I could be wrong. Maybe it works as long as the index.php has the exact JS URL in it.

    • Another David May 21, 2010 at 5:51 pm #

      Please share a .zip of your working version of this on (at least) one public file hosting service and post a link here.

      http://en.wikipedia.org/wiki/Comparison_of_file_hosting_services

      It would be very helpful. Thanks

  24. Bin May 21, 2010 at 4:53 pm #

    email me the zip files please. my email address is seattleBin@gmail.com

  25. Jarlaxle May 21, 2010 at 5:03 pm #

    Upload them to a public ftp somewhere, pls. Saves a lot of trouble and makes me very happy. Thanks!

  26. Bin May 21, 2010 at 5:10 pm #

    so far no luck, anyone make it working offline?

  27. Bill May 21, 2010 at 5:43 pm #

    I just sent psychicwhoosh@gmail.co. The working local source code. Ping Michael if anyone else wants a copy…

  28. yoshi May 21, 2010 at 5:50 pm #

    bill if you could hook me up xyoshix@gmail.com

    • Bill May 21, 2010 at 5:58 pm #

      Hooked up…

      • Another David May 21, 2010 at 6:33 pm #

        While you are hooking people up Bill, until someone puts it on a file host may I also please have a copy? My username is adjectivynoun on e-mail provider gmail
        (All: Please don’t list machine readable e-mail addresses on public web pages)

  29. George May 21, 2010 at 6:00 pm #

    if anyone gets it as a standalone web page page please email it to me at gad4_2000 at yah.. hoo dot com.

    thanks.

    i would like to add it to my collection to play after today.

  30. yoshi May 21, 2010 at 6:06 pm #

    thanks for the fast reply bill but the email had no files in it :P

    • Bill May 21, 2010 at 6:33 pm #

      Resent, stupid iPhone not attaching attachments…

    • Nick May 21, 2010 at 8:25 pm #

      Yoshi,

      Would I be able to have a copy of it as I was trying to help you guys out in the beginning, :).

  31. Doodle Noodle May 21, 2010 at 6:23 pm #

    http://www.underealm.com/download/GooglePacman.zip

    I found that on the web, it works!

  32. Bill May 21, 2010 at 6:27 pm #

    Please email me the files yoshi at:
    sr90gg@gmail.com

  33. sw_noob May 21, 2010 at 6:42 pm #

    can send me the workable local source?
    sw_noob@yahoo.com
    thanks first :)

  34. gadget85 May 21, 2010 at 8:42 pm #

    Hey I’ve been following this post and I was wondering can someone send me a copy of the working local source code? dvelez1985@gmail.com

  35. michael May 21, 2010 at 10:05 pm #

    Thanks to everyone for all their hard work. I have one problem. I have two versions of this now: the one from http://www.underealm.com/download/GooglePacman.zip and also the one provided by Bill. Both versions contain the flash sound file, but on neither version can I get the sound to play.

    Wonder why that is? Anyone else having that problem? It’s not like I have a flash blocker or anything. But the game plays beautifully. Just no sound.

    Thanks again guys.

    • Nick May 21, 2010 at 11:29 pm #

      I don’t know if this helps, but the sound icon is not there when either one of these versions are loaded. It is located underneath the score, in the lower-left corner, being able to select to mute or unmute the sound on the real website. (*NOTE: You must click the insert coin button for it to load)

      • michael May 22, 2010 at 1:12 am #

        Yeah I think google might have added the icon as the day went on due to many complaints about no being able to mute the sound. Still not sure why these down-loadable versions don’t play the sounds offline. Perplexing.

    • Luiwo May 22, 2010 at 1:57 am #

      Hello everyone
      (I apologize if this post appears twice, but my other post is awaiting moderation, maybe because it includes a link to the solution)

      I just found the solution for the offline sound problem in the google suport forum
      search “Is it possible to save the great Google Pacman Doodle?!” in google to find it… You can fix it in the flash control panel, adding in global security the folder that contains the swf file in your hd.

      For me is working great

      Thanks to everyone for make this posible

  36. Luiwo May 21, 2010 at 11:45 pm #

    Hello everyone

    I just found the solution for the offline sound problem in http://www.google.com/support/forum/p/Web%20Search/thread?tid=2873cb9b919190dd&hl=en
    In the flash control panel you have to add in the global security form the folder that contains the swf file in your hd.

    For me is working great

  37. João May 22, 2010 at 4:19 am #

    Hello, i’m portuguese and i don’t now how it work’s. so, anyone can send the game to me? plese.

  38. João May 22, 2010 at 4:20 am #

    My e-mail is azul.jd@hotmail.com

  39. tom May 22, 2010 at 4:36 am #

    http://github.com/macek/google_pacman

  40. Bruce May 22, 2010 at 11:59 am #

    Hey guys,

    I’m hosting the three version of the doodle here:
    http://furtado.zxq.net/googlepac-man/

    If you download the files from there you will also be able to run it offline. To get the sound working locally you have to add an exception in the Flash control center for the directory the files are in.

  41. michael May 22, 2010 at 2:33 pm #

    Indeed making a security exception in your flash browser is the sound fix. Detailed instructions: Open the browser or browsers you indeed to play the game on. Go here: http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html Go to Global Security Settings if you are not already there. Click on the “edit locations” scroll bar and choose “add a location”. Choose the “files” option and find the swf file that contains the pacman sounds in the game’s folder. Once this is exception is made and trusted the sound will play.

    Thanks again to everyone for their hard work in reverse engineering this thing. It’s only been a day and the thing is now up and running perfectly.

  42. Oyun May 23, 2010 at 1:43 am #

    Here you can download the offline version:
    http://uploading.com/files/c949f67e/gpacman30.zip/

    This version is also portable – put it anywhere on your web server to make it run online.
    Example: http://ur.ly/cAPa

    I backed up modified files inside backup directory so you can see what was needed to create this portable version.

  43. Bedava Oyun Oyna May 25, 2010 at 2:22 pm #

    what was a nice game!! :)

  44. David July 2, 2010 at 12:41 am #

    Check out a level editor for google pacman.

Trackbacks/Pingbacks

  1. Tweets that mention Google’s Pacman Doodle – Reverse Engineering 101 « Suman Srinivasan's Code Blog -- Topsy.com - May 21, 2010

    […] This post was mentioned on Twitter by Aaron Coleman, Adam J Arnold ✔. Adam J Arnold ✔ said: so how did google make pacman playable for todays doodle? http://ow.ly/1OeJa […]

  2. แกะ logo google เกมฉลอง 30 ปี pac man | ไทย เกมสูตร - May 21, 2010

    […] ทีนี้ก็มีคนแกะครับ https://sumanrs.wordpress.com/2010/05/21/googles-pacman-doodle-reverse-engineering-101/ […]

  3. Google’s Pacman Doodle – Engenharia Reversa | Blog Patrick Espake - May 21, 2010

    […] post é uma tradução do post: https://sumanrs.wordpress.com/2010/05/21/googles-pacman-doodle-reverse-engineering-101/ tweetmeme_url = […]

  4. Top Posts — WordPress.com - May 22, 2010

    […] 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! […] […]

  5. 30 ปี แพ็คแมน บนกูเกิ้ล ดูเดิ้ล (30th anniversary Pac-Man on Google Doodle) « kaJarp fooMem - May 27, 2010

    […] https://sumanrs.wordpress.com/2010/05/21/googles-pacman-doodle-reverse-engineering-101/ […]

  6. Quando bisogna usare Adobe Flash? | Markon's blog - April 9, 2011

    […] Ad esempio il logo che Google dedicò qualche mese fa a Pacman era scritto in Javascript. Il codice è questo. (Maggiori dettagli li trovate qui.) […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: