Breaking the Konami Code: Adding an Easter Egg to Your Site

If you’re a video-gamer, you’ve probably heard of the Konami Code. First used in video game company Konami’s 1986 release of Gradius for the Nintendo Entertainment System, the Konami Code is a sequence of button inputs used as a cheat code trigger.

By entering the combination of "↑ ↑ ↓ ↓ ← → ← → B A," gamers could trigger cheat codes ranging from an increase in lives to unlocking special in-game items.

The original button combination for the Konami Code

On the Web

Almost thirty years later, the Konami Code idea still exists in video games and has also moved to the web where it is often implemented on websites to reveal secret inside jokes or hidden messages known as Easter Eggs. By typing in certain codes -- whether the original Konami Code or some sort of other password -- users can reveal these Easter Eggs.

How does it work?

Most often, a website uses simple JavaScript code to capture the keystrokes input by the user. Once the user has input the code (within a set timeframe) the code triggers a function to activate the Easter Egg.

Just recently, I added a special sort of Konami Code to the Viget Intern Tumblr. Just go to the site and type “mario” for a little surprise. I find that this sort of Easter Egg is a delightful surprise when playing around with a website.

Implementation

Thanks to a simple jsfiddle I found while searching Stack Overflow, I was able to create a jQuery function to interpret user keystrokes and reveal Mario and his world. Check it out below:

//’secret’ specifies the numerical keystrokes that make up the word “mario”
var secret = "7765827379"; 
var input = "";
var timer;

//The following function sets a timer that checks for user input. You can change the variation in how long the user has to input by changing the number in ‘setTimeout.’ In this case, it’s set for 500 milliseconds or ½ second.
$(document).keyup(function(e) {
 input += e.which; 
 clearTimeout(timer);
 timer = setTimeout(function() { input = ""; }, 500);
 check_input();
});

//Once the time is up, this function is run to see if the user’s input is the same as the secret code
function check_input() {
 if(input == secret) {
 //the code used to reveal mario and the world is then put here 
 }
};

Site Examples

You can head to Konami Code Sites to find a list of sites implementing the not-so-secret code. Note that some may not work as their source code may have changed since being listed.

Also, here are a couple more sites with their corresponding codes for you to try out (working as of 8-7-13):

Viget Interns 2013 Tumblr

I thought I'd spice up the Viget Intern 2013 Tumblr with a Mario themed easter egg. Watch Mario run as you scroll, and jump when you hit "j".

Code: "mario"

British Vogue

Fancy a hat-wearing velociraptor? The British Vogue site has got you covered.

Code: "↑ ↑ ↓ ↓ ← → ← → B A"

Digg

Digg.com features an extra special RickRoll with their Konami Code Easter Egg.

Code: "↑ ↑ ↓ ↓ ← → ← → B A"

 

Have you found any clever Konami Code Easter Eggs out there on the web? Leave them in the comments below!