WES BOS系列影片
Alex快速導讀系列影片

今天的實例用到了cornify.js這個套件，
功能類似打電動時要放大絕招前，
一定要輸入一段指令串。
例如:上上下下左右左右BA，「Konami Code」，
是遊戲界最知名的指令串。

今天我們要設定自己的指令串，
然後在輸入正確指令串時，
呼叫cornify_add()這個函式，這時空白的網頁就會有彩虹小馬出現。

1.先設定自己的指令串
這裡使用keyCode來紀錄按下的按鍵，避免大小寫差異，
我設定的指令串非常簡單，本人的英文名字「Joyce」。

let secretCode = [74,79,89,67,69]

2.設置一個陣列，紀錄按下的按鍵

let input = []

3.設定監聽器
得到記錄按下按鍵的陣列後，怎麼確認兩個陣列是否相同?
這邊採取的作法是將陣列轉成字串
如果完全相同，就呼叫彩蛋函式

window.addEventListener('keyup', (e)=> {
    input.push(e.keyCode)
    
    if(input.join() === secretCode.join()) {
      console.log('密碼正確')
      cornify_add()
    }
})

4.讓input這個陣列不會一直累加，
而是維持與secretCode一樣的長度
在步驟3完成的監聽器，其實有一個問題，
把input console 出來，就可以知道，
input 會一直累加紀錄。當input越來越長，
就完全不可能跟secretCode相同。也就是彩蛋只會被呼叫一次。

所以，現在就需要想一個方法讓input的長度與secretCode維持相同
要刪減陣列，我們就會想到要使用splice()

複習一下語法:

array.splice(start, deleteCount)

start : 陣列中要開始改動的元素索引（起始為 0），
若索引為負，則會從陣列中最後一個元素開始往前改動（起始為 -1）
且若其絕對值大於陣列的長度，則會被設為 0。

deleteCount : 表示欲刪除的原陣列元素數量的整數，
若 deleteCount 為 0 或是負數，則不會有元素被刪除。

作者的寫法:

input.splice(-secretCode.length - 1, input.length - secretCode.length)

紀錄第一次 : input.splice(-6,-4) -> input陣列有一個數字，input陣列不會改變
紀錄第二次 : input.splice(-6,-3) -> input陣列有二個數字，input陣列不會改變
紀錄第三次 : input.splice(-6,-2) -> input陣列有三個數字，input陣列不會改變
紀錄第四次 : input.splice(-6,-1) -> input陣列有四個數字，input陣列不會改變
紀錄第五次 : input.splice(-6,0) -> input陣列有五個數字，input陣列不會改變
紀錄第六次 : input.splice(-6,1) -> input陣列有六個數字，input陣列從-6的位置，刪除一個數字

以此類推，input陣列長度就會永遠維持與secretCode.length相同

作者刻意的不使用 if else 的寫法，讓整個思路更直覺，如果覺得if else 寫法比較好理解
也可以這麼寫

if (input.length > secretCode.length) {
    input.splice(0,1)
}

但整體程式碼，就比較不容易閱讀。

今天的練習完成囉，完整的程式碼請直接點擊下方codePen連結
codePen
或者也可以直接到WES BOS的網站下載打包好的檔案
javascript30