{"id":3836,"date":"2014-01-14T12:19:36","date_gmt":"2014-01-14T11:19:36","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=3836"},"modified":"2015-05-03T12:40:28","modified_gmt":"2015-05-03T10:40:28","slug":"konami-code-js-vanilla-jquery","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/konami-code-js-vanilla-jquery","title":{"rendered":"Un Konami Code en JS vanilla ou jQuery"},"content":{"rendered":"

Vous avez certainement eu l’envie un jour de cr\u00e9er un konami code sur votre site web ? Comment ? Cela ne vous parle pas ? Vous savez ces petits \u00ab\u00a0Easter Egg\u00a0\u00bb (fonction cach\u00e9e dans un programme) qui s’active apr\u00e8s ex\u00e9cution d’une commande pr\u00e9cise ? Ok, voyons cela ensemble.<\/p>\n

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

Exemples de Konami Codes<\/h2>\n

Un site regroupe les diff\u00e9rents sites web proposant un Konami Code : KonamiCodeSites<\/a>
\nOui oui, il vous faudra entrer le code pour acc\u00e9der au contenu.
\nLe voici pour ceux qui ne connaissent pas :<\/p>\n

Haut, haut, bas, bas, gauche, droite, gauche, droite, B, A<\/code><\/pre>\n
jQuery Konami Code<\/h2>\n
Si vous avez charg\u00e9 jQuery sur votre site web, le code suivant vous permet de d\u00e9clencher le Konami Code :<\/p>\n
\/\/Haut, haut, bas, bas, gauche, droite, gauche, droite, B, A\r\nvar k = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65],\r\nn = 0;\r\n$(document).keydown(function (e) {\r\n    if (e.keyCode === k[n++]) {\r\n        if (n === k.length) {\r\n            alert('Konami !!!'); \/\/ \u00e0 remplacer par votre code\r\n            n = 0;\r\n            return false;\r\n        }\r\n    }\r\n    else {\r\n        n = 0;\r\n    }\r\n});<\/code><\/pre>\n
Konami JS vanilla<\/h2>\n
Il existe un script disponible sur Github nomm\u00e9 Konami JS<\/a>.<\/p>\n
\r\n<script src=\"konami.js\"><\/script>\r\n\u00a0\r\n<script>\r\nvar easter_egg = new Konami(function() { \r\n    alert('Konami code!'); \/\/remplacez par votre code\r\n});\r\n<\/script><\/code><\/pre>\n
Le petit bonux de ce script c’est qu’il supporte les interfaces tactiles.
\nLe code devient alors :<\/p>\n
Haut, haut, bas, bas, gauche, droite, gauche, droite, tap, tap ,tap<\/code><\/pre>\n
Les mouvements \u00e0 faire sont des \u00ab\u00a0swipes\u00a0\u00bb (toucher\/glisser), sauf pour les tap o\u00f9 il faut tapoter, bien s\u00fbr.<\/p>\n
C’est tout pour cet article super s\u00e9rieux !
\nBonne ann\u00e9e 2014 \u00e0 tous !<\/p>\n","protected":false},"excerpt":{"rendered":"
Vous avez certainement eu l’envie un jour de cr\u00e9er un konami code sur votre site web ? Comment ? Cela ne vous parle pas ? Vous savez ces petits \u00ab\u00a0Easter Egg\u00a0\u00bb (fonction cach\u00e9e dans un programme) qui s’active apr\u00e8s ex\u00e9cution d’une commande pr\u00e9cise ? Ok, voyons cela ensemble.<\/p>\n","protected":false},"author":4,"featured_media":3839,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[610,9],"tags":[125,52,576,577],"coauthors":[597],"class_list":["post-3836","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-tutoriels","tag-javascript","tag-jquery","tag-konami","tag-vanilla"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/3836","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=3836"}],"version-history":[{"count":0,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/3836\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/3839"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=3836"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=3836"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=3836"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=3836"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}