¿Quieres esconder un huevo de pascua en tu web? Qué mejor forma de activarlo que usar el famoso código Konami, una extraña combinación de teclas que lleva activando trucos en videojuegos desde que fue usado por primera vez en el juego Gradius de NES. Desde entonces ha aparecido en decenas de otros títulos de Konami, de otras compañías, e incluso páginas web. Además también ha hecho su aparición en películas y series de televisión. ¿Te animas a ponerlo también?
Pues lo dicho, el código konami, aparece en muchos sitios, pero todavía no hemos dicho en qué cosiste. La combinación de teclas es la siguiente:
Arriba, arriba, abajo, abajo, izquierda, derecha, izquierda, derecha, B, A
Si queremos que al hacer esa combinación pase algo interesante en nuestra página web, primero tendremos que programar ‘ese algo‘. Puede ser que algo cambie de color, que aparezca alguna cosa, que suene una musiquita… tendrás que decidirlo tú. Lo que yo te voy a dar, es la parte que hace que se active aquello que hayas programado, que es esta:
(function(window,funcion){
var teclasHEX = '';
window.document.onkeydown = function(evento) {
var tecla = evento ? evento.keyCode : window.event.keyCode;
teclasHEX = (teclasHEX+tecla.toString(16)).substr(-20);
if(teclasHEX=='26262828252725274241') funcion();
}
})(window,function(){
// Código que debe ejecutarse
alert('KONAMI!');
});
Lo que he puesto yo, ha sido un simple alert() para que se vea si ha funcionado. Sustituye esa parte por lo que tú quieras.
El programita consiste en un closure que recibe el objeto window y la función que debe ejecutarse cuando se introduzca la combinación de teclas. Respecto a cómo funciona el detector de teclas, es simple. Se trata de un string que tiene los códigos hexadecimales de las teclas que vamos pulsando y que tendrá siempre 20 caracteres como mucho. A medida que vamos metiendo el código de la tecla pulsada por la izquierda, se va perdiendo la que haya al final, con lo que tenemos siempre la lista de las 10 últimas teclas pulsadas. Sólo falta ver si la lista de esas 10 teclas coincide con las 10 teclas del código Konami.
Bueno, por si todavía no lo has probado, aquí en este artículo también he puesto mi particular huevo de pascua que se activa con el código Konami, adelante, pruébalo…
Para esto he usado este código (en este caso sí he usado jQuery):
(function(window,funcion){
var teclasHEX = '';
window.document.onkeydown = function(evento) {
var tecla = evento ? evento.keyCode : window.event.keyCode;
teclasHEX = (teclasHEX+tecla.toString(16)).substr(-20);
if(teclasHEX=='26262828252725274241') funcion();
}
})(window,function(){
var caracol = $("<img class='caracol' src='snail.gif'>");
var espacio = $(window).width();
var velocidad = 10+10*Math.random();
var tiempo = parseInt(espacio/velocidad);
caracol.css('position','fixed');
caracol.css('bottom','-4px');
caracol.css('left',espacio+'px');
caracol.css('transition','left '+tiempo+'s');
$("body").append(caracol);
window.setTimeout(function(){
$(".caracol").css('left','-60px');
},1000);
});
Hay que destacar que al crear el caracol, se le asigna una velocidad al azar y se calcula el tiempo que tardará en cruzar la pantalla. Ese valor se usa para la transición. Otra cosa importante es que tenemos que dar tiempo al DOM para que integre la imagen, por eso hacemos el setTimeout.
