10
avril
2013

Intégrer facilement le Konami Code sur votre site

Vous connaissez le Konami Code ? Cette combinaison de touches composée au milieu d'un jeu pour débloquer des bonus ou tout simplement passer le niveau. Eh bien il est facile de le mettre en place dans un site web pour que ces les adeptes de ce code puissent découvrir une facette inattendue de la conception de votre blog, pour leur faire découvrir un mini-jeu ou une page cachée...

C'est quoi ce code ?

Haut, Haut, Bas, Bas, Gauche, Droite, Gauche, Droite, B, A

Dans tous les jeux édités par l'entreprise Konami, si vous tapez ce code vous aurez de belles surprises entre des vies supplémentaires, de l'équipement, ou une mort soudaine. On peut voir par exemple dans Les Mondes de Ralph le roi faire cette combinaison pour accéder au code source du jeu. Bien entendu il existe d'autres codes dans d'autres jeux pour obtenir des bonus :

Dans Tomb Raider 2 : allumer une torche, un pas en avant, un pas en arrière, trois tours sur soi-même et un saut en avant ou en arrière donnent respectivement un accès au niveau suivant et toutes les armes. Désolé je ne connais pas le code pour la déshabiller, mais JeffPalmier doit le connaître...
Dans Duke Nukem 2 : taper "eat" (avec un clavier anglais) permet de redonner de la vie et "nuk" donne toutes les munitions et l'arme du niveau en cours.
Dans Super Meat Boy : taper "petaphile" dans l'écran de sélection des personnages débloque Tofu Boy, un personnage jouable aux capacités réduites.

Implémentation

Conception

La conception est très simple : intercepter au clavier un code de 10 touches. On stocke donc le vrai code dans un tableau et on empile les entrées clavier dans un autre. Pour l'interception de caractères il vaut mieux prendre jQuery pour ne pas se poser de questions quant à la compatibilité des navigateurs...

Le code Javascript

Un peu de Javascript à placer au début de votre page. Etant donné que l'on capture les caractères, pensez éventuellement à surcharger votre fonction gérant les raccourcis clavier si vous en avez une.

// initialisation du buffer clavier var myCode = new Array(); for(i=0;i<10;i++) { myCode[i]=0; } // initialisation du konami code (à l'envers cause empilage) var kCode = new Array(65,66,39,37,39,37,40,40,38,38); // empiler la dernière touche saisie function stackArray(array, value) { for(i=9;i>0;i--) { array[i] = array[i-1]; } array[0] = value; } // tester les différences entre le code et la saisie function testArray(a,b) { for(i=0;i<a.length;i++) { if (a[i]!=b[i]) return false; } return true; } // action! function konami() { alert("konami"); } // interception de saisie $(document).keyup(function(event) { stackArray(myCode,event.keyCode); // si c'est la dernière lettre "a" du code if (event.keyCode==65 && testArray(myCode,kCode)) { konami(); } });

Et après ?

A vous de voir ce que vous voulez faire. Grâce à Javascript et jQuery vous pouvez faire des trucs assez amusants.

Rediriger vers une autre page :

window.location.href="http://mapage.com";

Afficher une boîte d'alerte :

alert("message");

Changer la couleur du fond d'un élément (ou du site si l'élément est body) :

$("#identifiant").css("background-color", "#FF4FC7");

Un code qui se propage

Google, déjà connu pour ses recherches loufoques telles que "do a barrel roll" ou "zerg rush" a mis le Code dans Google Reader pour faire apparaître des ninjas dans la barre de menu.
Facebook fait apparaître des étoiles.
En faisant ce code, on déclenche un succès dans Universe Sandbox.

Ma motivation de cette implémentation vient d'une fiche de qualité de @Nico3333fr spécifiant qu'un bon site doit obligatoirement avoir un Konami Code. Son site en contient d'ailleurs un !

Une liste de tous les sites utilisant le Konami Code peut être trouvée ici ou ici. Bien entendu votre serviteur a implémenté ce Code ici, à vous de voir ce qu'il fait ! Et vous, qu'avez-vous trouvé ?

Vous pouvez aussi lire :