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

我被要求实现Konami代码 在我目前正在开发的一个网站上。它应做到以下几点：

更改背景图像

播放声音

带一些弹出窗口

---

使用javascript实现这一点最简单的方法是什么？

将下面的代码放在一个文件

js/konami.js

中，并在html文件的正文中引用它，如下所示：

//允许密钥的密钥映射
var allowedKeys={
37:"左",，
38:"向上",，
39:"对",，
40:"倒",，
65:‘a’，
66:‘b’
};
//“官方”Konami代码序列
var konamiCode=[‘向上’、‘向上’、‘向下’、‘向左’、‘向右’、‘向左’、‘向右’、‘b’、‘a’]；
//一个变量，用于记住用户迄今为止到达的“位置”。
var konamiCodePosition=0；
//添加keydown事件侦听器
文档.添加的事件列表器（'keydown'，函数（e）{
//从密钥映射中获取密钥代码的值
var key=允许的键[e.keyCode]；
//从konami代码中获取所需密钥的值
var requiredKey=konamiCode[konamiCodePosition]；
//将钥匙与所需钥匙进行比较
if（key==requiredKey）{
//移动到konami代码序列中的下一个键
konamiCodePosition++；
//如果达到最后一把钥匙，激活作弊
if（konamiCodePosition==konamiCode.length）{
activateCheats（）；
konamiCodePosition=0；
}
}否则{
konamiCodePosition=0；
}
});
函数activateCheats（）{
document.body.style.backgroundImage=“url（'images/cheatBackground.png'）”；
var audio=新音频（'audio/pling.mp3'）；
音频播放（）；
警报（“作弊激活”）；
}

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

紧凑型： Konamicode（cb）上的函数{ var输入=“”； 变量键='38384040373937396665'； 文档.添加的事件列表器（'keydown'，函数（e）{ 输入+=（“”+e.keyCode）； 如果（输入===键）{ 返回cb（）； } 如果（！key.indexOf（input））返回； 输入=（“”+e.keyCode）； }); }

---

onKonamiCode（function（）{alert（'\o/'）}）我自己的精简版，灵感来自以下答案：

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（）

函数。

我非常喜欢Peter的答案，因此我将其命名为命名空间，并将回调设置为可选。我还使用了jquery，因为我喜欢它“\_(ツ)_/“”

var Konami=Konami | |{}；
Konami.key='38384040373937396665'；
Konami.onCode=函数（回调）{
var输入=“”；
$（文档）.on（“向下键”，函数（e）{
输入+=（“”+e.keyCode）；
if（输入===Konami.key）{
如果（回调类型=='undefined'）{
返回警报（“⬆⬆⬇⬇⬅➡⬅➡ 作为类型脚本模块

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;

const Konami=（（）=>{
//上，上，下，下，左，右，左，右，b，a，输入
常量序列：数组=[
38,
38,
40,
40,
37,
39,
37,
39,
66,
65,
13,
];
让头部：数字=0；
设isActive:boolean=false；
let回调：函数|未定义；
const start=（cb:函数）：void=>{
如果（isActive）{
返回；
}
window.addEventListener（“keydown”，onKeyDown）；
回调=cb；
isActive=true；
};
常量停止=（）：无效=>{
如果（！isActive）{
返回；
}
isActive=假；
window.removeEventListener（“keydown”，onKeyDown）；
};
const onKeyDown=（事件）=>{
if（event.keyCode==序列[head]）{
head++；
if（头===序列长度）{
if（回调instanceof函数）{
回调（）；
}
水头=0；
}
}否则{
水头=0；
}
};
返回{
开始
停止
};
})();
导出默认的Konami；

实施：

Konami.start（（）=>{alert（“输入了Konami序列！”；}）；

注意：序列是一个预期输入的数组。通过使用
head
var，可以保持顺序检查和正确输入的数量。如果输入偏离序列，它还提供了一种简单的重新启动方法。它还消除了“计数”的需要“var.
这是我在大约3或4年前提出的一个解决方案。在我的案例中，我选择了keyUp，以使其与keyDown事件中发生的任何操作分开。
此外，无需指定允许哪些键，因为for循环会根据键盘上的所有键检查释放的键

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

var konamicode=[38,38,40,40,37,39,37,39,66,65]；
var-kc=0；
函数检查器（）{
如果（kc==10）{
//当代码匹配时，您希望发生的事情发生在这里。
kc=0；//这将重置序列。
警惕（“成功了！”）；
}
}
功能键控（e）{
var-keynum；
if（window.event）{keynum=event.keyCode；}
如果（e.which）{keynum=e.which；}
对于（i=0；i<222；i++）{//222代表键盘上的所有键。
var kx=konamicode[kc]；//kx表示代码序列中的当前位置。
if（keynum==i）{
//检查键是否与序列匹配，如果不匹配，则重置序列。
如果（i！=kx）{kc=0；}其他{kc++；}
}
}
棋盘格（）；
}
要创建自己的“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 source code that will be executed if you enter the correct code.");
    }

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


常量按下=[]；
const secretCode='ArrowUphiArrowDown'；
window.addEventListener（'k
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();
});

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

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