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:
- keys
we’ll use this array to memorize the key sequence typed by the user - 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?
*****************************************
L'immagine principale dell'articolo è stata fornita da @Fotolia
The Author
Related Posts
You may be interested in the following articles:
15 comments
Trackback e pingback
-
uberVU - social comments
Social comments and analytics for this post... This post was mentioned on Twitter by vivekdevaiah: RT @YIW Fun with JavaScript: jQuery ... -
CSS Brigit |
... Today were going to take a small leap back in time to the year 1985, when a Konami developer (Kazuhisa ... -
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 ... -
Element with jquery |Avnish Namdev
[...] Fun with JavaScript: jQuery and Konami Code [...]
This is genius, the ideas round my head that you have just stimulated are second to none. Thanks
Hi Johny, thank you for your comment
!!!
Konami code makes you a child again.. what do you think?
Best. Thing. Ever.
Hi Marshall, i like konami code too
found your site on del.icio.us today and really liked it.. i bookmarked it and will be back to check it out some more later
One word : Kickass…..
Thank you Richie
Great idea…I think that is really funny!Thanks!
Wow, really nice words
…
Thank you SO MUCH !
For winter season treatment, you do have a wooden stove regarding temperature, which may additionally function as source of light. During the damp time, you’ll want some type of defense, for example outdoor patio umbrellas to make sure a new water-resistant fabric.
strongzz You could certainly see your expertise in the work you write. The world hopes for more passionate writers like you who are not afraid to say how they believe. Always follow your heart.