Skip to main content Accessibility Feedback

How to create a Konami Code easter egg with vanilla JS

If you grew up playing video games in the 80’s, you may remember the Konami Code, a cheat code you could enter on many of the video games made by Konami.

The Konami Code is Up Up Down Down Left Right Left Right B A.

Entering it at, for example, the start of Teenage Mutant Ninja Turtles would unlock Very Hard Mode. Entering it at the start of Contra would give you 30 lives.

Today, I’m going to show you how to enable a Konami Code easter egg on your site with vanilla JavaScript.

Listening for key events

The first thing we need to do is detect when someone has pressed a key on their keyboard.

We can do that using the addEventListener() listener method and the keydown event. We’ll pass in a keyHandler function as our callback.

document.addEventListener('keydown', keyHandler, false);

This will fire every time the user presses down on a key. We can get the specific key that was pressed using the event.key property.

var keyHandler = function (event) {
	console.log(event.key);
};

Try it yourself on CodePen.

Defining a pattern

To make this work, we need to detect when a pattern of keys are entered in a sequence.

To get started, we’ll create an array with the keys in the pattern. To find out what the key is called, use the trick above to log event.key values.

var pattern = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];

We also need a way to track how many keys in the pattern have been successfully pressed, so that we know when it’s complete.

Let’s add a variable named current, and set it to 0 by default.

var pattern = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];
var current = 0;

Detecting when the pattern has been entered

Now we’re ready to match key presses against our pattern.

In our keyHandler() function, we first need to make sure that the key that was pressed is in the pattern at all. If it’s not, we’ll reset the number of matched items (current) to 0 and return so that our callback function stops running.

We can use the Array.indexOf() method to check if the key is in our pattern array. If the index is less than 0, it’s not there.

var keyHandler = function (event) {

	// If the key isn't in the pattern, reset
	if (pattern.indexOf(event.key) < 0) {
		current = 0;
		return;
	}

};

We also need to make sure the key was entered in the right sequence.

For example, if someone typed b a ArrowDown, those are all in the sequence, but not in the right order. This is where our current variable becomes really useful.

We’re going to increase current by 1 every time a key matches, so it will always have the same value as the index of the next item in the pattern.

We can check to see if the item in pattern at the current index is the same as event.key. If not, the sequence was entered wrong. We’ll again reset current and bail.

var keyHandler = function (event) {

	// If the key isn't in the pattern, or isn't the current key in the pattern, reset
	if (pattern.indexOf(event.key) < 0 || event.key !== pattern[current]) {
		current = 0;
		return;
	}

};

Otherwise, we can update how much of the pattern has been completed by increasing current by 1. We’ll use the increment operator for that.

var keyHandler = function (event) {

	// If the key isn't in the pattern, or isn't the current key in the pattern, reset
	if (pattern.indexOf(event.key) < 0 || event.key !== pattern[current]) {
		current = 0;
		return;
	}

	// Update how much of the pattern is complete
	current++;

};

Successfully completing the pattern

After the last item is entered successful, current will have a value of 10, which is the same value as the length of the pattern array.

We can check if they match, and if so, the pattern is complete and we can reveal our easter egg. If the pattern can be used again, you’ll also want to reset current to 0.

var keyHandler = function (event) {

	// If the key isn't in the pattern, or isn't the current key in the pattern, reset
	if (pattern.indexOf(event.key) < 0 || event.key !== pattern[current]) {
		current = 0;
		return;
	}

	// Update how much of the pattern is complete
	current++;

	// If complete, alert and reset
	if (pattern.length === current) {
		current = 0;
		window.alert('You found it!');
	}

};

Here’s a working demo.