iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 17
1
Modern Web

實作經典 JavaScript 30系列 第 17

Day17: 為網站設計一個彩蛋

WES BOS系列影片
Alex快速導讀系列影片

今天的實例用到了cornify.js這個套件,
功能類似打電動時要放大絕招前,
一定要輸入一段指令串。
例如:上上下下左右左右BA,「Konami Code」,
是遊戲界最知名的指令串。

今天我們要設定自己的指令串,
然後在輸入正確指令串時,
呼叫cornify_add()這個函式,這時空白的網頁就會有彩虹小馬出現。

1.先設定自己的指令串
這裡使用keyCode來紀錄按下的按鍵,避免大小寫差異,
我設定的指令串非常簡單,本人的英文名字「Joyce」。

let secretCode = [74,79,89,67,69]

2.設置一個陣列,紀錄按下的按鍵

let input = []

3.設定監聽器
得到記錄按下按鍵的陣列後,怎麼確認兩個陣列是否相同?
這邊採取的作法是將陣列轉成字串
如果完全相同,就呼叫彩蛋函式

window.addEventListener('keyup', (e)=> {
    input.push(e.keyCode)
    
    if(input.join() === secretCode.join()) {
      console.log('密碼正確')
      cornify_add()
    }
})

4.讓input這個陣列不會一直累加,
而是維持與secretCode一樣的長度

在步驟3完成的監聽器,其實有一個問題,
把input console 出來,就可以知道,
input 會一直累加紀錄。當input越來越長,
就完全不可能跟secretCode相同。也就是彩蛋只會被呼叫一次。

所以,現在就需要想一個方法讓input的長度與secretCode維持相同
要刪減陣列,我們就會想到要使用splice()

複習一下語法:

array.splice(start, deleteCount)

start : 陣列中要開始改動的元素索引(起始為 0),
若索引為負,則會從陣列中最後一個元素開始往前改動(起始為 -1)
且若其絕對值大於陣列的長度,則會被設為 0。

deleteCount : 表示欲刪除的原陣列元素數量的整數,
若 deleteCount 為 0 或是負數,則不會有元素被刪除。

作者的寫法:

input.splice(-secretCode.length - 1, input.length - secretCode.length)

紀錄第一次 : input.splice(-6,-4) -> input陣列有一個數字,input陣列不會改變
紀錄第二次 : input.splice(-6,-3) -> input陣列有二個數字,input陣列不會改變
紀錄第三次 : input.splice(-6,-2) -> input陣列有三個數字,input陣列不會改變
紀錄第四次 : input.splice(-6,-1) -> input陣列有四個數字,input陣列不會改變
紀錄第五次 : input.splice(-6,0) -> input陣列有五個數字,input陣列不會改變
紀錄第六次 : input.splice(-6,1) -> input陣列有六個數字,input陣列從-6的位置,刪除一個數字

以此類推,input陣列長度就會永遠維持與secretCode.length相同

作者刻意的不使用 if else 的寫法,讓整個思路更直覺,如果覺得if else 寫法比較好理解
也可以這麼寫

if (input.length > secretCode.length) {
    input.splice(0,1)
}

但整體程式碼,就比較不容易閱讀。

今天的練習完成囉,完整的程式碼請直接點擊下方codePen連結
codePen
或者也可以直接到WES BOS的網站下載打包好的檔案
javascript30


上一篇
Day16: 自製的影片撥放器(二)
下一篇
Day 18 : 為網頁增加圖片動畫效果
系列文
實作經典 JavaScript 3030
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
CherryYang
iT邦新手 4 級 ‧ 2021-08-23 15:38:56

哈囉~我最近正在觀摩學習你的彩蛋Code,
想跟你說,我發現你的這個Code似乎有個小bug

我要留言

立即登入留言