Posted by SeeDoubleYou on 6th July 2010
0

Create Konamicode easteregg with jQuery

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!

Now, 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

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 (no, not this site, not yet that is). 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:

  1. var kkeys = [], konami = "38,38,40,40,37,39,37,39,98,97"; //the keycodes for the konamicode
  2. $(document).keypress(function (e) {
  3.     var keyCode = e.keyCode != 0 ? e.keyCode : e.which; // retrieve keycode of the key that was pressed
  4.     kkeys.push( keyCode ); //add keycode to list
  5.     if ( kkeys.toString().indexOf( konami ) >= 0 )
  6.     {
  7.         // the list contains the konamicode, easter egg found!
  8.         $(‘body’).animate({backgroundColor: ‘#000000′}); // animate backgroundcolor
  9.         kkeys = [];
  10.     }
  11. });
  12.  

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

  1. var kkeys = [], konami = "38,38,40,40,37,39,37,39,98,97";
  2. $(document).keypress(function (e) {
  3.         var keyCode = e.keyCode != 0 ? e.keyCode : e.which;
  4.         kkeys.push( keyCode );
  5.         if ( kkeys.toString().indexOf( konami ) >= 0 )
  6.         {
  7.                 Shadowbox.open({
  8.                         content:        ‘http://www.youtube.com/v/oHg5SJYRHA0&autoplay=1′,
  9.                         player:         ’swf’,
  10.                         width:          480,
  11.                         height:         385,
  12.                         options:        {
  13.                                                         modal:  true
  14.                                                 }
  15.                 });
  16.                 kkeys = [];
  17.         }
  18. });
  19.  

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

Have fun!

var kkeys = [], konami = “38,38,40,40,37,39,37,39,98,97″;
$(document).keypress(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 = [];
}
});
Share and Enjoy:
  • Print
  • Digg
  • del.icio.us
  • Mixx
  • Google Bookmarks
  • email
  • LinkedIn
  • PDF
  • Reddit
  • Slashdot
  • StumbleUpon
  • Symbaloo
  • Suggest to Techmeme via Twitter
  • Twitthis

No comments yet!

Post your comments