12 - Key Sequence Detection

tags: JavaScript30

專案簡介

第十二天的目標是監聽鍵盤事件，偵測有沒有被依序按下秘密字串，若符合則在畫面上印出彩虹小馬wwww

課程影片：JS30 12
導讀影片：Alex

初始文件

Github 檔案位置：12 - Key Sequence Detection

網頁一開始的樣子如下，也是白的，額不對為什麼我要說也

可以先去看看 最後的成品

正式製作

流程

今天的要求比較簡單，大概如下

1. 設立秘密字串，畫面加上鍵盤監聽
2. 偵測輸入的字串是否等於秘密字串

設立秘密字串，畫面加上鍵盤監聽

設置一個 now 側錄鍵盤，再設置自己的secretKey

這裡利用了上次學到的正則表達式，把除了單英文數字以外的東西去掉了，如大小寫轉換會偵測到 CapsLock

const now = [];
const secretKey = "baieQQ";

window.addEventListener('keyup', (e) => {
  console.log(e.key);
   if(!e.key.match("^[a-zA-Z0-9]{1}$")){
    return;
  }
  now.push(e.key);
  console.log(now);
});

偵測輸入的字串是否等於秘密字串

接下來就是利用 splice() 在 now.length > secretKey.length 時刪除最前面的東西，(索引 0, 刪除 1)

cornify_add(); 則是引入外部 JS 文件裡的函式，會召喚彩虹小馬 www

const now = [];
const secretKey = "baieQQ";

window.addEventListener('keyup', (e) => {
  // console.log(e.key);
  if(!e.key.match("^[a-zA-Z0-9]{1}$")){
    return;
  }
  now.push(e.key);
  if(now.length > secretKey.length){
      now.splice(0, 1);
  }
  if (now.join('').includes(secretKey)){
    cornify_add();
    console.log('iwiwi');
  }
  // console.log(now);
});

最後程式碼

const now = [];
const secretKey = "baieQQ";

window.addEventListener('keyup', (e) => {
  console.log(e.key);
  if(!e.key.match("^[a-zA-Z0-9]{1}$")){
    return;
  }
  now.push(e.key);
  if(now.length > secretKey.length){
      now.splice(0, 1);
  }
  if (now.join('').includes(secretKey)){
    cornify_add();
    console.log('iwiwi');
  }
  console.log(now);
});

完成結果圖

最後的成品

結語

以上是第十二天的製作紀錄，如有錯誤或不足的地方還請多多指教 >.<

JavaScript KONAMI CODE! #JavaScript30 12/30
[ Alex 宅幹嘛 ] 深入淺出 Javascript30 快速導覽 | Day 12：Key Sequence Detection
MDN Web Docs