# Konami Code in JavaScript

**URL:** https://forum.kirupa.com/t/konami-code-in-javascript/640851
**Category:** web dev
**Created:** [October 15, 2019, 5:21am UTC](https://forum.kirupa.com/t/konami-code-in-javascript/640851 "2019-10-15T05:21:22Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [October 15, 2019, 5:21am UTC](https://forum.kirupa.com/t/konami-code-in-javascript/640851/1 "2019-10-15T05:21:23Z")

</div>

With Fortnite [giving users a mini-game](https://twitter.com/FortniteBR/status/1183454945808453634) if they enter the Konami code while seeing the black hole, it seems like a good time to show this snippet that shows how to detect this code using JavaScript:

```
<!DOCTYPE html>
<html>

<head>
  <title>Konami Code!</title>

  <style>
    body {
      background-color: #C6D8D3;
      padding: 30px;
    }
    h1, p, a {
      font-family: sans-serif;
    }
    h1 {
      font-size: 76px;
      color: #5B6361;
    }
    p {
      font-size: 24px;
      color: #353A39;
      cursor: pointer;
      margin-bottom: 3em;
    }
    a {
      padding: 10px;
      font-size: 24px;
      background-color: #5B6361;
      color: #FFF;
      text-decoration: none;
    }
    a:hover {
      background-color: #353A39;
    }
  </style>
</head>

<body>
  <div id="container">
    <h1>Konami Code</h1>
    <p>Click here to give the page focus and enter the Konami code!</p>
    <a href="http://forum.kirupa.com">Learn More</a>
  </div>

  <script>

    let keys = {
      37: "left",
      38: "up",
      39: "right",
      40: "down",
      65: "a",
      66: "b"
    };

    let konamiCode = ["up", "up", "down", "down", "left", "right", "left", "right", "b", "a"];
    let keyCount = 0;

    let timerID;

    document.addEventListener("keydown", checkCode, false);

    function checkCode(e) {
      var keyPressed = keys[e.keyCode];

      if (keyPressed === konamiCode[keyCount]) {
        keyCount++;

        // clear timer
        window.clearTimeout(timerID);

        // start timer with a 1 second delay before resetting state
        timerID = window.setTimeout(resetKeyState, 1000);

        // check if we are still on the right path
        if (keyCount === konamiCode.length) {
          cheatCodeActivated();
          resetKeyState();
        }
      } else {
        resetKeyState();
      }
    }

    function cheatCodeActivated() {
      alert("Cheat code activated!");
    }

    function resetKeyState() {
      console.log("Resetting state!");
      window.clearTimeout(timerID);
      keyCount = 0;
    }
  </script>
</body>

</html>

```

I’ll write a tutorial eventually on it, but it uses techniques showed in the [Working With the Keyboard](https://www.kirupa.com/html5/keyboard_events_in_javascript.htm) and [Timers](https://www.kirupa.com/html5/timers_js.htm) tutorials.

Cheers,  
Kirupa 😛

---

<div class="post-metadata">

### Author: ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [September 30, 2022, 11:33pm UTC](https://forum.kirupa.com/t/konami-code-in-javascript/640851/2 "2022-09-30T23:33:18Z")

</div>

This is more of a matching game where you have to match the sequence to clear lines, each line being a collection of the keys you’ve used between hitting ENTER. But you start off with the first line being the Konami code, so it applies 😉

```javascript
const replacements = {
	"ArrowUp": "⬆️",
	"ArrowDown": "⬇️",
	"ArrowLeft": "⬅️",
	"ArrowRight": "➡️",
};

const root = document.body.appendChild(document.createElement("div"));

function newLine() {
  return root.appendChild(document.createElement("p"));
}

function addKey(key) {
  root.lastElementChild.innerHTML += `<button>${replacements[key] ?? key}</button>`;
}

function clearMatches() {
  const curr = root.lastElementChild;
  const prev = curr.previousElementSibling;
  if (prev?.innerHTML === curr.innerHTML) {
    newLine();
    setTimeout(() => (curr.remove(), prev.remove()), 500);
  }
}

window.onkeyup = ({ key }) => {
  if (key === "Enter") {
    if (root.lastElementChild.childElementCount) newLine();
    return;
  }
  addKey(key);
  clearMatches();
}

newLine();
addKey("ArrowUp");
addKey("ArrowUp");
addKey("ArrowDown");
addKey("ArrowDown");
addKey("ArrowLeft");
addKey("ArrowRight");
addKey("ArrowLeft");
addKey("ArrowRight");
addKey("b");
addKey("a");
newLine();

```

P.S. You win nothing by clearing all the lines 🙃

[JSFiddle link](https://jsfiddle.net/xvLphtaq/1/)
