iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 13
0
Modern Web

JS煉金術:Javascript30+聲光玩轉的Drum Pads系列 第 13

[JS30]DAY12 : Key Sequence Detection (KONAMI CODE)

  • 分享至 

  • xImage
  •  

[程式碼&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()


上一篇
[JS30]DAY11 : Custom HTML5 Video Player
下一篇
[JS30]DAY13 : Slide in on Scroll
系列文
JS煉金術:Javascript30+聲光玩轉的Drum Pads30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言