Does Your Site Have The Konami Code?

konami-contra-cover

In my defense I’ve just returned from a two-week, mostly offline, holiday overseas. So I had no idea what he meant when my mate, Royce, sent me a direct tweet:

Why don’t you have a konami code on yer site?

Now, at this point I had the opportunity to quickly use Google to maintain the fragile charade that I’m hip to all the latest memes. But no, afflicted with sudden-onset honesty, I sent the less-than-stellar reply:

What’s a Konami Code?

I should have used the Google; my geek cred is in ruins. If there are any readers who have yet to hear of the Konami Code, then this issue will save you from the same fate.

I love easter eggs on web sites; I have a perverse attraction to spending the time and effort to write code for utterly pointless reasons. The Konami Code hails back to old-school console-gaming cheat codes; the key combo is up, up, down, down, left, right, left, right, B, A. If you’d like to know more, a video on Youtube explains everything. There’s been a rash of sites that have implemented an easter egg, triggered when you enter the code. The ESPN site did it for April Fools’ Day and the jQuery site has had a great one for ages, as well as Google Reader and even Facebook. Visit Konami Code Sites to find a list of sites.

I had a look around at several JavaScript-based solutions for implementing such an easter egg, and found a very slick jQuery example by Paul Irish that exhibits a little bit of JavaScript-fu. The script uses an event listener to intercept keydown events and keep track of all the keys entered. If the combination of keys pressed contains the Konami Code then the easter egg is triggered:

var kkeys = [], konami = "38,38,40,40,37,39,37,39,66,65";
$(document).keydown(function(e) {
  kkeys.push( e.keyCode );
  if ( kkeys.toString().indexOf( konami ) >= 0 ){
    $(document).unbind('keydown',arguments.callee);
    // Launch easter egg here          
  }
});

The script begins by declaring a couple of variables; kkeys, an empty array used to store the user’s key presses; and konami, a string representing the keycodes for the correct key combination.

An event listener is attached to the document object to listen for the keydown event. Every time a key is pressed while the page is loaded, the keycode is added to the kkey array. The script then checks to see if the Konami Code has been entered. If it has, then the event listener is removed and the easter egg is revealed.

Notice the use of arguments.callee? (I wrote about the strange but useful arguments object in Tech Times issue #215.) The callee property refers to the current function, so using arguments.callee is a great way for an event listener function to remove itself. In this example it also enables the event listener function to remain anonymous.

The easter egg on the Paul Irish site uses the services of Cornify, a highly useful unicorn and rainbow web service:

$.getScript('http://www.cornify.com/js/cornify.js', function(){
  cornify_add();
  $(document).keydown(cornify_add);
});

There are a few other noteworthy examples I’ve found. Matt Snider has one using YUI where the script creates a custom event, and two other plain old JavaScript examples. The first is konami-js that uses timeouts to reset the Konami Code detection routine if there’s a long delay between key presses. The second is the onKonamiCode event handler by James Padolsey.

So what are you waiting for? You have the code; add the Konami Code to your site today.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.johngirvin.com johngirvin

    Funny! I wonder if there are any sites I can get away with adding it to…
     
    I think I’d add something like:
     
    while (kkeys.length > konami.length) {
        kkeys.shift();
    }

     …to change the example into using a circular buffer instead of an ever growing array of keypresses. It’s even more authentic as that’s generally how it was implemented in the old games too.

    (I haven’t tried the above code, check it yourself first!)

  • http://www.studio-gecko.com/ XLCowBoy

    I just found this on Facebook the other day and was surprised. Even when you type, something happens. Good fun.

  • Neil Bradley

    How pointless

  • http://www.krues8dr.com krues8dr

    This has now officially jumped the shark.

  • Jason

    I have had this on my site for a while. It is my portfolio site and I wanted a way for friends and family to get to my family photos without putting a link on the index page (they can’t seem to remember to add the /photos to the URL). What better way than the Konami code?

  • Justen

    I can’t believe you didn’t know what the Konami code is. Laa-aame. I didn’t know it was getting used on websites though, that’s great. The script is easy enough that you don’t really need an article describing it, but thanks for letting us in on the trend.

  • http://www.sitepoint.com/articlelist/487/ Andrew Tetlaw

    @Justen, I was never really into console gaming, PC gaming on the other hand…

  • http://www.rmwpublishing.net/ mountainash

    This is just begging for a mash up with jQuery Gestures.

  • http://www.sitepoint.com/articlelist/487/ Andrew Tetlaw

    @Neil Bradley, yes, that’s the point.

    @mountainash, great idea!

  • Anonymous

    I’m trying this idea at http://paulirish.com/2009/cornify-easter-egg-with-jquery/, it’s great and funny. Will update on my site later.

    Thanks for sharing.

  • thehetre

    I’m trying view js action on site http://paulirish.com/2009/cornify-easter-egg-with-jquery/. It’s great idea and funny. Thanks for sharing, i will update my site later :)

  • http://erenemre.com Eren Emre Kanal

    Mine has : )

  • Some Guy with an Octopus

    Yes, it DOES have the code.
    OpenEndedAdventure.com

  • Ali

    Great code!, I updated my site http://www.iewy.com/ so that you can get something for nothing if you know the code.

    let me know what you think

  • Lianne
  • elf_

    have too on my site http://www.lampungcamp.com

  • Shreyas Nagare

    Sorry but what to write before 1st line n after 8th line if i wish to add this to a html file on my pc ?