Learn to Code via Tutorials on Repl.it!

← Back to all posts
Konami Code Example!
SamiOsman (43)

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). 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:

Comments
hotnewtop
DynamicSquid (4899)

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.

SamiOsman (43)

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

DynamicSquid (4899)

@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!

SamiOsman (43)

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

SamiOsman (43)

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