Question

我被要求实施Konami Code 在我目前正在处理的网站上。它应该执行以下操作：

更改背景图片
播放声音
带一些弹出式

使用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，b。感谢您的评论！

编辑2：调用activateCheats后将konamiCodePosition重置为0。感谢您的评论！

Answer 2

紧凑版：

＆＃13;

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

＆＃13;

Answer 3

我自己的紧凑和清洁版本灵感来自这里的答案：

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()函数。

Answer 4

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

Answer 5

这是我大约3或4年前提出的解决方案。就我而言，我选择了 keyUp 来使其与 keyDown 事件中发生的任何动作分开。另外，由于 for循环会根据键盘上的所有键检查释放了哪个键，因此无需指定允许使用的键。

import traceback
try:
    print(x)
    except Exception:
        traceback.print_exc()

Answer 6

我真的很喜欢Peter的答案，所以我把它命名为namespace并使回调可选。我也使用jquery因为我喜欢它¯\ _（ツ）_ /¯

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>

Answer 7

作为打字稿模块

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!"); });

注释：：SEQUENCE是预期输入的数组。通过使用head var，可以保持顺序检查和正确输入的数量。如果输入偏离序列，它还提供了一种重新启动的简单方法。它还消除了对“计数”变量的需求。

Answer 8

要创建自己的“ Konami代码”，请在HTML代码中添加以下代码段。 PS：将const secretCode更改为...您想要的任何东西:)。使用当前代码，您必须先输入“向上箭头”按钮，然后依次输入“ h”，“ i”和最后但并非最不重要的“向下箭头”按钮。

有问题吗？请问。

<script>
const pressed = [];
const secretCode = 'ArrowUphiArrowDown';

window.addEventListener('keyup', (e) => {
    console.log(e.key);
    pressed.push(e.key);
    pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);

    if(pressed.join('').includes(secretCode)) {
        console.log("Any quellcode that will be executed if you enter the correct code.");
    }

    console.log(pressed);
})
</script>

Answer 9

E带Ehsan Kia，

我还没有看到有人处理过向上键可以被按下3次以上的情况，并且从技术上讲，本来可以正确输入代码。

将其缩小一点，因为条件变长了。

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

Answer 10

使用以下代码。

const keySequence = [];
let konamiString = '';
const konamiCode = [
  'ArrowUp',
  'ArrowUp',
  'ArrowDown',
  'ArrowDown',
  'ArrowLeft',
  'ArrowRight',
  'ArrowLeft',
  'ArrowRight',
  'b',
  'a'
];

document.addEventListener('keydown', function(e) {
  // To make sure it freezes the scroll when 
  // the first two keypresses are "ArrowUp"
  if (keySequence[0] === 'ArrowUp' && keySequence[1] === 'ArrowUp' && e.key === 'ArrowDown') {
    e.preventDefault();
  }
});

document.addEventListener('keyup', function(e) {
  const doc = document.documentElement;
  const top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);

  // This make sure it only work
  // when the window `scrollTop` is 0.
  if (top === 0) {
    keySequence.push(e.key);
    keySequence.splice(-konamiCode.length - 1, keySequence.length - konamiCode.length);
    konamiString = konamiCode.join('');

    if (keySequence.join('').includes(konamiString)) {
      // Trigger your easter egg here
    }
  }
});

该代码还会检查scrollTop中的window，以便当前两个按键分别是“ ArrowUp”和{{1}的scrollTop时，它不会向下滚动。 }}是window

我已经在my blog上使用此代码，没有打h。

Answer 11

这是我使用 JQuery 的答案：

var konamiCode = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65, 13];
var emptyArray = [];

$(document).keyup (function (e){
    emptyArray.push(e.keyCode);
    if (JSON.stringify(konamiCode) === JSON.stringify(emptyArray)) {
         alert('there you go')
    }
});

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

11 个答案: