今日任務:在網頁上輸入關鍵密碼會有小彩蛋

偵測使用者輸入了什麼

KeyboardEvent.key 偵測使用者按下哪個鍵盤按鈕，返回字符串。

window.addEventListener('keydown',EasterEgg)

function EasterEgg(e){
  console.log(e.key)
}

將輸入的字串放到一個陣列中

const pressed = []

function EasterEgg(e){
  pressed.push(e.key) 
  console.log(pressed)
}

比對陣列

我們不需要全部輸入的陣列，只需要對比密碼字母數就好
使用我們第7天學過的Array.prototype.splice(start, deleteCount)
當輸入的數字(pressed.length)<=密碼字母數(secret.length)時，相減為負數
deleteCount為0 或是負數的時候不會有元素被刪除

當第一次輸入的數字(pressed.length)>密碼字母數(secret.length)時，相減為1
splice(0, 1): 會從索引 0 的位置開始，刪除 1 個元素

也就是說，
當輸入的數字(pressed.length)>密碼字母數(secret.length)時，
每輸入進一個新數字，就會刪掉最前面那個數字
輸入的數字(pressed.length)就會一直等於密碼字母數(secret.length)

const secretCode = 'unicorn';

function EasterEgg(e){
  pressed.push(e.key) 
  pressed.splice(0, pressed.length - secretCode.length);
  console.log(pressed.join(''))
}

將陣列轉為字串，比對密碼後顯示小彩蛋

includes() 方法會判斷陣列是否包含特定的元素，並以此來回傳 true 或 false。

function EasterEgg(e){
  pressed.push(e.key) 
  pressed.splice(0,pressed.length-secretCode.length)
  
  if(pressed.join('').includes(secretCode)){
    console.log('Pass!')
  }
   console.log(pressed)
}

作者給的有趣小彩蛋

  if(pressed.join('').includes(secretCode)){
    console.log('Pass!')
    cornify_add()
  }

今日學習到的:

• KeyboardEvent.key 偵測使用者按下哪個鍵盤按鈕，返回字符串。
• pressed.splice
• includes() 方法會判斷陣列是否包含特定的元素，並以此來回傳 true 或 false。

效果連結:連結

參考連結:
MDN: Array.prototype.splice()
MDN: includes()