Como colocar Konami Code no WordPress sem plugin

2
1020

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.

Inspetor de código do Chrome
O inspetor de código do navegador é a melhor ferramenta de visualização pra quem desenvolve ou fuça nos códigos do site.

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.

Antes e depois do 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?

- Publicidade -

Receba atualizações do Tutoriart

É grátis, e você pode escolher entre receber só sugestões sobre arte, design gráfico, Photoshop, etc, ou só sobre WordPress, blogging, design web, snippets, etc. Ou tudo, se preferir!

Quero assinar...
Ao assinar, você concorda com os Termos de Privacidade.

2 COMENTÁRIOS

    • 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.

DEIXE UMA RESPOSTA

Por favor, digite seu comentário!
Por favor, digite seu nome aqui