Na página do Google de hoje (21 de maio de 2010) tem um doodle do Pacman – e o mais interessante disso: é jogável! E é o primeiro doodle jogável do Google.
Sendo um geek, eu decidi dar uma olhada no código-fonte para descobrir como o Google fez isso.
Eu não fiz engenharia reversa do código inteiro, eu só queria ter uma ideia geral de como eles tinham feito isso. Parece-me que o Google, afinal, tem um código extramamente conciso e eficiente para resolver muitos dos seus problemas.
Assim, em primeiro lugar eles têm um elemento div que contém a área do jogo:
<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>E depois há o script mágico:
<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>O que parece estar fazendo é o seguinte:
- Define o estilo CSS e propriedades para vários elementos HTML jogáveis;
- Carrega o código Javascript do Pacman: http://www.google.com/logos/js/pacman10-hp.2.js (nota: esse link era válido quando eu carreguei isso em 21 de maio de 2010, o dia do doodle, mas pode ser removido mais tarde. Depende do Google, e eu não quero guardar uma cópia offline por razões legais e outros.);
- Quando o jogo é terminado, redireciona para o link do elemento a id=”dlink”, e basicamente procura pela frase “PAC-MAN 30th Anniversary”;
- Responde ao botão “Insert Coin” quando é pressionado e reinicia o jogo.
No estilo Google: realmente puro e eficiente!
Eu usei dois recursos online para formatar o HTML e Javascript do Google melhor:
Esse post é uma tradução do post: http://sumanrs.wordpress.com/2010/05/21/googles-pacman-doodle-reverse-engineering-101/
