Un Konami Code en JS vanilla ou jQuery

Vous avez certainement eu l’envie un jour de créer un konami code sur votre site web ? Comment ? Cela ne vous parle pas ? Vous savez ces petits « Easter Egg » (fonction cachée dans un programme) qui s’active après exécution d’une commande précise ? Ok, voyons cela ensemble.

Vous allez me dire que ça n’a pas grand chose avec la conception Web, mais si on s’en tient uniquement à des choses sérieuses, ça va devenir ennuyant. Je vous propose donc deux bouts de code, l’un en JS Vanilla, l’autre utilisant jQuery, afin d’implémenter la fonction de base d’un Konami Code. Ce sera à vous ensuite de faire le reste.

Exemples de Konami Codes

Un site regroupe les différents sites web proposant un Konami Code : KonamiCodeSites
Oui oui, il vous faudra entrer le code pour accéder au contenu.
Le voici pour ceux qui ne connaissent pas :

Haut, haut, bas, bas, gauche, droite, gauche, droite, B, A

jQuery Konami Code

Si vous avez chargé jQuery sur votre site web, le code suivant vous permet de déclencher le Konami Code :

//Haut, haut, bas, bas, gauche, droite, gauche, droite, B, A
var k = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65],
n = 0;
$(document).keydown(function (e) {
    if (e.keyCode === k[n++]) {
        if (n === k.length) {
            alert('Konami !!!'); // à remplacer par votre code
            n = 0;
            return false;
        }
    }
    else {
        n = 0;
    }
});

Konami JS vanilla

Il existe un script disponible sur Github nommé Konami JS.

<script src="konami.js"></script>
 
<script>
var easter_egg = new Konami(function() { 
    alert('Konami code!'); //remplacez par votre code
});
</script>

Le petit bonux de ce script c’est qu’il supporte les interfaces tactiles.
Le code devient alors :

Haut, haut, bas, bas, gauche, droite, gauche, droite, tap, tap ,tap

Les mouvements à faire sont des « swipes » (toucher/glisser), sauf pour les tap où il faut tapoter, bien sûr.

C’est tout pour cet article super sérieux !
Bonne année 2014 à tous !