Facebook has featured in social media blogs recently for adding a Konami code Easter egg in their home page. In this blog post I show you how to add similar “functionality” to your site using Javascript.
First, the full code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | // check to make sure that the browser can handle window.addEventListener if (window.addEventListener) { // create the keys and konami variables var keys = [], konami = "38,38,40,40,37,39,37,39,66,65"; // bind the keydown event to the Konami function window.addEventListener("keydown", function(e){ // push the keycode to the 'keys' array keys.push(e.keyCode); // and check to see if the user has entered the Konami code if (keys.toString().indexOf(konami) >= 0) { // do something such as: // alert('Konami'); // and finally clean up the keys array keys = []; }; }, true); }; |
The script adds a callback function to the keydown event which stores the keycode in the keys array. It then checks the array against the pre-defined konami array (which contains a keycoded version of the Konami code).
Found the Konami code (or any other easter eggs) on the web? Let me know in the comments.
Thank you so much for this. I was looking for the js/jQuery implementation of the Konami Code but almost all of the google results I opened said “link to google’s repository, etc..”
Which doesn’t really teach me anything. =/
As for the sites that use the konami code, konamicodesites.com lists them. But you’ll have to enter the konami code to see the list. =) [the jquery site uses the konami code]
mary added these pithy words on May 13.09 at 4:45 amIs it possible to make up a different code to use? How could do that if you know?
x0fx3 added these pithy words on May 22.09 at 1:05 amIf you want to use a different code just replace the keycodes in the ‘konami’ variable.
Matt added these pithy words on May 22.09 at 10:11 amA very handy hint!
I’ve seen a lot of sites implement this recently.
http://konamicodesites.com/
Justin added these pithy words on Jun 08.09 at 7:10 pmhow to implement this inside PHP?
Dod added these pithy words on Jun 09.09 at 12:00 pmThis effect isn't possible with PHP. It requires client-side code to tell which keys the user has pressed which is something that PHP, a server-side language, is simply unable to do.
Matt added these pithy words on Jun 09.09 at 8:11 amThis effect isn't possible with PHP. It requires client-side code to tell which keys the user has pressed which is something that PHP, a server-side language, is simply unable to do.
mattkirman added these pithy words on Jun 09.09 at 8:11 amThis effect isn't possible with PHP. It requires client-side code to tell which keys the user has pressed which is something that PHP, a server-side language, is simply unable to do.
Matt added these pithy words on Jun 09.09 at 8:11 amThis effect isn't possible with PHP. It requires client-side code to tell which keys the user has pressed which is something that PHP, a server-side language, is simply unable to do.
Matt added these pithy words on Jun 09.09 at 8:11 am@Dod This effect isn’t possible with PHP. It requires client-side code to tell which keys the user has pressed which is something that PHP, a server-side language, is simply unable to do.
Matt added these pithy words on Jun 09.09 at 3:31 pmThis effect isn't possible with PHP. It requires client-side code to tell which keys the user has pressed which is something that PHP, a server-side language, is simply unable to do.
Matt added these pithy words on Jun 09.09 at 4:11 pm[...] Found at: Matt Kirman / How to recreate the Konami code in Javascript [...]
Snowing + Konami - Hot Scripts Forums added this pingback on Nov 26.09 at 1:42 pmHey, once you get the konami code implemented, what do you have to do in order to make the code do something, like go to a hidden page?
ReederDa added these pithy words on Apr 02.10 at 8:10 pmTo redirect to another page you'll need to use the window.location attribute e.g.
if (keys.toString().indexOf(konami) >= 0) {
Matt added these pithy words on Apr 02.10 at 8:53 pmwindow.location = “http://your-hidden-page.com”;
keys = [];
};
Thank you!
ReederDa added these pithy words on Apr 05.10 at 5:50 pmWhere do you put this extra bit of code?
Just replace '// alert('konami')' with 'window.location = 'http://your-hidden-page.com'. Probably should have said this the first time
Matt added these pithy words on Apr 05.10 at 6:54 pmSorry, I probably seem like i don't know anything, but i can't seem to get the code to work. I'm using dreamweaver to preview the site, and i have the javascript in a separate file. When I preview the webpage and try the code, nothing happens. Is there something I'm missing?
ReederDa added these pithy words on Apr 08.10 at 5:45 pmHow come you haven't the konami code implemented on this page??
Raz added these pithy words on Apr 27.10 at 4:07 pmFAIL!