本篇要研究的是konami code
當使用者在網頁輸入特定密碼串時，會觸發特效

首先我們先了解什麼是konami code
這是一個遊戲公司konami在旗下遊戲都植入一串密碼
上上下下左右左右BA
只要輸入這串密碼
就會有不同的事情發生
例如：全武器、接關、素質最高、隱藏角色等等
因此konami code也成為彩蛋之一

目標

輸入konami code
找尋失落的音檔

首先我們先偵測keyup

window.addEventListener('keyup', e => {
    console.log(e.keyCode);
    console.log(e.key);
    }
  });

發現使用e.key得到的AB區分大小寫a\A、b\B
而上下左右分別是ArrowUp\ArrowDown\ArrowLeft\ArrowRight
而e.keyCode則是38、38、40、40、37、39、37、39、66、65
AB不區分大小寫

這時有2種作法

const player = document.querySelector('#player'); //播放音檔
const hint = document.querySelector('.hint');  //清除提示
const heart = document.querySelector('.heart');  //顯示愛心
const pressed = [];  //存放使用者鍵入的數值
const password = "38384040373937396665";  //密碼

也可以將密碼改成這樣去驗證，我們取上面這種做法

const passwordU = "ArrowUpArrowUpArrowDownArrowDownArrowLeftArrowRightArrowLeftArrowRightba";
const passwordL = "ArrowUpArrowUpArrowDownArrowDownArrowLeftArrowRightArrowLeftArrowRightBA";

我們將使用者鍵入的密碼都存放在陣列pressed
然後會發現隨著使用者鍵入的越多，陣列會越大
這時候我們就需要裁切陣列
裁切思路

• 從最後鍵入往前數
• 保留和密碼一樣長度

由於陣列是一個index儲存一個雙位數字，
我們使用.splice()來幫我們切割
第一個參數表示要從哪裡開始切掉不要

將password.length除以2再減1
(除以二=>和欲保留的密碼鍵入次數相同，減一=>由於從後面數過來，所以需要減一)
而使用press.length減去password.length / 2
這樣就會捨棄掉最早輸入的那一個
如下

window.addEventListener('keyup', e => {
    pressed.push(e.keyCode);
    //splice(從後面數，保留密碼=鍵入次數數)
    pressed.splice(-password.length / 2 - 1 , pressed.length - password.length / 2);
});

接著我們使用join('')來將陣列內的各個元素組成一個字串

join()

join()方法可以讓陣列內的元素組合成一個字串
可以在()內輸入想要用什麼間隔，預設是,
也可以使用‘’來使所有陣列內的元素串起來

接著判別是否跟password相符
如果想同就清除hint、顯示heart、播放音檔

window.addEventListener('keyup', e => {
    pressed.push(e.keyCode);
    //splice(從後面數，保留密碼=鍵入次數數)
    pressed.splice(-password.length / 2 - 1 , pressed.length - password.length / 2);
    if (pressed.join('') === password) {
        hint.style.display = "none";
        heart.style.display = "block";
        speak();
    }
});
function speak(){
    player.currentTime = 0;
    player.play();
}

demo
完整程式碼