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[c++];){var d=document.getElementById(e);d&&b.push(d)}for(var c=0,g;g=f[c++];)b=b.concat(n(g[0],g[1]));for(var c=0;b[c];c++)b[c]=[b[c],"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.

Leave a Reply

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