Does Your Site Have The Konami Code?

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.

Frequently Asked Questions (FAQs) about the Konami Code