How To Embed Google Homepage Doodle Pac-Man Game On A Website Or Blog

Google is celebrating 30’th anniversary of the most successful game of its time, Pac-Man. So Google’s homepage is playable today and one can spend time over there without even hitting the search button. Today’s Google’s Doodle is a game which can be played even with multiplayer. Game is fully developed on JavaScript and it runs smoothly on home page. Pac-Man doesn’t take much time to load on the Google Homepage and you can play that with a slow Internet connection as well. You can read more of the news as well as how to play Multiplayer in Pac-Man on Google Homepage here.

I tried to embed this Pac-Man Game on Internet Techies this morning, and to my wonders I was successful. You can play the game which I have embedded at the bottom of this post, the complete source code below is taken from Google homepage, and the game works same as that of the Google Doodle today :)

Code to Embed the Google Doodle – Pac-man game

[sourcecode language="xhtml" wraplines="1"]
<script type="text/javascript">
</script>
<script>window.google={kEI:"Quz2S63qIYeglAfw8oHGCg",kEXPI:"17259,23663,24477,24661,24745,24770,24808",kCSI:{e:"17259,23663,24477,24661,24745,24770,24808",ei:"Quz2S63qIYeglAfw8oHGCg",expi:"17259,23663,24477,24661,24745,24770,24808"},ml:function(){},pageState:"#",kHL:"en",time:function(){return(new Date).getTime()},log:function(b,d,c){var a=new Image,e=google,g=e.lc,f=e.li;a.onerror=(a.onload=(a.onabort=function(){delete g[f]}));g[f]=a;c=c||"/gen_204?atyp=i&ct="+b+"&cad="+d+"&zx="+google.time();a.src=c;e.li=f+1},lc:[],li:0,j:{en:1,l:function(){},e:function(){},b:location.hash&&location.hash!="#",bv:3,pl:[],mc:0,sc:0.5},Toolbelt:{}};(function(){for(var d=0,c;c=["ad","bc","p","pa","zd","ac","pc","pah","ph","sa","xx","zc","zz"][d++];)(function(a){google.j[a]=function(){google.j.pl.push([a,arguments])}})(c)})();
window.google.sn="webhp";window.google.timers={load:{t:{start:(new Date).getTime()}}};try{window.google.pt=window.gtbExternal&&window.gtbExternal.pageT();}catch(u){}window.google.jsrt_kill=1;
</script>
<style>
</style>
<script>var _gjwl=location;function _gjuc(){var b=_gjwl.href.indexOf("#");if(b>=0){var a=_gjwl.href.substring(b+1);if(/(^|&)q=/.test(a)&&a.indexOf("#")==-1&&!/(^|&)cad=h($|&)/.test(a)){_gjwl.replace("/search?"+a.replace(/(^|&)fp=[^&]*/g,"")+"&cad=h");return 1}}return 0}function _gjp(){!(window._gjwl.hash&&window._gjuc())&&setTimeout(_gjp,500)};
google.y={};google.x=function(e,g){google.y[e.id]=[e,g];return false};if(!window.google)window.google={};window.google.crm={};window.google.cri=0;window.clk=function(e,f,g,k,l,b,m){if(document.images){var a=encodeURIComponent||escape,c=new Image,h=window.google.cri++;window.google.crm[h]=c;c.onerror=(c.onload=(c.onabort=function(){delete window.google.crm[h]}));if(b&&b.substring(0,6)!="&sig2=")b="&sig2="+b;c.src=["/url?sa=T","",f?"&oi="+a(f):"",g?"&cad="+a(g):"","&ct=",a(k||"res"),"&cd=",a(l),"&ved=",a(m),e?"&url="+a(e.replace(/#.*/,"")).replace(/\+/g,"%2B"):"","&ei=","Quz2S63qIYeglAfw8oHGCg",b].join("")}return true};
window.gbar={qs:function(){},tg:function(e){var o={id:’gbar’};for(i in e)o[i]=e[i];google.x(o,function(){gbar.tg(o)})}};</script>
</head>
<!– textarea id=csi style=display:none>
</textarea –>
<script>if(google.j.b)document.body.style.visibility=’hidden’;</script>
<iframe name=wgjf style=display:none src="" onload="google.j.l()" onerror="google.j.e()">
</iframe>
<div id=logo style="width:554px;height:186px;background:black url(http://sites.google.com/site/clickonff/home/pacman_google.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>
<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="http://sites.google.com/site/clickonff/home/pac-man-1.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>
<form action="/search" name=f onsubmit="google.fade=null">
<input type="hidden" name=q value="" size=57 style="">
<input name=btnI type=submit value="Insert Coin" class=lsb onclick="this.checked=1">
</form>
<div id=xjsd>
</div>
<div id=xjsi>
<script>if(google.y)google.y.first=[];if(google.y)google.y.first=[];if(!google.xjs){google.dstr=[];google.rein=[];window.setTimeout(function(){var a=document.createElement("script");
a.src="http://sites.google.com/site/clickonff/home/pac-man-2.js";

(document.getElementById("xjsd")||document.body).appendChild(a);if(google.timers&&google.timers.load.t)google.timers.load.t.xjsls=(new Date).getTime();},0);
google.xjs=1};google.neegg=1;google.y.first.push(function(){google.ac.i(document.f,document.f.q,”,”,’ZAO1UHON4Cy3HD_vAXF7cQ’,{o:1,sw:1});(function(){
var h,i,j=1,k=google.time(),l=[];google.rein.push(function(){j=1;k=google.time()});google.dstr.push(function(){google.fade=null});function m(a,f){var b=[];for(var c=0,e;e=a


;){var d=document.getElementById(e);d&&b.push(d)}for(var c=0,g;g=f


;)b=b.concat(n(g[0],g[1]));for(var c=0;b


;c++)b


=[b


,"opacity",0,1,0,""];return b}function n(a,f){var b=[],c=new RegExp("(^|\\s)"+f+"($|\\s)");for(var e=0,d,g=document.getElementsByTagName(a);d=
g[e++];)c.test(d.className)&&b.push(d);return b}google.fade=function(a){if(google.fx&&j){a=a||window.event;var f=1,b=google.time()-k;if(a&&a.type=="mousemove"){var c=a.clientX,e=a.clientY;f=(h||i)&&(h!=c||i!=e)&&b>600;h=c;i=e}if(f){j=0;google.fx.animate(600,m(["fctr","ghead","pmocntr","sbl","tba","tbe"],[["span","fade"],["div","fade"],["div","gbh"]]));for(var d=0;d<
l.length;++d)if(typeof l[d]=="function")l[d]()}}};google.addFadeNotifier=function(a){l.push(a);if(!j)a()};
})();
;google.History&&google.History.initialize(‘/’)});if(google.j&&google.j.en&&google.j.xi){window.setTimeout(google.j.xi,0);google.fade=null;}google.pml && google.pml();</script>
</div>
<script>(function(){
var b,d,e,f;function g(a,c){if(a.removeEventListener){a.removeEventListener("load",c,false);a.removeEventListener("error",c,false)}else{a.detachEvent("onload",c);a.detachEvent("onerror",c)}}function h(a){f=(new Date).getTime();++d;a=a||window.event;var c=a.target||a.srcElement;g(c,h)}var i=document.getElementsByTagName("img");b=i.length;d=0;for(var j=0,k;j<b;++j){k=i[j];if(k.complete||typeof k.src!="string"||!k.src)++d;else if(k.addEventListener){k.addEventListener("load",h,false);k.addEventListener("error",
h,false)}else{k.attachEvent("onload",h);k.attachEvent("onerror",h)}}e=b-d;function l(){google.timers.load.t.ol=(new Date).getTime();google.timers.load.t.iml=f;google.kCSI.imc=d;google.kCSI.imn=b;google.kCSI.imp=e;google.report&&google.report(google.timers.load,google.kCSI)}if(window.addEventListener)window.addEventListener("load",l,false);else if(window.attachEvent)window.attachEvent("onload",l);google.timers.load.t.prt=(f=(new Date).getTime());
})();
</script>
[/sourcecode]
Very Important Note: For some sites, this code gives a blank page. This is because the image and the scripts do not load properly. You can download the files (one png and two js files), save it on your server, and replace the location in the above code with the actual location on your server.
The three files from the above code which you need to open and save and then replace the location are

http://sites.google.com/site/clickonff/home/pacman_google.png

http://sites.google.com/site/clickonff/home/pac-man-1.js

http://sites.google.com/site/clickonff/home/pac-man-2.js

The above code is actually for a any webpage/website, what I mean is the code is generic. For WordPress blog, to get it on specific page, you would need to use specific WordPress conditional tags. For example, I used the is_single(‘post-id‘) conditional tag, to embed the script only on this article and not on all posts.

Please let us know did you put it on your website and if it works there and your valuable comments.

22 Comments

  1. Michael

    May 22, 2010 at 10:04 am

    it didnt work on my blog. help. here is my blog. mixofeverything.blogspot.com/search?q=&btnI=Insert+Coin

    when i click insert coin, is doesnt start the game… what do i do?

  2. madbello

    May 22, 2010 at 11:13 am

    It’s dont work by me, WordPress 2.9.2 on the Atahualpa Theme :-(

  3. Simrandeep Singh

    May 22, 2010 at 11:14 am

    Thats nice share.. now I can play this game anytime on your blog :)

  4. Pingback: How To Embed Google Homepage Doodle Pac-Man Game On A Website Or Blog | Dream Freedom

  5. John Cho

    May 22, 2010 at 5:25 pm

    Thanks for the code. I was surprised to see Pacman on Google. Must be the first interactive logo of Google

  6. Jackson

    May 22, 2010 at 10:20 pm

    It does not work on my website… I have two codes from two different sources. Your code turns up blank with the”insert coin” button the other code shows google pacman but when you press “insert coin” It redirects to a different page…

  7. Florence

    May 22, 2010 at 11:00 pm

    Won’t Google mind if we embed this on our sites? Can we freely embed it or do we need formal permission from Google?

  8. Internet Techies

    May 22, 2010 at 11:41 pm

    This is a Javascript conflict, the google script seems to have conflict with the prototype library. Can you please check this and let me know?

  9. Internet Techies

    May 22, 2010 at 11:56 pm

    You could write in credit that this is the Google code, in fact you can see the game, it has a “Google” name on it. It’s for their promotion, as well as fun and engagement for readers. We have explicitly mentioned that this is a Google Doodle Homepage Pac-man game.

  10. Internet Techies

    May 23, 2010 at 12:03 am

    Hi Jackson, I have updated the article and put a “Very Important Note” section below the code, please let me know if the changes work for you. Thanks

  11. Internet Techies

    May 23, 2010 at 12:07 am

    I have updated the post with “Very Important Note” below the actual sourcecode, for those where the blank page comes when “Insert Coin” is clicked. It is actually because the scripts do not load properly, the best option is put in the post to make it work.

  12. Jackson

    May 23, 2010 at 12:59 am

    Yup its still not working, I added the files to my site and replaced the links to the files (http://sites.google.com/site/clickonff/home/pacman_google.png
    http://sites.google.com/site/clickonff/home/pac-man-1.js
    http://sites.google.com/site/clickonff/home/pac-man-2.js)
    With the links to the files on my site and it didn’t make a difference…
    Thanks for giving me the advice though!

  13. vector graphics

    May 23, 2010 at 1:41 am

    wow. this is great, i have been playing this whole day long. thanks for the awesome tutorial. :)

  14. Tejaswini

    May 23, 2010 at 2:15 am

    Hi Jackson, as I can see in your page HTML source, you have uploaded the files, but you have not properly embedded the code. You just have to replace the three file locations in the code provided in the post with your absolute url eg. like http://www.thehappypandas.com/uploads/happyhappypacman.png and so on in the original code. Can you please email me in case you need me to help you put the code, my mail ID is tedeshpa [at] gmail [dot] com ? Thanks for your patience.

  15. PK

    May 23, 2010 at 4:17 am

    I can hear the sounds when I play it on Google’s page, but not when I save it locally. Is there any way to save the sounds locally? I tried getting the swf and updating the path in the js, but that doesn’t work.

    Thanks…

  16. www.iApple.se

    May 23, 2010 at 4:58 am

    I managed to get the game visible but everything is freezed. Nothing moves. And nothing happens when you press on the button called “Insert Coin”.

    The game can be seen here: http://iapple.se/artiklar

  17. Jackson

    May 23, 2010 at 6:10 am

    Ok, I did that and now the picture is showing up, but look what happens when you click “insert coin” Thanks for your Help! By the way, I’m twelve and I just started learning about html so I can update my friend’s and my website… so I’m not very experienced…

  18. Tejaswini

    May 23, 2010 at 4:38 pm

    Can you please follow the “Very Important Note” section of the post? You need to upload the files to your server in case the scripts are not working. As well, the sexy bookmarks is loading two times, it may cause the js conflict.

  19. Pingback: Google Pac-Man Lives on!

  20. Franco

    May 24, 2010 at 9:10 pm

    it didn´t work for my blog, I suppose it is becasue I don’t know how to use the wordpress conditional tags.
    Can u help me with this?

    Thanks!

  21. Diaryking98

    May 26, 2010 at 9:45 am

    I can play it offline now because i copied the files

  22. Andrew Taylor

    June 24, 2010 at 2:15 am

    Hi I am using wordpress and would really like to know where to place the is_single(‘post-id‘) conditional tag? Do I put it somewhere in the post or in the wordpress theme?

    Thanks for your help.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>