Konami Code en javascript

Travaillant actuellement sur un petit projet de jeu HRML5/JS/CSS pouvant tourner en mode offline, j’ai voulu insérer un mode de jeu particulier sans toutefois mettre clairement à l’écran un bouton pour déclencher cette action.

J’ai évidemment pensé à un Konami Code !

En recherchant sur internet « Konami Code javascript » on en trouve un certain nombre, certains même avec une bibliothèque complète. Mais je voulais juste une petite fonctionnalité qui ne me prendrait que quelques lignes.

J’ai finalement trouvé cet exemple de xUMI qui me convenait presque.

jQuery(function(){
    var kKeys = [];
    function Kpress(e){
        kKeys.push(e.keyCode);
        if (kKeys.toString().indexOf("38,38,40,40,37,39,37,39,66,65") >= 0) {
            jQuery(this).unbind('keydown', Kpress);
            kExec();
        }
    }
    jQuery(document).keydown(Kpress);
});
function kExec(){
    //Insérer ici les actions déclenchées par le Konami Code
    alert("KONAMI CODE !");
}

Ma principale gêne étant que si on se loupait dans la saisie ou si on ne cherchait pas à faire le Code, le tableau kKeys stockant les touches utilisées continuait à stocker sans arrêt. Dans un premier temps, j’ai donc ajouté un simple test sur le nombre d’élément de kKeys avec vidange du tableau kKeys si trop plein. On laisse plus de 10 éléments car on recherche la suite du Code dans la liste complète des entrées dans kKeys.

function Kpress(e){
    //Ajout d'un test sur le nombre d'élément dans kKeys
    if(kKeys.length < 30){
        kKeys.push(e.keyCode);
        if (kKeys.toString().indexOf("38,38,40,40,37,39,37,39,66,65") >= 0) {
            $(this).unbind('keydown', Kpress);
            kExec();
        }
    }else{
        kKeys = [];
    }
}

Malheureusement, comment savoir où on en est et à quel moment c’est réinitialisé ? Du coup j’ai ajouté un test sur les touches tapés, ne stockant dans kKeys que les touches attendues dans le Konami Code et réinitialisant le tableau kKeys en cas d’utilisation d’une touche autre :

$(function(){
    $(document).keydown(Kpress);
});
var kKeys = [];
function Kpress(e){
    var toucheOk = [37, 38, 39, 40, 65, 66];
    if($.inArray(e.keyCode, toucheOk) > -1 && kKeys.length < 30){
        kKeys.push(e.keyCode);
        if (kKeys.toString().indexOf("38,38,40,40,37,39,37,39,66,65") >= 0) {
            $(this).unbind('keydown', Kpress);
            kExec();
        }
    }else{
        kKeys = [];
    }
}
function kExec(){
   alert("KONAMI CODE !")
}

Note : Pour fonctionner il faut forcément charger la bibliothèque jQuery avant le script.

Billets similaires

Récupérer les valeurs communes de 2 array en javascript Faire une popup draggable avec JQuery Mobile Petit slideshow en jquery