JS30-12-Key-Sequence-Detection

發表於 | 分類於 ， | 0 comments

輸入隱藏指令後，觸發特效的效果。

目標

  • 網頁輸入「隱藏指令」後，觸發特效的效果

實踐步驟

  1. 監聽 window 的 keyup 事件

    • window.addEventListener(‘keydown’, function)

  2. 判斷輸入的隱藏指令，是否正確。

    • 利用 e.key 取得鍵盤的值
    • 籍由 splice()、join()、includes() 搭配使用進行判斷。

成品

[DEMO] | [GitHub]

隱藏指令：kanboo

JS學習紀錄

思考：如何刪除多餘的字元

Q

主要思考的點是每次鍵盤輸入後，只留下隱藏指令的長度，而將多餘的字元刪除呢？

A

因為每次 push 都加進Array最後面的位置，所以就代表多餘的字元是在前面的位置，

所以我的思維是「從前面扣掉 多餘的字元(鍵盤輸入總長度-隱藏指令長度)」。

從前面計算
1
2
// 只保留與superKey一樣長度的字元，多餘的去除掉，避免太過冗長不好看。
keyArr.splice(0, keyArr.length - superKey.length);

下例為影片作者的寫法，附上參考。

作者寫法：從後往前計算
1
keyArr.splice(-superKey.length - 1, keyArr.length - superKey.length);

JS程式碼

程式碼不多，就直接貼上來，方便看。

整段程式碼
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const superKey = 'kanboo'; // 隱藏指令
const keyArr = []; // 暫存鍵盤輸入

function isSuperKey(e){
  keyArr.push(e.key);

  // 只保留與superKey一樣長度的字元，多餘的去除掉，避免太過冗長不好看。
  keyArr.splice(0, keyArr.length - superKey.length);

  // 作者寫法：從後往前計算
  // keyArr.splice(-superKey.length - 1, keyArr.length - superKey.length); 

  if ( keyArr.join('').includes(superKey)){
    cornify_add();
  }
}

window.addEventListener('keydown', isSuperKey);

補充：字串比對

看到Guahsu大的文章，有整理關於字串比對的各種方式，覺得非常實用，筆記…

方便以後可快速搜尋。

各種判斷的方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var str = 'abcde';
var check1 = 'ab'; //包含ab，期待值是true
var check2 = 'ac'; //包含ac，期待值是false

//用includes()來取得true/false
str.includes(check1); //true
str.includes(check2); //false

//用match()來處理，判斷是否為 null 來取得true/false
str.match(check1); // object
str.match(check2); // null

//用indexOf()來處理，判斷是否為 -1 來取得true/false
str.indexOf(check1); // 0
str.indexOf(check2); // -1

//用search()，判斷是否為 -1 來取得true/false
str.search(check1); // 0
str.search(check2); // -1

//用RegExp正規表示式來取得true/false
var reg1 = /ab/;
var reg2 = /ac/;
reg1.test(str); // true
reg2.test(str); // false
Guahsu-探索