Tibor SzászInteraction matters

Konami codes in javascript

If you ever played any platform, fighting or combat games like Contra or Mortal Combat, then you will be familiar with the special key combinations for executions or special attacks that gives you some extra power, effect, or god mode. The Konami code was one of the fist cheat code in the video gaming history, that special combination later adapted by many games.

In the age of websites, many sites also installed small easter eggs for their visitors, just for fun. See the list here.

I played a little with implementing it, and just a few rows were enough to achieve the desired effect.

var p = 0;
var order = [38,38,40,40,37,39,37,39,66,65];
document.onkeyup = function(e)
{
	var key = (window.event) ? event.keyCode : e.keyCode;
	p = (order[p] == key) ? ++p : 0;
	if( p == order.length ) alert('Boom, secrets unlocked');
};

But why stop here?
I created a little cheat engine, that handles multiple codes and triggers a callback functions for them.

var cheatCodes = function( order, callBack )
{
	this.p = 0;
	this.order = order;
	var pass = this;
	addEvent( document, 'keyup', function(e)
	{
		var key = (window.event) ? event.keyCode : e.keyCode;
		pass.p = (pass.order[pass.p] == key) ? ++pass.p : 0;
		if( pass.p == pass.order.length ) callBack();
	});
}
// Scott Andrew’s original addEvent() function
// You can reaplce this to any event wrapper,
// or modify the cheatCodes function for jQuery or MooTools event handler
function addEvent(elm, evType, fn, useCapture) {
	if (elm.addEventListener) {
		elm.addEventListener(evType, fn, useCapture);
		return true;
	}
	else if (elm.attachEvent) {
		var r = elm.attachEvent('on' + evType, fn);
		return r;
	}
	else {
		elm['on' + evType] = fn;
	}
}
// Code is: left, left, right, up, down
var cheat_one = new cheatCodes( [37,37,39,38,40], doSomethingElse );

// Code is: left, right, up, down
var cheat_two = new cheatCodes( [37,39,38,40], doSomething );

function doSomething()
{
	document.body.style.backgroundColor = '#f90';
}

function doSomethingElse()
{
	document.body.style.backgroundColor = '#9f0';
}