Как добавить код konami на веб-сайт на основе html?

меня попросили реализовать код Konami на сайте, над которым я сейчас работаю. Он должен делать следующее:

  1. Изменить Фоновое Изображение

  2. воспроизведение звука

  3. приведи какой-нибудь поп-вверх

каков самый простой способ достичь этого с помощью javascript?

8
background-image html javascript mp3 popup

7 ответов

поместите код ниже в файл js/konami.js и ссылаться на него в теле вашего HTML-файла, как это: <script src="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");
}

EDIT: изменил последовательность на b, a вместо a, b. Спасибо за комментарий!

EDIT 2: сбросьте konamiCodePosition до 0 после вызова activateCheats. Спасибо за комментарий!

23

компактная версия: 

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/')})
9

Silentdrummer имеет хороший ответ. Я не совсем уверен, но я думаю, что это может занять слишком много памяти при вводе интенсивных страниц. Это хорошая практика для перезагрузки. В любом случае, есть альтернатива.

// 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;
}
1

моя собственная компактная и очищенная версия, вдохновленная ответами здесь:

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

в этом случае activate() функция вызывается при срабатывании.

1

Это решение я придумал около 3 или 4 лет назад. В моем случае я выбрал keyUp чтобы держать его отдельно от любых действий, которые возникают от keyDown событий. Также нет необходимости указывать, какие ключи допустимы, так как цикл проверяет, какая клавиша была выпущена против всех клавиш на клавиатуре. 

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

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>
0

как модуль typescript

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;

реализация:

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

Примечания: последовательность представляет собой массив ожидаемых входных данных. используя head var, проверка заказа и количество правильных входных сигналов поддержаны. он также предоставляет простой способ перезапуска, если вход отклоняется от последовательности. это также устраняет необходимость в "подсчете" var.

0