sábado, 26 de septiembre de 2015

¿Qué esconde http://www.omfgdogs.com? xDD

El otro día, mi amigo Thomás me pasó un enlace a la página http://www.omfgdogs.com y me quedé un poco pillado cuando ví aparecer lo siguiente:


Lo que vemos en la imagen de arriba, es una serie de perritos repetidos por toda la pantalla corriendo en bucle.

Si inspeccionamos el código fuente, podemos ver que captura los eventos de las pulsaciones del teclado.


En este caso, podemos ver que el evento "keydown" incluye el siguiente código:


function(e) {
  kkeys.push(e.keyCode);
  if (kkeys.toString().indexOf(konami) >= 0) {
    if (triggered == false) {
      triggered = true;
      kkeys.length = 0;
      soundManager.stopAll();
      $("body").append("<div><video class='centre' id='stormvind' autoplay controls loop width='window.innerWidth' height='window.innerHeight'><source src='stormvind.webm' type='video/webm'></video></div>");
      var video = document.getElementById("stormvind");
    } else if (triggered == true) {
      triggered = false;
      $("#stormvind").remove();
      soundManager.play('omfgdogs');
    }
  }
  while (kkeys.length >= konami.split(',').length) {
    kkeys.shift();
  }
}


Podemos observar que la tecla pulsada es buscada dentro de una variable, y si buscamos esa variable, vemos que se inicializa en el fichero wat.js de la siguiente manera:

var kkeys = [], konami = "38,38,40,40,37,39,37,39,66,65";

 Dichos valores tienen un significado, el cual es el siguiente:

38 = Flecha arriba
38 = Flecha arriba
40 = Flecha abajo
40 = Flecha abajo
37 = Flecha izquierda
39 = Flecha derecha
66 = B
65 = A
(Según mis amigos de Puerta de Hades, se trata de un truco usado en los juegos de antaño de la compañía Konami :-) )


Volviendo al script, nos dice que si el valor de la tecla pulsada se encuenta dentro de la variable konami, se cumple la primera condición:

if (kkeys.toString().indexOf(konami) >= 0)

 La segunda condición a cumplir, es que la variable triggered sea false, y como vemos en la siguiente linea del archivo wat.js, ya está declarada al inicio como false:

var triggered = false;
 
por lo cual, la siguiente condición también se cumple:

if (triggered == false)

A continuación resumimos un poco lo que continúa en la función, en las cosas más importantes.

pone triggered en true para evitar más lecturas del teclado hasta que este bloque de código haya sido procesada:

triggered = true;

Y ahora mostramos la parte del código que más mola (xD):

$("body").append("<div><video class='centre' id='stormvind' autoplay controls loop width='window.innerWidth' height='window.innerHeight'><source src='stormvind.webm' type='video/webm'></video></div>");

Que lo que hace es lo siguiente, en la etiqueta body nos añade el siguiente html:

<div><video class='centre' id='stormvind' autoplay controls loop width='window.innerWidth' height='window.innerHeight'><source src='stormvind.webm' type='video/webm'></video></div>

Que como podéis ver, no es nada más que un video con la música del bucle de los perritos de la web pero sin acelerar, el cual su url de acceso directo es la siguiente:

http://www.omfgdogs.com/stormvind.webm


Y eso es básicamente lo que hace la web... aunque hay que decir que rular, muy bien no rula jeje.

Saludos, y espero que os haya gustado la tontería.

Gracias.

No hay comentarios:

Publicar un comentario