Detecting Key Events: Hide a Secret on your Website!

While working my way through the JS30, I was eager to get to week 12. As a child of the late 80s early 90s one of my favorite things about playing a game on the computer or console was entering a secret code that you found on some sketchy website that your parents didn’t want you on. That’s why when I saw that the exercise went through how to create a konami-code like secret on my websites, I was excited to learn!

Let’s use the actual konami code for this walkthrough, because I found some interesting tidbits that you may want to consider while creating one of these little hidden gems.

For the uninitiated, the konami code is:

UP UP DOWN DOWN LEFT RIGHT LEFT RIGHT B A START (or Enter in the case of our keyboards)

Find your keys/keyCodes

The keyCode, though deprecated, is going to help us a bit later. If you don’t plan on using arrows in your code then a simple string of what you would want would be fine.

const myCode = 'secret'

If you do want to use arrows, I thought our function would work a little more smoothly if we used keyCodes. There are a lot of great tools on the web that can help us learn any keyCode for any key, and I used keycode.info for this blog. If we plug in our konami-code here’s what we get.

const konamiCode = '3838404037393739666513'
// you can use commas and spaces to separate these, we'll join them later. 

Listen for our code

Now that we know what we’re listening for, let’s build out our eventListener.

    const pressed = []
    const konamiCode = '3838404037393739666513'
1.  window.addEventListener('keyup', (e) => {
      pressed.push(e.keyCode)
// if you're using arrows in your code, use pressed.push(e.key)
2.    pressed.splice(-konamiCode.length - 1, pressed.length -        konamiCode.length)
3.  if (pressed.join('').includes(konamiCode)){
      console.log("SNAAAAAKKKKEEEE!!!!")
    } else {
      console.log("not the code")
    return;
  }
})

Let’s break down what’s happening in parts 1–3 of our eventListener here.

1. We’re initializing our event on our window whenever a keyup event happens. Since we want our secret to run while tracking that event we can build out all of our logic here, inside of our callback function. Whenever a key is pressed, it’s keyCode is added to our empty array called pressed.
2. Here we’re using the splice method to limit how long the pressed array can become. Since we’re listening for the konami-code that, when broken into a string, is 22 characters long, we want to wait for that 23rd character to be called before getting rid of the keyCode we pressed first. Meaning this splice function starts whenever the pressed array goes over 22 characters. *You can see this in action if you throw a console.log() before and after the splice method. You’ll see one array larger than our konamiCode variable and one that matches it in length.*
3. Here we check to see if our pressed array that, when joined together, matches the konamiCode variable. If it does, ya’ll know what time it is…

Snake?… Snake?!! SNAAAAKEEEEEEE!!!!!!

Else, it returns (“not the code”).

Now that you know how to listen for a secret code, there are tons of things that you can do to surprise your visitors! In the lesson that taught me how to use this, we used 🦄 cornify 🦄 , check it out! Also, if you happen to come up with a fun idea for your site, share it below!