Fun with JavaScript: jQuery and Konami Code

Today we’re going to take a small leap back in time to the year 1985, when a Konami developer (Kazuhisa Hashimoto) created the first version of Gradius (a video game for the Nintendo console). During game trials, Kazuhisa realized that it was really difficult to complete, and so he created a code which immediately gave the player all possible power-ups.

There are numerous websites which integrate the Konami Code, including www.jquery.com, www.damnyeah.de, www.cssline.com and many more…

Konami Code

Konami Code (also known as Konami Command or Contra Code) is a trick that has been used in many video games of the very famous Konami Corporation, and it usually actives some kind of secret option.

The original sequence of the Konami Code is as follows:

↑ ↑ ↓ ↓ ← → ← → B A

For this article I’ve created two small examples that you can access by clicking on the following links:
example 1
example 2

The code

Implementing Konami Code in our websites is very easy, all we need in order to use the Konami Code effect is the most recent version of  jQuery and an html page.

$(document).ready(function(){
    var keys     = [];
    var konami  = '38,38,40,40,37,39,37,39,66,65';
    [...]
});

Examining the code, you’ll note that the entire function has been inserted inside the jQuery ready() method (it will take care of executing the code as soon as the DOM HTML is ready).

Let’s look at the creation of an array and of a string:

  1. keys
    we’ll use this array to memorize the key sequence typed by the user
  2. konami
    this string contains the correct key sequence of the konami code.

In JavaScript, every keystroke corresponds to a number, in fact the numbers contained in the konami array are none other than the numerical correspondents of the Konami Code keys:

↑ ↑ ↓ ↓ ← → ← → B  A
$(document).ready(function(){
    var keys     = [];
    var konami  = '38,38,40,40,37,39,37,39,66,65';

   $(document)
        .keydown(
            function(e) {
                [...]
            }
        );
});

Now we need to create a function that “activates itself” with every keystroke, and to do so we’ll use the keydown() method in jQuery.
This method allows us to execute a function with each user keystroke, and it also passes a parameter to the function (named ‘e’).
The parameter passed to the function is an object that contains all event information, in this case the keystroke.

Now let’s look at the rest of the function:

[...]
   $(document)
        .keydown(
            function(e) {
                keys.push( e.keyCode );
                if ( keys.toString().indexOf( konami ) >= 0 ){

                    // do something when the konami code is executed

                    // empty the array containing the key sequence entered by the user
                    keys = [];
                }
            }
        );
[...]

At the beginning of our function you’ll immediately note this code:

keys.push( e.keyCode );

The JavaScript push() method allows us to insert a new value at the end of an Array. In this case, keys indicates our Array, while e.keyCode indicates the code which corresponds to the keystroke.

Seeing as this array will be “updated” with every keystroke, all that’s left is to do a final check: verify that the Konami Code sequence is present in the array keys.

To check that the Konami Code sequence is present in the array, we’ll use the JavaScript indexOf() method, which checks that the value passed as a parameter is present in a string, and, if present, returns its position in the string; otherwise it will return the value ‘-1′.

In order for indexOf to function correctly, we must convert our array keys to a string, using the JavaScript toString() method.
As we just mentioned, toString() transforms values into strings.

For the indexOf parameter, we’ll pass the Konami Code string, to check that it’s contained within the array keys.

If indexOf returns a value greater than or equal to zero, this means that the user has correctly input the Konami Code and therefore we can insert the remaining code to be executed.
Before we close this code block, please note:

keys = [];

This serves to empty the array which contains the Konami Code, so the same function can once again be executed.
In the example proposed in this article, the reuse of the Konami Code was not planned, therefore even though the Code can be executed multiple times, the result will stay the same.

Conclusion

As you’ve seen, inserting the Konami Code in your website is not particularly difficult.
In this article, and in the associated demos, you’ll have seen a trivial example, which can obviously be improved and made more interesting!

You can find a list of websites which use the Konami Code at the following URL: http://www.konamicodesites.com/ (obviously after you’ve input the code!).

Now that you’ve seen how to implement this “trick”, do you think it will come to use in future projects?

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
[pdf]Scarica articolo in PDF[/pdf]
Tags: , ,

The Author

Nicolas is a web programmer with a passion for web design and javascript. He spends most of his free time looking for new ideas and new projects to be developed. It Wordress and jQuery fanatic and has fun in creating plugins for the latter.

Other articles written by

Related Posts

You may be interested in the following articles:

18 comments

  1. Johny
  2. Marshall Baltzell
  3. Nicolas Gutierrez
  4. Andy Lim

Trackback e pingback

  1. uberVU - social comments
    Social comments and analytics for this post... This post was mentioned on Twitter by vivekdevaiah: RT @YIW Fun with JavaScript: jQuery …
  2. CSS Brigit |
    ... Today were going to take a small leap back in time to the year 1985, when a Konami developer (Kazuhisa …
  3. Eclecti.ca » Blog Archive » Bookmarks for Mar 23rd through Mar 24th
    [...] Fun with JavaScript: jQuery and Konami Code | Your Inspiration Web – Today we’re going to take a small …
  4. Element with jquery |Avnish Namdev
    [...] Fun with JavaScript: jQuery and Konami Code [...]

Leave a Reply

Current day month ye@r *