Konami Code Fun: Adding Cheat Codes to your WebsiteMark CortejosBlockedUnblockFollowFollowingJan 28Photo by Jason Leung on UnsplashFor those not versed in video game history, the Konami code is a video game cheat code popularized by its use in many games by Japanese game developer, Konami, on the original Nintendo Entertainment System (NES).
The code itself is composed of a sequence of button presses inputted via the NES controller.
This sequence is: Up, Up, Down, Down, Left, Right, Left, Right, B, A.
By inputting this code, players could unlock secret power-ups or extra lives to help them beat the game.
The Konami code was immortalized in video game pop culture for its frequent use in making some of Konami’s more difficult games more palatable for players to enjoy.
Nowadays, the code has become ubiquitous among the developer community as a way to hide little Easter eggs and secrets within a website or application.
Some great examples of this being used in websites are the Bank of Canada’s page celebrating its new $10 bank note as well as the Wired UK homepage.
If you’re looking to join in on the fun, adding the secret code to your website is easily accomplished via JavaScript.
While there are many ways to do it, I’ll be using the method provided in this StackOverflow answer by user, Wolfgang Stöttinger, to walk you through how it works.
Let’s say we want to activate a secret function once the Konami code is inputted to our website.
In the StackOverflow answer, the activateCheats() function is called once the right sequence of key presses are inputted.
This function changes the background of our website, plays an audio cue, and brings up an alert if the Konami code was inputted successfully:Code by Wolfgang Stöttinger, https://stackoverflow.
com/a/31627191/10977680The first thing we need to call this function via the Konami code is to track the key presses of your user inputting the code.
Each key press on your computer’s keyboard is assigned a specific numerical value.
We don’t want to track every key pressed, we’re only concerned with the ones necessary for the code.
We’ll save the desired numerical values and store their associated keys in a variable object:Code by Wolfgang Stöttinger, https://stackoverflow.
com/a/31627191/10977680The allowedKeys object now indicates which value (and thus their keys) should be kept an eye on for the code to work.
With that done, we know need the Konami code itself to check our user’s key presses against.
We can store the code in an array of the necessary button presses named konamiCode.
Since the Konami code is a sequence of key presses, we also need a way to track how far along in the code sequence the user is to know if they’ve successfully inputted the whole code.
We’ll use the variable konamiCodePosition to track this:Code by Wolfgang Stöttinger, https://stackoverflow.
com/a/31627191/10977680Now we need to check if the key pressed by the user is one of the keys we’re tracking in allowedKeys, then compare the keys pressed with right keys in our konamiCode array sequence.
As the user successfully makes it through the sequence, we want the konamiCodePosition to count up to indicate how far along in the sequence they are.
For example, if the user inputs Up, Up, Down, Down, then we need konamiCodePosition to count up to the fourth item in the array (or position 3, since 0 is counted as the first position in an array).
Remember, we only want our activateCheats() function to be called if the user successfully makes it through the entire sequence.
To do this, we will need to create an event listener that listens for key presses by the user.
Within the event listener we’ll need to check if the key pressed by the user is one of keys within our allowedKeys object.
If it is, we’ll save its value in the key variable to compare to the corresponding key in the konamiCode array.
konamiCodePosition is used within the konamiCode to create the requiredKey variable to compare key to:Code by Wolfgang Stöttinger, https://stackoverflow.
com/a/31627191/10977680The final part of our event listener is a series of if statements that first checks if the key matches the requiredKey, then counts up the konamiCodePosition if true and continues to do so if the user continues to put in the right keys.
The way we know if the user successfully makes it through the whole Konami code sequence is when the konamiCodePosition equals the length of the konamiCode array.
Essentially they need to input all ten key presses and input them in the right sequence.
Only then do we activate our Easter egg, finally calling our activateCheats() function:Code by Wolfgang Stöttinger, https://stackoverflow.
com/a/31627191/10977680Last but not least, we need to reset the konamiCodePosition to 0 if the user fails to input the right key or successfully puts in the code.
This makes sure our user can try again if they failed or want to re-enter the code to see the Easter egg again.
Congratulations, you’ve successfully added in a Konami code Easter egg to your website!Whether with the Konami code or some other secret code, Easter eggs like these give developers a chance to inject some lighthearted fun into their creations, fostering a sense of intimacy with those that discover and experience these hidden secrets.
All in all, this kind of playful interactivity is a testament to the close-knit community developers can build with their users as well as with each other.
If you’d like to follow my continuing journey to learn web development, follow me on Twitter: https://twitter.
com/MarkCortejos.