iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
自我挑戰組

JS30 學習日記系列 第 12

Day 12 - Key Sequence Detection (KONAMI CODE)

前言

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 學習日記30

尚未有邦友留言

立即登入留言