Des Easter Eggs sur vos sites avec le Konami Code JavaScript

Connaissez-vous ce petit code de triche qu'est le Konami Code ? Ce code à entrer dans les jeux vidéos permet de débloquer des options secrètes. Je vous propose de l'implémenter sur vos sites web en JavaScript avec une petite API maison gérant le clavier et le tactile. Suivez le guide !

L'API présenté dans cet article lève un événement JavaScript quand vous entrez la célèbre séquence du Konami Code « Haut Haut Bas Bas Gauche Droite Gauche Droite B A » avec votre clavier. Cela marche également avec votre doigt en glissant « Haut Haut Bas Bas Gauche Droite Gauche Droite » puis en faisant « Tap Tap ».

Utilisation Basique

new KonamiCode(function () {
    // Faites quelque chose ici.
    // Cette partie est exécutée si « Haut Haut Bas Bas Gauche Droite Gauche Droite B A »
    // est reconnue depuis votre clavier ou votre mouvement de doigt sur l'écran.
});

Exemple plus complet

Dans cet exemple, nous allons autoriser la reconnaissance du Konami Code uniquement si la souris ou le doigt est sur l'élément <article>. Une fois que la séquence aura été reconnue, on désactivera la reconnaissance du Konami Code.

var kc = new KonamiCode({
    listener: document.getElementsByTagName("article")[0]
});

kc.setCallback(function () {
    kc.disable();

    // Faites quelque chose ici.
    // Cette partie est exécutée si « Haut Haut Bas Bas Gauche Droite Gauche Droite B A »
    // est reconnue depuis votre clavier ou votre mouvement de doigt sur l'écran.
});

Documentation de l'API

Pour obtenir la dernière version de l'API documentée, référez-vous à la documentation sur Github

Version: 0.8.0

Auteur: Bruno Lesieur

• KonamiCode

  • new KonamiCode([options])

  • instance

    • .enable() ⇒ KonamiCode
    • .enableKeyboardKeys() ⇒ KonamiCode
    • .enableTouchGesture() ⇒ KonamiCode
    • .disable() ⇒ KonamiCode
    • .disabledKeyboardKeys() ⇒ KonamiCode
    • .disabledTouchGesture() ⇒ KonamiCode
    • .setListener(listener) ⇒ KonamiCode
    • .setCallback(callback) ⇒ KonamiCode
    • .setOptions([options]) ⇒ KonamiCode

  • static

    • .noConflict()
    • .getNumberOfInstance() ⇒ number

new KonamiCode([options])

Créer une reconnaissance de la séquence du Konami Code « Haut Haut Bas Bas Gauche Droite Gauche Droite B A » sur un HTMLElement précis ou sur le HTMLDocument global.

Param	Type	Description
[options]	Object | function	Contient toutes les options. Si le type de options est Function, il est exécuté après que la séquence du Konami Code est été reconnue.
[options.callback]	function	Si options n'est pas une Function, options.callback est exécuté après que la séquence du Konami Code ai été reconnue. Le premier argument fourni par la callback est l'instance courante de KonamiCode.
[options.listener]	Node	Par défaut c'est le HTMLDocument window.document. Vous pouvez passer un HTMLElement comme <input> (HTMLInputElement) pour seulement reconnaître la séquence du Konami Code quand la souris ou le doigt est sur cet élément.
[options.debug]	boolean	Par défaut sa valeur est à false. Quand vous changez cette valeur à true, cela vous permet de voir tous les messages de débogue dans la console.

konamiCode.enable() ⇒ KonamiCode

Active l'écoute de la séquence du Konami Code.

Type: instance de méthode du KonamiCode

Return: KonamiCode - Instance courante KonamiCode

konamiCode.enableKeyboardKeys() ⇒ KonamiCode

Active l'écoute de la séquence du Konami Code pour les touches du clavier.

Kind: instance method of KonamiCode

Returns: KonamiCode - Current instance of KonamiCode

konamiCode.enableTouchGesture() ⇒ KonamiCode

Active l'écoute de la séquence du Konami Code pour les gestes tactiles.

Kind: instance method of KonamiCode

Returns: KonamiCode - Current instance of KonamiCode

konamiCode.disable() ⇒ KonamiCode

Désactive l'écoute de la séquence du Konami Code.

Type: instance de méthode du KonamiCode

Return: KonamiCode - Instance courante KonamiCode

konamiCode.disabledKeyboardKeys() ⇒ KonamiCode

Désactive l'écoute de la séquence du Konami Code pour les touches du clavier.

Kind: instance de méthode du KonamiCode

Returns: KonamiCode - Instance courante KonamiCode

konamiCode.disabledTouchGesture() ⇒ KonamiCode

Désactive l'écoute de la séquence du Konami Code pour les gestes tactiles.

Kind: instance de méthode du KonamiCode

Returns: KonamiCode - Instance courante KonamiCode

konamiCode.setListener(listener) ⇒ KonamiCode

Change l'écouteur. L'ancien écouteur ne fonctionnera plus. Note: changer l'écouteur ré-active une instance que aurait été précédemment disable().

Type: instance de méthode du KonamiCode

Return: KonamiCode - Instance courante KonamiCode

Param	Type	Description
listener	Node	Vous pouvez passer un HTMLElement comme <input> (HTMLInputElement) pour seulement reconnaître la séquence du Konami Code quand la souris ou le doigt est sur cet élément.

konamiCode.setCallback(callback) ⇒ KonamiCode

Change la Function exécutée après que la séquence du Konami Code ai été reconnue.

Type: instance de méthode du KonamiCode

Return: KonamiCode - Instance courante KonamiCode

Param	Type	Description
callback	function	Function exécutée après que la séquence du Konami Code ai été reconnue. Le premier argument fourni par la callback est l'instance courante du KonamiCode.

Example

new KonamiCode().setCallback(function (konamiCode) {
    konamiCode.disable();
    // Faites quelque chose ici.
});

konamiCode.setOptions([options]) ⇒ KonamiCode

Changer les options pour l'instance courante.

Kind: instance de méthode du KonamiCode

Returns: KonamiCode - Instance courante KonamiCode

Param	Type	Description
[options]	Object	Contient toutes les options.
[options.callback]	function	Function exécutée après que la séquence du Konami Code ai été reconnue. Le premier argument fourni par la callback est l'instance courante du KonamiCode.
[options.listener]	Node	Par défaut c'est le HTMLDocument window.document. Vous pouvez passer un HTMLElement comme <input> (HTMLInputElement) pour seulement reconnaître la séquence du Konami Code quand la souris ou le doigt est sur cet élément.
[options.debug]	boolean	Par défaut sa valeur est à false. Quand vous changez cette valeur à true, cela vous permet de voir tous les messages de débogue dans la console.

KonamiCode.noConflict()

Si une variable KonamiCode existe déjà dans l'environnement global, vous pouvez la conserver en changeant le nom du KonamiCode. Vous pouvez aussi simplement utiliser cette fonction pour changer le nom de la variable global « KonamiCode ».

Type: methode statique du KonamiCode

Example

<script src="other/konami-code.js"></script>
<script src="last/konami-code.js"></script>
<script>
    var MyKC = KonamiCode.noConflict();
    console.log(KonamiCode); // Return the other KonamiCode
    console.log(MyKC); // Return your KonamiCode
</script>

KonamiCode.getNumberOfInstance() ⇒ number

Retourne le nombre de fois que KonamiCode a été instancié.

Type: méthode statique du KonamiCode

Return: number - Nombre d'instance de KonamiCode créer depuis le début.

Chaînage

Toutes les méthodes instanciées de l'API retourne l'instance courante de l'objet KonamiCode. Cela vous permet d'instancier un objet comme ceci :

new KonamiCode()
    .disable()
    .enable()
    .setListener(document.getElementsByTagName("body")[0])
    .setCallback(function (konamiCode) {
        konamiCode.disable();
        // Faites quelque chose ici.
        // Cette partie est exécutée si « Haut Haut Bas Bas Gauche Droite Gauche Droite B A »
        // est reconnue depuis votre clavier ou votre mouvement de doigt sur l'écran.
    });

Mode Débogue

Vous pouvez voir chaque étape de la vie de l'instance dans votre débogueur par des messages console si le mode débogue est activé.

new KonamiCode({
    debug: true,
    callback: function (konamiCode) {
        konamiCode.disable();
    }
});

Importer le Fichier JavaScript##

Par Téléchargement

• https://github.com/MachinisteWeb/konami-code-js

Via NPM

npm install konami-code-js

Via CDN

• Pour le développement :

<script src="https://rawgit.com/MachinisteWeb/konami-code-js/master/src/konami-code.js"></script>

• Pour la production :

<script src="https://cdn.rawgit.com/MachinisteWeb/konami-code-js/master/src/konami-code.js"></script>

Avec un injecteur AMD

<script src="require.js"></script>
<script>
    requirejs(["konami-code"], function (KonamiCode) {
        new KonamiCode(function () {
            // Do something here.
            // This part will be executed if « Up Up Down Down Left Right Left Right B A »
            // is recognised from Keyboard or Touch Gesture.
        });
    });
</script>

Avec un injecteur CommonJS

var KonamiCode = require("konami-code-js");

new KonamiCode(function () {
    // Do something here.
    // This part will be executed if « Up Up Down Down Left Right Left Right B A »
    // is recognised from Keyboard or Touch Gesture.
});

Bonus : le Konami Code de cette page

Si vous testez le Konami Code depuis cette page voici ce qui sera exécuté :

// Création d'un HTMLScriptElement.
var script = document.createElement("script"),
    // Référence sur le HTMLBodyElement.
    body = document.getElementsByTagName("body")[0],
    // Création d'un interrupteur activé/désactivé.
    toggle = false;

// Notre script sera de type JavaScript
script.type = "text/javascript";

// Ce code s'exécutera quand la `src`
// de notre HTMLScriptElement sera rempli
// et quand le HTMLScriptElement sera injecté dans le DOM.
script.addEventListener("load", function () {

    // Création d'un écouteur de Konami Code.
    new KonamiCode(function () {

        // Surprise ou retour à la normal.
        if (toggle)   {
            toggle = false;
            body.style = "overflow-x: hidden;transition: transform 2s ease;transform: rotate(0deg)";
        } else {
            toggle = true;
            body.style = "overflow-x: hidden;transition: transform 2s ease;transform: rotate(180deg)";
        }
    });
});

// Attribution d'un fichier et injection de HTMLScriptElement dans le DOM.
script.src = "https://cdn.rawgit.com/MachinisteWeb/konami-code-js/master/src/konami-code.js";
body.appendChild(script);