RECENTES
Tutoriart
Dicas

Como colocar Konami Code no WordPress sem plugin

Por
Google+ Pinterest LinkedIn Tumblr
Anúncios Google

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

→ Konami Code em ação aqui ←

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?

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

Posts Relacionados

2 Comentários

  1. Jack Jonh Black Responder

    devo ser ignorante, ou algo assim, mas não devia ter um demo para ver como ficaria?

    • Daniel Lemes Responder

      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 um Comentário

Pin