How to recreate the Konami code in Javascript

Facebook has featured in social media blogs recently for adding a Konami code Easter egg to 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.

  • http://mary.twirp.net/ mary

    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]

  • http://mary.twirp.net mary

    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]

  • x0fx3

    Is it possible to make up a different code to use? How could do that if you know?

  • x0fx3

    Is it possible to make up a different code to use? How could do that if you know?

  • http://twitter.com/mattkirman Matt

    If you want to use a different code just replace the keycodes in the ‘konami’ variable.

  • http://mattkirman.com Matt

    If you want to use a different code just replace the keycodes in the ‘konami’ variable.

  • http://www.itsajustinthing.com/ Justin

    A very handy hint!
    I’ve seen a lot of sites implement this recently.

    http://konamicodesites.com/

  • http://www.itsajustinthing.com Justin

    A very handy hint!
    I’ve seen a lot of sites implement this recently.

    http://konamicodesites.com/

  • http://www.ocean-leecher.net/ Dod

    how to implement this inside PHP?

  • http://www.ocean-leecher.net Dod

    how to implement this inside PHP?

  • http://mattkirman.com Matt

    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.

  • mattkirman

    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.

  • http://mattkirman.com Matt

    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.

  • http://mattkirman.com Matt

    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.

  • http://mattkirman.com/ Matt

    @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.

  • http://mattkirman.com Matt

    @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.

  • http://mattkirman.com Matt

    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.

  • Pingback: Snowing + Konami - Hot Scripts Forums

  • ReederDa

    Hey, 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?

  • http://twitter.com/mattkirman Matt

    To redirect to another page you'll need to use the window.location attribute e.g.

    if (keys.toString().indexOf(konami) >= 0) {
    window.location = “http://your-hidden-page.com”;
    keys = [];
    };

  • ReederDa

    Thank you!
    Where do you put this extra bit of code?

  • http://twitter.com/mattkirman Matt

    Just replace '// alert('konami')' with 'window.location = 'http://your-hidden-page.com'. Probably should have said this the first time :)

  • ReederDa

    Sorry, 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?

  • Raz

    How come you haven't the konami code implemented on this page??
    FAIL!

  • Pingback: 9 Inspirational Website Effects Deconstructed

  • Pingback: 9 Inspirational Website Effects Deconstructed | My Blog

  • Pingback: Design Magazine » 9 Inspirational Website Effects Deconstructed

  • Pingback: 9 Inspirational Website Effects Deconstructed » abdie.web.id

  • Pingback: 9 Inspirational Website Effects Deconstructed | Cairns Web Design

  • Pingback: 9 Inspirational Website Effects Deconstructed | Free Web Design Tucson

  • Pingback: 9 Inspirational Website Effects Deconstructed | WebFree.ro

  • Pingback: 9 Inspirational Website Effects Deconstructed | WebScriptPlus.com

  • Pingback: 9 Inspirational Website Effects Deconstructed | Graphic Design

  • Pingback: 9 Inspirational Website Effects Deconstructed « Your Blog

  • Pingback: 9 Inspirational Website Effects Deconstructed | Your Blog

  • Pingback: 9 Inspirational Website Effects Deconstructed | EtutsLive.com