Konami Code in JavaScript

programming web dev
2

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 :wink:

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 :upside_down_face:

JSFiddle link