Gewusst wie: hinzufügen konami-code in eine website auf html-Basis?

Platzieren Sie den folgenden code in eine Datei js/konami.js und verweisen es in den Körper Ihres html-Datei wie folgt: <script src="js/konami.js"></script>

JS:

//a key map of allowed keys
var allowedKeys = {
  37: 'left',
  38: 'up',
  39: 'right',
  40: 'down',
  65: 'a',
  66: 'b'
};

//the 'official' Konami Code sequence
var konamiCode = ['up', 'up', 'down', 'down', 'left', 'right', 'left', 'right', 'b', 'a'];

//a variable to remember the 'position' the user has reached so far.
var konamiCodePosition = 0;

//add keydown event listener
document.addEventListener('keydown', function(e) {
  //get the value of the key code from the key map
  var key = allowedKeys[e.keyCode];
  //get the value of the required key from the konami code
  var requiredKey = konamiCode[konamiCodePosition];

  //compare the key with the required key
  if (key == requiredKey) {

    //move to the next key in the konami code sequence
    konamiCodePosition++;

    //if the last key is reached, activate cheats
    if (konamiCodePosition == konamiCode.length) {
      activateCheats();
      konamiCodePosition = 0;
    }
  } else {
    konamiCodePosition = 0;
  }
});

function activateCheats() {
  document.body.style.backgroundImage = "url('images/cheatBackground.png')";

  var audio = new Audio('audio/pling.mp3');
  audio.play();

  alert("cheats activated");
}

BEARBEITEN: verändert die Reihenfolge von b, a anstelle von a, b. Vielen Dank für den Kommentar!

EDIT 2: reset der konamiCodePosition zu 0 nach activateCheats genannt wurde. Vielen Dank für den Kommentar!

Meine eigenen kompakten und gereinigt-version inspiriert von den Antworten hier:

let cursor = 0;
const KONAMI_CODE = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];
document.addEventListener('keydown', (e) => {
  cursor = (e.keyCode == KONAMI_CODE[cursor]) ? cursor + 1 : 0;
  if (cursor == KONAMI_CODE.length) activate();
});

In diesem Fall, die activate() Funktion wird aufgerufen, wenn Sie ausgelöst werden.

Dies ist eine Lösung, die ich kam mit etwa 3 oder 4 Jahren. In meinem Fall wählte ich keyUp zu halten, getrennt von allen Aktionen, die aus keyDown Veranstaltungen.
Auch gibt es keine Notwendigkeit, um anzugeben, welche Schlüssel sind zulässig, da die for-Schleife prüft, welche losgelassen wurde gegen alle Tasten auf der Tastatur.

var konamicode = [38,38,40,40,37,39,37,39,66,65];
var kc=0; 

function checker() {
   if (kc==10) {
    //What you want to occur when code matches goes in here. 

    kc=0;  //This resets the sequence. 
    alert("It Worked!");
   }
}

function keyUp(e) {
   var keynum;
     if (window.event) { keynum = event.keyCode; }
       else if (e.which) { keynum = e.which; }
        for (i = 0; i < 222; i++) { //The 222 represents all the keys on the keyboard.

    var kx=konamicode[kc]; //kx represents the current position in the code sequence.
    if (keynum == i) {
        //Checks to see if key matches sequence,  and resets sequence if it doesn't.
        if (i!=kx){kc=0;} else {kc++;}
    }
  }
 checker();
}

als Typoskript Modul

const Konami = (() => {
    //up, up, down, down, left, right, left, right, b, a, enter
    const SEQUENCE: Array<number> = [
        38,
        38,
        40,
        40,
        37,
        39,
        37,
        39,
        66,
        65,
        13,
    ];

    let head: number = 0;
    let isActive: boolean = false;

    let callback: Function | undefined;

    const start = (cb: Function): void => {
        if (isActive) {
            return;
        }

        window.addEventListener("keydown", onKeyDown);

        callback = cb;
        isActive = true;
    };

    const stop = (): void => {
        if (!isActive) {
            return;
        }

        isActive = false;

        window.removeEventListener("keydown", onKeyDown);
    };

    const onKeyDown = (event) => {
        if (event.keyCode === SEQUENCE[head]) {
            head++;

            if (head === SEQUENCE.length) {
                if (callback instanceof Function) {
                    callback();
                }
                head = 0;
            }
        } else {
            head = 0;
        }
    };

    return {
        start,
        stop,
    };
})();

export default Konami;

Umsetzung:

Konami.start(() => { alert("konami sequence entered!"); });

Hinweise: SEQUENZ ist ein array der erwarteten Eingänge. mithilfe der head var, die Bestellung überprüfen und die Anzahl der richtigen Eingaben erhalten. es bietet auch eine einfache Möglichkeit, neu zu starten, wenn der Eingang weicht von der Reihenfolge. es entfällt auch der Bedarf für einen "count" var.