{"id":1001,"date":"2013-10-04T17:39:36","date_gmt":"2013-10-04T16:39:36","guid":{"rendered":"http:\/\/cyol.fr\/blog\/?p=1001"},"modified":"2013-11-14T16:43:06","modified_gmt":"2013-11-14T15:43:06","slug":"konami-code-en-javascript","status":"publish","type":"post","link":"https:\/\/cyol.fr\/blog\/post\/konami-code-en-javascript\/","title":{"rendered":"Konami Code en javascript"},"content":{"rendered":"

\"\"<\/a>Travaillant actuellement sur un petit projet de jeu HRML5\/JS\/CSS pouvant tourner en mode offline, j’ai voulu ins\u00e9rer un mode de jeu particulier sans toutefois mettre clairement \u00e0 l’\u00e9cran un bouton pour d\u00e9clencher cette action.<\/p>\n

J’ai \u00e9videmment pens\u00e9 \u00e0 un Konami Code<\/a> !<\/p>\n


\nEn recherchant sur internet \u00ab\u00a0Konami Code javascript\u00a0\u00bb on en trouve un certain nombre, certains m\u00eame avec une biblioth\u00e8que compl\u00e8te. Mais je voulais juste une petite fonctionnalit\u00e9 qui ne me prendrait que quelques lignes.<\/p>\n

J’ai finalement trouv\u00e9 cet exemple de xUMI<\/a> qui me convenait presque.<\/p>\n

jQuery(function(){\r\n    var kKeys = [];\r\n    function Kpress(e){\r\n        kKeys.push(e.keyCode);\r\n        if (kKeys.toString().indexOf(\"38,38,40,40,37,39,37,39,66,65\") >= 0) {\r\n            jQuery(this).unbind('keydown', Kpress);\r\n            kExec();\r\n        }\r\n    }\r\n    jQuery(document).keydown(Kpress);\r\n});\r\nfunction kExec(){\r\n    \/\/Ins\u00e9rer ici les actions d\u00e9clench\u00e9es par le Konami Code\r\n    alert(\"KONAMI CODE !\");\r\n}<\/pre>\n
Ma principale g\u00eane \u00e9tant que si on se loupait dans la saisie ou si on ne cherchait pas \u00e0 faire le Code, le tableau kKeys stockant les touches utilis\u00e9es continuait \u00e0 stocker sans arr\u00eat. Dans un premier temps, j’ai donc ajout\u00e9 un simple test sur le nombre d’\u00e9l\u00e9ment de kKeys avec vidange du tableau kKeys si trop plein. On laisse plus de 10 \u00e9l\u00e9ments car on recherche la suite du Code dans la liste compl\u00e8te des entr\u00e9es dans kKeys.<\/p>\n
function Kpress(e){\r\n    \/\/Ajout d'un test sur le nombre d'\u00e9l\u00e9ment dans kKeys\r\n    if(kKeys.length < 30){\r\n        kKeys.push(e.keyCode);\r\n        if (kKeys.toString().indexOf(\"38,38,40,40,37,39,37,39,66,65\") >= 0) {\r\n            $(this).unbind('keydown', Kpress);\r\n            kExec();\r\n        }\r\n    }else{\r\n        kKeys = [];\r\n    }\r\n}<\/pre>\n
Malheureusement, comment savoir o\u00f9 on en est et \u00e0 quel moment c’est r\u00e9initialis\u00e9 ? Du coup j’ai ajout\u00e9 un test sur les touches tap\u00e9s, ne stockant dans kKeys que les touches attendues dans le Konami Code et r\u00e9initialisant le tableau kKeys en cas d’utilisation d’une touche autre :<\/p>\n
$(function(){\r\n    $(document).keydown(Kpress);\r\n});\r\nvar kKeys = [];\r\nfunction Kpress(e){\r\n    var toucheOk = [37, 38, 39, 40, 65, 66];\r\n    if($.inArray(e.keyCode, toucheOk) > -1 && kKeys.length < 30){\r\n        kKeys.push(e.keyCode);\r\n        if (kKeys.toString().indexOf(\"38,38,40,40,37,39,37,39,66,65\") >= 0) {\r\n            $(this).unbind('keydown', Kpress);\r\n            kExec();\r\n        }\r\n    }else{\r\n        kKeys = [];\r\n    }\r\n}\r\nfunction kExec(){\r\n   alert(\"KONAMI CODE !\")\r\n}<\/pre>\n
Note : Pour fonctionner il faut forc\u00e9ment charger la biblioth\u00e8que jQuery<\/a> avant le script.<\/p>\n