Wie füge ich Konami-Code in eine Website ein, die auf HTML basiert?

Lesezeit: 6 Minuten

Wie fuge ich Konami Code in eine Website ein die auf
ZENSIERT

Ich wurde gebeten, den Konami-Code in einer Website zu implementieren, an der ich gerade arbeite. Es sollte Folgendes tun:

  1. Hintergrundbild ändern

  2. Ton abspielen

  3. Bringen Sie ein Pop-up mit

Was ist der einfachste Weg, dies mit Javascript zu erreichen?

  • Haben Sie sich Java oder JQuery angesehen.

    – Hoss

    25. Juli 2015 um 13:29 Uhr

  • Hast du in die geschaut Taste nach unten/Taste auf Veranstaltung? Ich schätze, Sie könnten auf eine bestimmte Tastenfolge hören und dann Ihr Ding machen.

    – danillouz

    25. Juli 2015 um 13:35 Uhr


  • Weiß jemand, wie man mit mehreren Cheat-Codes (Tastenfolgen) auf derselben Seite umgeht?!

    – Anna MB

    22. November 2021 um 17:46 Uhr


Wie fuge ich Konami Code in eine Website ein die auf
w.stöttinger

Platzieren Sie den folgenden Code in einer Datei js/konami.js und verweisen Sie im Hauptteil Ihrer HTML-Datei wie folgt darauf: <script src="https://stackoverflow.com/questions/31626852/js/konami.js"></script>

// 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: Die Reihenfolge wurde in b, a anstelle von a, b geändert. Danke für den Kommentar!

BEARBEITEN 2: Setzen Sie die konamiCodePosition auf 0 zurück, nachdem activateCheats aufgerufen wurde. Danke für den Kommentar!

  • Deine Tastenfolge ist falsch ;D es ist ‘b’ ‘a’ und nicht umgekehrt ehh. Soll nicht nerven, aber ja xD

    – José Pinto

    29. Juni 2016 um 19:01 Uhr

  • Du solltest einstellen konamiCodePosition = 0 nach Anruf activateCheats() um eine fortlaufende Ausführung zu ermöglichen und eine Ausnahme beim Indexer von ‘konamiCode[]’

    – Bytecode77

    7. Juni 2017 um 20:32 Uhr


  • Der Code schlägt fehl, wenn die Tastenfolge für die Eingabe lautet: ‘hoch’, ‘hoch’, ‘hoch’, ‘runter’, ‘runter’, ‘links’, ‘rechts’, ‘links’, ‘rechts’, ‘b’, ‘ ein’. Grund: Beim 3. ‘Up’ wird Ihr Code korrekt feststellen, dass die Sequenz unterbrochen, aber falsch eingestellt wurde konamiCodePosition = 0 in else Block. Stattdessen sollte es in meiner Beispieleingabe auf ‘1’ zurückgesetzt werden, da eine falsche Taste (dritte ‘hoch’) auch die richtige erste Taste ist. @w.stoettinger

    – Avi Dubey

    16. Mai 2019 um 1:40 Uhr

1647101527 323 Wie fuge ich Konami Code in eine Website ein die auf
Peter

Kompaktversion:

function onKonamiCode(cb) {
  var input="";
  var key = '38384040373937396665';
  document.addEventListener('keydown', function (e) {
    input += ("" + e.keyCode);
    if (input === key) {
      return cb();
    }
    if (!key.indexOf(input)) return;
    input = ("" + e.keyCode);
  });
}

onKonamiCode(function () {alert('\o/')})

  • Wie hast du so viel herausgezogen und es funktioniert immer noch? Werde mich da durchreden. Ich sehe, der Schlüssel ist der Konami-Schlüsselcode. Der Ereignis-Listener wird festgelegt. nicht sicher, was das Zurückgeben von cb tut. auch was ist keyCode? Tut mir leid, ich versuche nur zu lernen und zu verstehen, wie man Code bereinigt.

    – Schutzausrüstung

    11. Januar 2018 um 14:05 Uhr

  • Key ist eine Zeichenfolge mit allen Tastencodes darin 38 für Pfeil nach oben, 38384040 bedeutet up up down down, jedes Mal, wenn der Benutzer die Taste drückt, füge ich den Tastencode als Zeichenfolge hinzu input Variable. return cb(); bedeutet: Callback-Funktion aufrufen und verlassen cb(); return; wäre der gleiche Effekt, aber dieser ist kürzer. nächste Zeile überprüfe ich input ist Teil von key indexOf Funktion sollte zurückkehren 0 in unserem Fall ! Konvertieren 0 zu true wenn input Teil von key Wir sollten zurückkehren und die letzte Zeile einfach zurücksetzen input und fügen Sie den Charcode hinzu

    – Petrus

    11. Januar 2018 um 17:00 Uhr


Meine eigene kompakte und bereinigte 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 ist die activate() Funktion wird aufgerufen, wenn sie ausgelöst wird.

Silentdrummer hat eine gute Antwort. Ich bin mir nicht ganz sicher, aber ich denke, es könnte am Ende zu viel Speicher beanspruchen, wenn Sie intensive Seiten eingeben. Es ist eine gute Übung, zurückzusetzen. So oder so, hier ist eine Alternative.

// Cheat Codes
neededkeys = [38,38,40,40,37,39,37,39,66,65], started = false, count = 0;
$(document).keydown(function(e) {
    key = e.keyCode;
    if (!started) {
        if (key == 38) {
            started = true;
        }
    }
    if (started) {
        if (neededkeys[count] == key) {
            count++;
        } else {
            reset();
        }
        if (count == 10) {
            reset();
            // Do your stuff here
            alert('Cheat Codes Activated');
            $('body').css('background-color', '#FFA8A8');
            // Turn down for what
            var s=document.createElement('script');
            s.setAttribute('src','https://nthitz.github.io/turndownforwhatjs/tdfw.js');
            document.body.appendChild(s);
        }
    } else {
        reset();
    }
});
function reset() {
    started = false;
    count = 0;
}

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;

Implementierung:

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

Anmerkungen: SEQUENCE ist ein Array der erwarteten Eingaben. durch die Verwendung der head var, die Reihenfolgeprüfung und Anzahl der korrekten Eingaben wird beibehalten. Es bietet auch eine einfache Möglichkeit zum Neustart, wenn die Eingabe von der Reihenfolge abweicht. es eliminiert auch die Notwendigkeit für eine “Zähl”-Variable.

1647101527 814 Wie fuge ich Konami Code in eine Website ein die auf
Gemeinschaft

Dies ist eine Lösung, die ich vor etwa 3 oder 4 Jahren gefunden habe. In meinem Fall habe ich gewählt Taste nach oben um es von allen Aktionen getrennt zu halten, die auftreten Taste nach unten Veranstaltungen. Außerdem ist es nicht erforderlich, festzulegen, welche Schlüssel zulässig sind, da dies der Fall ist für Schleife prüft, welche Taste gegen alle Tasten auf der Tastatur losgelassen wurde.

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();
}

1647101528 320 Wie fuge ich Konami Code in eine Website ein die auf
GammaGames

Peters Antwort hat mir sehr gut gefallen, also habe ich sie mit Namensräumen versehen und den Rückruf optional gemacht. Ich habe auch jquery verwendet, weil ich es mag ¯\_(ツ)_/¯

var Konami = Konami || {};

Konami.key = '38384040373937396665';

Konami.onCode = function(callback) {
    var input="";
    $(document).on("keydown", function(e) {
        input += ("" + e.keyCode);
        if (input === Konami.key) {
            if(typeof callback == 'undefined') {
                return alert("⬆⬆⬇⬇⬅➡⬅➡🅱🅰");
            }
            else {
                return callback();
            }
        }
        if (!Konami.key.indexOf(input)) return;
        input = ("" + e.keyCode);
    });
}

Konami.offCode = function() {
    $(document).off("keydown");
}

Konami.onCode();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

994300cookie-checkWie füge ich Konami-Code in eine Website ein, die auf HTML basiert?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy