[程式碼&DEMO] [HackMD完整筆記]

目標

當在頁面輸入了完整的“密碼”（一串預先定義好的字串）後，會顯示Cornify特效。

步驟流程

STEP1 宣告變數
宣告一個空的陣列，用來存使用者輸入的字串。
宣告一個變數，用來放預設密碼。

const pressed = [],
secretCode = 'helloworld'

STEP2 addEventListener

加上鍵盤的 keyup 事件監聽，用箭頭函數的參數來接收事件。
(注意此處的 keyup 事件是針對頁面的，在 Console 面板中並不會觸發。)

 window.addEventListener('keyup', (e) => { })

STEP3 驗證輸入的字串

當每一次鍵盤輸入時會觸發 keyup 事件,將每個輸入的字存入pressed陣列裡。
然後每輸入一個字符時，會擠掉原有的的字符，保證其最大長度始終為secretCode 的長度。(這樣做的目的是為了便於驗證密碼，只有完整無誤的輸入一次密碼時，才會觸發相應的效果)

window.addEventListener('keyup', (e) => {
  pressed.push(e.key);//使用者輸入的值放入pressed陣列裡
  pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length); 
  //截取陣列。使pressed陣列長度始終與設定密碼相同，且當超出時替換掉陣列第一個元素
  
  if (pressed.join('').includes(secretCode)) { //判斷是否符合密碼
    cornify_add(); //觸發效果
    }
 });

學習筆記

Array.prototype.splice()

Array.prototype.join()

Array.prototype.includes()