Remember the code from Contra on original Nintendo? Up, up, down, down, left, right, left, right, B, A, start; it’s also known as the Konami Code and the 30 Lives Code.
This famous sequence of buttons from the 80’s isn’t going anywhere: in more recent times it’s been in a Moldy Peaches song, and used as an easter egg in Google Reader and Facebook, to name a few.
But I’m sure tons of great things can still be done with the code from Contra, so I built it into a simple jQuery plugin that can be easily used on any site.
The jQuery Contra Plugin allows you to call a function of your choice whenever a user enters the Konami Code (up, up, down, down, left, right, left, right, b, a, enter).
How to use the jQuery Contra plugin
Let’s start by including the jQuery and plugin Javascript files, and then call the $.contra() function after the document loads:
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.contra.js"></script>
<script type="text/javascript">
$(function() {
$.contra( function() {
alert('You just got 30 lives!');
} );
});
</script>
Here we defined a function on the fly to alert ‘You just got 30 lives!’. This function will get called any time a user enters the Contra code.
Alternately we can reference a function that we’ve already defined:
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.contra.js"></script>
<script type="text/javascript">
function easterEgg() {
alert('You got the secret code!');
}
$(function() {
$.contra(easterEgg);
});
</script>
Careful here to leave the parentheses off of the function reference (since we are referencing rather than calling this function).
Download the Contra jQuery Plugin
Read the jQuery Contra documentation
Some Advanced Options
There are a couple other options available with the jQuery Contra Plugin.
Limiting the scope
First, by default the Contra plugin listens for keypresses throughout the document. But we can easily define a more narrow scope. For instance let’s enable the code only once a user has focused on an input:
<script type="text/javascript">
$(function() {
$('input').contra( function() {
alert('You just got 30 lives!');
} );
});
</script>
Here we chained the contra() function to the $('input') selector, that’s all there is to it!
Using a different code
Additionally, you can use the jQuery Contra Plugin to create an Easter Egg with any code, not just the Contra code. The second argument accepted by $.contra() is an option array, to set a custom code pass an array of key codes like this:
<script type="text/javascript">
$(function() {
$.contra( function() {
alert('You just got 30 lives!');
}, {
code : [
38,
39,
40,
37,
38,
39,
40,
37
]
});
});
</script>
In this example we set up a listener for up, right, down, left, up, right, down, left. For a listing of keycodes, go here.
Download the Contra jQuery Plugin
Read the jQuery Contra documentation
How will you use the Contra plugin?
Have a good idea that uses the Contra plugin? Got a link to a site that uses it? Write it in the comments below.
Jon Raasch is a UX nerd and free-lance web designer / developer who loves jQuery, Javascript & CSS.
Heh I’m actually using something written by Paul Irish on this site now – http://paulirish.com/2009/cornify-easter-egg-with-jquery/
Very cool – that game brings back so many memories. This reminds me of a plugin I wrote that latches on to the special events hooks in jQuery 1.4. http://boedesign.com/blog/2009/12/30/keystrokes-for-jquery/. It supports combo-keys as well as string representations for keys, so you could do something like:
$(document).bind('keystrokes', {
keys: ['arrow up', 'arrow up', 'arrow down', 'arrow down', 'arrow left', 'arrow right', 'arrow left', 'arrow right', 'b', 'a', 'enter']
}, function(){
alert('You unlocked awesomeness!');
});
You are amazing! Love the puffy sticker unicornicopia! Made my day.
Jon,
I’m a jQuery beginner, so I’m not sure how most of this works, but is there any way to call a modal window with this function as opposed to an alert. I want it to bring up an animation I’ve built in the same sort of window as your contact-pop form.
Hey dude, in case you feel like revisiting this, I believe there’s a slight bugfix you can make. I noticed that typing in the code a second time doesn’t seem to register, and it seems like it’s because the currStep counter variable isn’t being reset when the callback gets triggered.