Konami code no vue js – como fazer um easter egg

O Konami Code é uma sequência de códigos que a Konami fazia para prover algum cheat secreto ou alguma habilidade extra em algum jogo. Começou sendo aplicado em 1986, com o jogo Gradius.

Para quem não sabe, a sequência de botões que habilita este cheat é:

Primórdios de um nerdismo pré-internet

Quando era jovem, nos idos de 1994, tinha um Super Nintendo, e nele jogava International Super Star Soccer Deluxe (ISSSD), com as estrelas Allejo, Redonda e Galfano. Era uma grande diversão pra uma época pré-internet, onde as versões dos jogos eram muito mais espaçadas, e pegamos bem o final do tempo de vida do SNES para o PSOne. Como era de uma família pobre, o videogame acompanhou a gente por um bom tempo ainda.

No ISSSD, aplicando este código, transformava o juiz no cachorro. No vídeo abaixo, temos a demonstração dele em ação:

Esta brincadeira deu origem a muitos cheats que fazem a alegria dos gamers, tanto que é comum todo mundo comprar jogo da Konami e a primeira coisa que faz é ensaiar a sequência.

A era do easter egg digital

A grande maioria dos desenvolvedores que tem ao menos 30 anos de idade passou por jogar Super Nintendo, e certamente, em projetos que julgam merecedores, aplicam variantes da Konami Code. Alguns exemplos sensacionais da Konami Code temos nos seguintes projetos:

• Reddit
• Digg
• Vogue
• BuzzFeed

Em todos os frameworks e libraries do Javascript tem alguma implementação do Konami Code. Como utilizo o Vue Js, vou passar um rápido tutorial de como implementar em seu projeto.

Aplicando o vue-konami-code no meu projeto

Para instalar o vue-konami-code, a primeira coisa que você vai fazer é puxar o pacote do vue-konami-code

npm install --save vue-konami-code

Importe este pacote no seu vue js. Eu utilizo o browserify para importar os pacotes de JS no meu projeto. Se você não tem o conhecimento de browserify no gulp, recomendo a leitura desta documentação. Prosseguindo, faço a importação corretamente:

var konamiCode = require('vue-konami-code');
window.konamiCode = konamiCode;
// OU modo es6
import KonamiCode from 'vue-konami-code'
// aqui tu aplica a mágica
Vue.use(konamiCode, {callback: function () {
    alert('haha! você descobriu meu segredo!');
}});

Pronto, você já está com o código implementado.  Geralmente as pessoas pedem exemplos mais próximos do real, mas acho que vou estragar a surpresa: implementei neste site o código konami.

Resumidamente, eu fiz as seguintes inclusões de código no meu site:

<main  v-bind:class="{'konamiClass': haveKonami}">
[...]
&lt;/main>

main.konamiClass{
   background-image: url('../img/konami.gif');
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
}

// realizei a importação do vue-konami-code em outro script. considere importado, blz?
Vue.use(konamiCode, {callback: function () {
    app._data.haveKonami = true;
    console.log("Damn it! You found my dirty little secret!");
}});
let app = new Vue({
   el: '#app',
   data: {
      haveKonami: false
   }
});

Eu utilizei este código na versão antiga do meu site. Ele está aqui por causa do backup. Quem sabe no futuro eu refaça esta animação.