javascript - 如何在基于html的网站中添加konami代码？

Question

我被要求实现科乐美代码 在我目前正在处理的网站上。它应该执行以下操作:

1. 更改背景图片

2. 播放声音

3. 带一些弹窗

使用 javascript 实现此目的的最简单方法是什么？

Answer 1

将下面的代码放在一个文件中 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");
}

编辑:将顺序更改为 b, a 而不是 a, b。感谢评论!

编辑 2:在调用 activateCheats 后将 konamiCodePosition 重置为 0。感谢评论!