iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 12
0
Modern Web

森林系工程師之開始工作才學JS?!系列 第 13

Day12 -- Key Sequence Detection

目標

今天要做的是偵測輸入順序,這就像是以前的街機或是掌上遊戲機(GBA, GBC)的密技一樣,可以用來做有趣的小彩蛋

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

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

    if (pressed.join('').includes(secretCode)) {
        console.log('tada!!');
    }
    console.log(pressed);
});

首先,先建立一個陣列,用來儲存輸入的key

再來,對整個視窗綁定事件監聽器,當使用者敲擊按鍵後(keyup),將敲擊的案件存到先前建立的陣列中

我們需要比對的字串長度只需要跟secretCode的長度相同,所以可以使用splice(),第一項引數若是負的則會由後往前數

最後,只要比對由陣列組成的字串是否與secretCode相同就完成了


上一篇
Day11 -- Custom HTML5 Video Player
下一篇
Day13 -- Slide in on Scroll
系列文
森林系工程師之開始工作才學JS?!32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言