Developer - Entrepeneur - Rockstar

Create a Konamicode easteregg with jQuery

| Javascript, jQuery | 0 Comments

So here you are. You have just spend weeks on your brand new website and you feel quite satisfied with the result, but still there’s this feeling as if you missing something. Of course, some good ol’ easter-eggs!

I could go rambling about the use of easter-eggs, but since there isn’t any (exept for giving the millions of people that visit your site everyday a smile on their face), lets get to the point!

The konami code is a code used in may video games as a cheat code, first used in the game Gradius. This is the code:

The Konami Code

Many websites now have this code implemented as an easter-egg. It is actually quite easy to create this, and with jQuery it becomes even simpler.

This is how to create a konamicode easter-egg that animates the backgroundcolor of the page to black with jquery:

//the keycodes for the konamicode
var kkeys = [], konami = "38,38,40,40,37,39,37,39,66,65"; 

$(document).keydown(function (e) {
    // retrieve keycode of the key that was pressed
    var keyCode = e.keyCode != 0 ? e.keyCode : e.which; 

    kkeys.push( keyCode ); //add keycode to list
    if ( kkeys.toString().indexOf( konami ) >= 0 )
    {
        // the list contains the konamicode, easter egg found!
        // set background color to black
        $(‘body’).css({backgroundColor: '#000000'});         
        kkeys = [];
    }
});

Now this isn’t the best easter-egg ever written, but you can change the $('body').css() part to whatever you want. For example, if you use shadowbox, this is how you could make the easteregg rickroll your visitors:

var kkeys = [], konami = "38,38,40,40,37,39,37,39,66,65";

$(document).keydown(function (e) {
    var keyCode = e.keyCode != 0 ? e.keyCode : e.which;
    kkeys.push( keyCode );
    if ( kkeys.toString().indexOf( konami ) >= 0 ) {
        Shadowbox.open({
            content: ‘http://www.youtube.com/v/oHg5SJYRHA0&autoplay=1′,
            player:  ’swf’,
            width:   480,
            height:  385,
            options: {
                modal:  true
            }
        });
        kkeys = [];
    }
});

All that has to be done to make the easter-egg appear is to enter the code on the keyboard.

Have fun!

Add Comment