Konami code no vue js - como fazer um easter egg - Mateus Ávila - Desenvolvimento web
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:
Juiz cachorro! E os bandeirinhas também.
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:
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:
// modo browserify
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.