iT邦幫忙

2021 iThome 鐵人賽

DAY 12
1
自我挑戰組

JS30 學習日記系列 第 12

Day 12 - Key Sequence Detection (KONAMI CODE)

  • 分享至 

  • xImage
  •  

前言

JS 30 是由加拿大的全端工程師 Wes Bos 免費提供的 JavaScript 簡單應用課程,課程主打 No FrameworksNo CompilersNo LibrariesNo Boilerplate 在30天的30部教學影片裡,建立30個JavaScript的有趣小東西。

另外,Wes Bos 也很無私地在 Github 上公開了所有 JS 30 課程的程式碼,有興趣的話可以去 fork 或下載。


本日目標

預先設定一組secretCode,如果在視窗畫面內輸入的文字與secretCode相同則在視窗畫面加上圖案。


解析程式碼

這次我們需要藉助網路上別人寫好的 JavaScript API,讓他幫忙在每次視窗畫面中輸入文字等於secretCode時,在視窗畫面上新增一個生動的圖案。

觀看完整的 JavaScript API 內容

<script type="text/javascript" src="https://www.cornify.com/js/cornify.js"></script>

JS 部分

宣告常數 pressed 為一個空陣列,用來存放我們在視窗畫面所輸入的值。

宣告常數secretCode作為預設的文字密碼。

const pressed = [];
const secretCode = 'saber';

我們替整個視窗註冊keyup 事件(放開按鍵時觸發)的監聽器,藉由console.log(e.key);可以在console看到我們按下的是哪一個按鍵,緊接著我們將按下的那個按鍵(key)放入陣列pressed的末端。

為了比對輸入文字是否等於secretCode,我們可以利用splice(start,deleteCount)來讓陣列的長度跟secretCode保持一樣,沒做這個處理的話,我們會發現陣列中的元素愈來愈多、長度愈來愈長,永遠沒有和secretCode相同的可能。

splice(start,deleteCount)可以刪除陣列自start索引開始的deleteCount個元素,要注意的是deleteCount要大於0才會開始刪去元素,範例中的secretCode長度是5,也就是說只有輸入到第6次才會開始刪去元素。

有趣的是我們將deleteCount指定為pressed.length - secretCode則效果和直接指定為1相同。只要pressed的長度到達6,經過計算後deleteCount是1,刪去一個元素後,pressed長度又變為5,由此周而復始(5->6;6->5)。

指定start = -secretCode.length - 1的效果是讓我們從最早被 push 進陣列(最前端)的元素開始刪除。

window.addEventListener('keyup',(e)=>{
    console.log(e.key);
    pressed.push(e.key);
    pressed.splice(-secretCode.length - 1,pressed.length - secretCode.length);
});

最後,我們利用 if 判斷pressed.join('')串聯出的字串是否有包含secretCode,如果有包含就在console印出DING DING!並呼叫 API 中的cornify_add()在視窗畫面裡加上圖片。我們也可以再補上console.log(pressed);,查看目前pressed陣列內的元素。

window.addEventListener('keyup',(e)=>{
    /***省略***/
    /***省略***/
    if(pressed.join('').includes(secretCode)){
      console.log('DING DING!');
      cornify_add();
    }

    console.log(pressed);
});

實際效果

ps.背景圖是後來改的,原版是空白畫面。

補充資料:

keyup事件
Array.prototype.splice()

範例網頁請按此


上一篇
Day 11 - Custom HTML5 Video Player
下一篇
Day 13 - Slide In on Scroll
系列文
JS30 學習日記31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言