A Konami é uma desenvolvedora japonesa de games, que vem lançando títulos de sucesso desde a "Era de Ouro" dos videogames, como as séries Contra, Metal Gear e Castlevania. Hoje, é mais reconhecida por nomes como Pro Evolution Soccer (o PES, para os íntimos) e Silent Hill.
Vários desses games clássicos traziam um cheat, um código secreto que de tanto aparecer nas produções da casa, ficou conhecido como o Código Konami ou Konami Code, criado pelo programador Kazuhisa Hashimoto, originalmente para o Gradius, do Famicom.
Pra quem não é muito chegado ao assunto, o código é:
↑ ↑ ↓ ↓ → ← → ← B A
Os experientes já sabiam da fixação da Konami no código, então a cada lançamento, testavam logo pra ver o que ele fazia, e quase sempre funcionava: dava mais vidas, permitia seleção de fases, etc. Leia mais sobre a história do Konami Code aqui.
Se você tem um site sobre games, pode inserir o Konami Code no WordPress, colocando seu script direto na estrutura, e com ele fazer qualquer coisa que o Javascript permite - pra quem se aventurou na gamificação do site, é uma boa pedida como complemento, na criação de um ambiente mais divertido para o leitor.
Dá ainda pra alterar o script e mudar o código, como veremos já.
O que vamos precisar?
1º) Baixar o plugin Konami Code, escrito por Tom McFarlin. NÃO É um plugin padrão do WordPress, desses com instalação, mas os arquivo com o script e alguns de demonstração.
2º) Descompacte o arquivo. Na pasta src estão os arquivos com o script, sendo a versão com o "min" no final a compactada. Se quiser fazer alguma alteração, use a "jquery.konami.js". Envie a pasta para seu servidor, de preferência em alguma pasta dentro do seu tema (pode ser a inc, includes, ou então crie uma, tanto faz).
Nota: não é necessário enviar a pasta toda, pode ser só o arquivo do script jquery.konami.min.js, caso não pretenda fazer alterações nele. Mas vamos deixar assim por questões práticas.
Para embutir o arquivo no seu template, envie-o para o servidor e crie o link para o script no footer.php. Como? Para o exemplo, será usado o tema padrão do WordPress atual, o Twenty Fourteen.
Abra o footer.php do seu tema (seja ele o Twenty Fourteen ou não) e bem perto do final, antes da tag de fechamento /body, insira o seguinte:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/inc/konami-code-master/src/jquery.konami.min.js"></script>
Não deixe de corrigir o URL apontando para o arquivo onde ficou no seu tema. Como coloquei a pasta do script dentro da pasta inc, ficou como visto acima. O bloginfo('stylesheet_directory') é uma template tag do WordPress que aponta para a pasta-raíz do tema. A primeira chamada é pelo jQuery no repositório público do Google, exigido para o script funcionar. Veja que apontei para o arquivo minificado (compactado, aquele que tem o min no final).
Nota: o certo é sempre fazer modificações no seu tema usando temas-filho; se você colocar a chamada dos scripts direto no tema e depois atualizá-lo, modificações serão perdidas. Leia tudo sobre temas-filhos no Codex do WordPress.
Com os scripts devidamente "convocados" no footer, salve o arquivo e envie para o servidor, caso já não esteja sendo editado lá.
Usando o código
Ótimo, o código está ativo, mas se você testar no seu site, verá que não acontece nada! É porque o gatilho está pronto, mas ainda não ativa função nenhuma.
Vamos fazer o uso mais simples possível para testar, com uma janela de alerta quando o código for teclado. No footer.php, logo antes da tag de fechamento /body (ou seja, depois dos scripts que inseriu antes), acrescente:
<script type="text/javascript">
(function( $ ) {
"use strict";
$(function() {
$( window ).konami({
cheat: function() {
alert( 'Código ativado!' );
} // end cheat
});
});
}(jQuery));
</script>
Uma função "use strict" (que é a mesma apontada no script jquery.konami.js, pode ver lá se quiser...), com um alert simples em jQuery (Javascript).
Salve e teste: digite o comando ↑ ↑ ↓ ↓ ← → ← → B A, e deve aparecer um alerta do navegador.
Não aconteceu nada?
1) Reveja o caminho dos scripts, é provável que estejam apontando um lugar errado. Um bom jeito de saber se está tudo certo é abrir a página, abrir o inspetor de código do navegador (pressione F12), ir até o footer e colocar o mouse sobre o link - confira o caminho.
Se não tiver certeza, abra-o numa nova janela (clique com o direito sobre o link do script, selecione Abrir em Nova Janela) e se não abrir o script, está errado.
2) Talvez haja um conflito de jQuery no seu tema. Se for o caso, é mais complicado. O jQuery sugere o uso de noConflict() para situações onde mais de uma variável $ se confudem e causam erro. Seria preciso uma pequena alteração no que fizemos antes, ficando assim:
<script type="text/javascript">
$.noConflict();
(function( $ ) {
"use strict";
$(function() {
$( window ).konami({
cheat: function() {
alert( 'Código ativado!' );
} // end cheat
});
});
}(jQuery));
</script>
Outro efeito?
Digamos que ao digitar o código, seu visitante terá uma surpresinha, com um fundo personalizado no site ou numa div. Edite o código que colocou no footer, assim:
<script>
$.noConflict();
(function( $ ) {
"use strict";
$(function() {
$( window ).konami({
cheat: function() {
alert( 'Código ativado!' );
$('body').css("background-image", "url(/images/back2.jpg)");
$('#primary').css("background-image", "url(<?php bloginfo( 'stylesheet_directory' ); ?>/images/back2.jpg)");
} // end cheat
});
});
}(jQuery));
</script>
O que mudou? Ali depois do alert temos duas alterações em jQuery no cheat. A primeira troca a imagem de fundo do elemento body (ou seja, o fundo do site), e a segunda, o fundo do elemento com o identificador "primary" - que no caso do TwentyFourteen, é uma div principal, com fundo branco.
Antes e depois de digitar o código.
Qual a serventia prática do exemplo? Nenhuma, mas você já entendeu que dentro da função "cheat", podemos criar efeitos bem mais interessantes e interativos com Javascript. Que tal abrir uma guia com um game secreto, ou tocar um som? Fica por conta da sua criatividade.
Mudar o código secreto
Dá também pra alterar o código: em vez de usar o Konami Code, vamos supor que prefiro ↑ ↓ ← → A B C. Pra isso, teremos que alterar o mapeamento das teclas no script jquery.konami.js. Fica bem no final, no trecho:
$.fn.konami.defaults = {
code : [38,38,40,40,37,39,37,39,66,65],
cheat: null
};
Esse é o mapeamento das teclas em Javascript (mapa pego aqui; se não achou a que queria na lista abaixo, é só seguir o link anterior, clicar na caixinha e teclar para ver o código):
BACKSPACE: 8 TAB: 9 ENTER: 13 SHIFT: 16 CTRL: 17 ALT: 18 PAUSE-BREAK: 19 CAPSLOCK: 20 ESC: 27 ESPAÇO: 32 PAGEUP: 33 PAGEDOWN: 34 END: 35 HOME: 36 SETA ESQUERDA: 37 SETA CIMA: 38 SETA DIREITA: 39 SETA BAIXO: 40 PRINT-SCREEN: 44 INSERT: 45 DEL: 46 0: 48 1: 49 2: 50 3: 51 4: 52 5: 53 6: 54 7: 55 8: 56 9: 57 a: 65 b: 66 c: 67 d: 68 e: 69 f: 70 g: 71 h: 72 i: 73 j: 74 k: 75 l: 76 m: 77 n: 78 o: 79 p: 80 q: 81 r: 82 s: 83 t: 84 u: 85 v: 86 w: 87 x: 88 y: 89 z: 90 WINDOWS ESQ: 91 WINDOWS DIR: 92 NUMÉRICO 0: 96 NUMÉRICO 1: 97 NUMÉRICO 2: 98 NUMÉRICO 3: 99 NUMÉRICO 4: 100 NUMÉRICO 5: 101 NUMÉRICO 6: 102 NUMÉRICO 7: 103 NUMÉRICO 8: 104 NUMÉRICO 9: 105 MULTIPLICAÇÃO: 106 ADIÇÃO: 107 SUBTRAÇÃO: 109 PONTO DECIMAL: 110 DIVISÃO: 111 F1: 112 F2: 113 F3: 114 F4: 115 F5: 116 F6: 117 F7: 118 F8: 119 F9: 120 F10: 121 F11: 122 F12: 123 NUM-LOCK: 144 SCROLL-LOCK: 145 PONTO-E-VIRGULA: 186 IGUAL: 187 VÍRGULA: 188 HÍFEN: 189 PONTO: 190 BARRA: 191 ACENTO GRAVE: 192 ABRE COLCHETE: 219 BARRA INVERTIDA: 220 FECHA COLCHETE: 221 ASPAS: 222
Então meu código...
↑ ↓ ← → A B C
...ficaria:
38,40,37,39,65,66,67
Lá no script, mude pra:
code : [38,40,37,39,65,66,67],
Salve e teste. Certo?
devo ser ignorante, ou algo assim, mas não devia ter um demo para ver como ficaria?
Não vi necessidade de demo, já que o resultado do código não é o importante aqui, e sim a inserção dele, que vai funcionar exatamente como demonstrado. Mas se você sentiu falta, mais gente pode ter sentido, então vou ver se coloco um resultado daqui a pouco.