← Back to Community
Konami Code Example!
Profile icon
SamiOsman

Hey Guys!

Today I will be teaching you guys how to add the Konami Code or any other special Code to your website!

Table of contents:

  • The pattern

    • Customization
      • Example:
  • What to add

    • Example:
  • Correct pattern or wrong pattern

    • Example:
  • Ending


The Pattern


So by using:

var pattern = [ "ArrowUp", "ArrowUp", "ArrowDown", "ArrowDown", "ArrowLeft", "ArrowRight", "ArrowLeft", "ArrowRight", "b", "a" ];

This creates a variable named pattern that is the Konami Code. This is important because this is the code that you will use for your easter egg. (Look to customization for details)


Customization

That example was the Konami Code. You can use any code for it to work. I recommend going to this website and under event.code put in what it says in the "". Let me show you an example of how you can use any code.


Example:

var pattern = [ "c", "u", "s", "t", "o", "m", "i", "z", "e", "Space", "t", "h", "i", "s" ];

As you can see, I can customize it to anything I want. Like I said before I recommend going to this website and look at the event.code section to find out what to put there.


Correct pattern or wrong pattern


Example:

So I will try to give a good explanation of this code:

var keyHandler = function (event) { // This code basically deciphers if the pattern is wrong then it will reset the users progress. if (pattern.indexOf(event.key) < 0 || event.key !== pattern[current]) { current = 0; return; }

What to add

So this is the easy part (Or maybe it could be hard). for my Easter Egg, I made a prompt. [(See more)] (https://www.w3schools.com/jsref/met_win_prompt.asp). I made an example. However, please feel free to use anything you want.
Example

JS:

var pattern = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a']; //Konami code (look to customization to customize) var current = 0; var keyHandler = function (event) { // If the key isn't in the pattern, or isn't the current key in the pattern, reset if (pattern.indexOf(event.key) < 0 || event.key !== pattern[current]) { current = 0; return; } // Update how much of the pattern is complete current++; // If complete, alert and reset if (pattern.length === current) { current = 0; // Easter egg code. (Example:) var Konami = prompt("Wanna know something? (yes/no)"); switch(Konami) { case "yes": alert("You can customize this any way you want. Add anything under Easter Egg code!"); break; case "no": alert("Ok bai!"); console.log("idiot litsen to me XD") break; case "maybe": alert("Make a definite anser \(ಠ_ಠ)/"); break; default: alert("WAKE UP AND ANSWER ME ALREADY!"); break; } } }; // Listen for keydown events document.addEventListener('keydown', keyHandler, false);

Keydown

This part is really important. you need to add document.addEventListener('keydown', keyHandler, false);
for this to work. I already put this in the example above but just to remind you you need this. It is important because it listens for keydown events. More info here.


Ending

I really hope that you guys had a fun time with this tutorial. If you liked it please upvote.

I am new at tutorials so please don't say stuff like," oh this sucks" and instead plz give feedback.

tl;dr: The Konami code is cool and you should check out this link for more info on how to do this.

Here is my example repl:

Voters
Profile icon
ItCrumbles
Profile icon
DynamicSquid
Profile icon
AbhayRajRaj1
Profile icon
SamiOsman
Comments
hotnewtop
Profile icon
DynamicSquid

Hey, we’ve unlisted this post as it doesn't seem like a proper tutorial. Tutorials are meant to cover a specific topic, and be somewhat in depth in explanation. This seems more like Share post. You can view a good example of a tutorial here. If you have any questions, feel free to ask.

Profile icon
SamiOsman

@DynamicSquid I will try to make it more detailed. Then can you relist my post?

Profile icon
DynamicSquid

@SamiOsman Sure! My main concern right now is that you are just pasting code without explaining it. If you could split your code up into sections and explain each section, then it'd be happy to relist it!

Profile icon
SamiOsman

@DynamicSquid Ok! I will make sure to do that.

Profile icon
SamiOsman

@DynamicSquid Please look at the post again and maybe relist it?

Profile icon
DynamicSquid
Profile icon
firefish

g