新手村12 - Key Sequence Detection

11th鐵人賽 javascript 前端新手村

Chester

2019-09-27 07:24:51

1246 瀏覽

分享至

12 - Key Sequence Detection

俗話說的好，一天一蘋果，醫生遠離我

一天一 JS，What the f*ck JavaScript？

small steps every day - 記錄著新手村日記

完成目標

做一個打密碼出現彩蛋的功能，像是以前打遊戲的密技（WWSSAADD）
- 呼叫以下網站的圖樣：http://www.cornify.com/js/cornify.js

index_START.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Key Detection</title>
  <script type="text/javascript" src="http://www.cornify.com/js/cornify.js"></script>
</head>
<body>
<script>
</script>
</body>
</html>

JS - step by step

首先，這個範例就是使用者打出 secretCode 密技的內容 上上下下左左右右 就可以召喚出圖片，因此，開始時我們應該先偵測使用者在 keyup 的時候，輸入了什麼按鍵

<script>
  window.addEventListener('keyup',function(env){
    console.log(env.key, env.keyCode)
  });
</script>

把指令的密技 keyCode 存成一個陣列，並將使用者的 input 設為一個空陣列

<script>
  const secretCode = [38, 38, 40, 40, 37, 37, 39, 39];
  const userinput = [];
  window.addEventListener('keyup',function(env){
    console.log(env.key, env.keyCode)
  });
</script>

假設使用者輸入數字時，透過 push 會將 keyCode 推進去 userinput 陣列中

Array.prototype.push()：https://tinyurl.com/yycov32s

<script>
  const secretCode = [38, 38, 40, 40, 37, 37, 39, 39];
  const userinput = [];
  window.addEventListener('keyup',function(env){
    userinput.push(env.keyCode);
  });
</script>

如果使用者 input 的 Keycode 跟 secretCode 相同的話，就會呼叫 cornify_add() 這個 JS 套件中的方法

<script>
  const secretCode = [38, 38, 40, 40, 37, 37, 39, 39];
  const userinput = [];
  window.addEventListener('keyup',function(env){
    userinput.push(env.keyCode);
    if(userinput.join('') === secretCode.join('')){
      cornify_add();
    }
  });
</script>

userinput 陣列打對一次後會一直越來越多～來判斷一下 userinput 長度太長的話，把第一個砍掉

Array.prototype.shift()：https://tinyurl.com/y4bs8dmf

<script>
  const secretCode = [38, 38, 40, 40, 37, 37, 39, 39];
  const userinput = [];
  window.addEventListener('keyup',function(env){
    userinput.push(env.keyCode);

    while(userinput.length > secretCode.length){
      userinput.shift();
    }
    if(userinput.join('') === secretCode.join('')){
      cornify_add();
    }
  });
</script>

就大功告成啦！

JS - Final

<script>
  const secretCode = [38, 38, 40, 40, 37, 37, 39, 39];
  const userinput = [];
  window.addEventListener('keyup',function(env){
    userinput.push(env.keyCode);

    while(userinput.length > secretCode.length){
      userinput.shift();
    }
    if(userinput.join('|') === secretCode.join('|')){
      cornify_add();
    }
  });
</script>

本刊同步於個人網站：http://chestertang.site/

本次範例程式碼原作者來源：https://tinyurl.com/yavm5f5n