那就開始吧!
今天的彩蛋使用的是 Cornify 這個套件，它可以讓你的網頁充斥著彩虹小馬！當使用者輸入正確密語，就會出現彩虹小馬。
設定密語
首先先設定通關密語，當使用者完全依照順序輸入後就會啟動小彩蛋，假設我的密語是「hen 帥」
const secretCode = ‘henshuai’;
設定監聽事件
接著要監聽使用者輸入的內容，並記錄輸入的內容，這裡使用 key，但也可以使用 keyCode（會是數字）記錄
window.addEventListener(‘keyup’, function(e) {
// code here
});
比對輸入內容與密語是否一致
有密語了也有輸入內容了，來比對是否一致吧！
首先先建立一個 array 來記錄輸入的內容，也就是當每次輸入時，使用 push() 將內容加入陣列中
let codeArr = [];
window.addEventListener(‘keyup’, function(e) {
codeArr.push(e.key);
});
但如此一來當輸入內容越來越多時 array 會變得很長，所以要將 codeArr 的長度設定在密語的長度以下
let codeArr = [];
window.addEventListener(‘keyup’, function(e) {
codeArr.push(e.key);
if (codeArr.length > secretCode.length) {
codeArr.shift(); // shift() 會將 array 的第一位移除
}
});
當使用著真的正確輸入了密語，就會啟動開啟小彩蛋，在 Cornify 中的語法是使用 cornify_add() 來新增彩虹小馬。但這裡我想做點小變化：當正確輸入時會開啟開關，之後無論輸入任何按鍵都可以新增彩虹小馬，因此需要設定一個變數來紀錄是否已啟動
let activated = false;
let codeArr = [];
window.addEventListener(‘keyup’, function(e) {
codeArr.push(e.key);
if (codeArr.length > secretCode.length) {
codeArr.shift(); // shift() 會將 array 的第一位移除
}
if (codeArr.join(”).includes(secretCode)) {
activated = true;
}
if (activated) { // 當啟動後按下任何鍵都會增加彩虹小馬
cornify_add();
}
});
這裡的比對方式是將 array 轉為 string 後判斷該字串是否包含密語的內容（includes(..) 會 return true 或是 false），如果有就啟動彩蛋
如此一來就完成啦！希望你玩得愉快～