Javascript 30 讀書會 day12

JS30 Day 12 - Key Sequence Detection (KONAMI CODE)
科樂美秘技 實作 經典的 ↑ ↑ ↓ ↓ ← → ← → B A

• KONAMI CODE 簡介

KONAMI CODE 的由來來自 Konami 遊戲公司

1985 年，遊戲設計師橋本和久在 Debug 其中一款遊戲《宇宙巡航艦》 時，因為關卡太難了自己也打不過，所以就加入了這段密技，輸入的人可以拿到全裝備全能量以便自己過關 Debug，結束後也沒有拿掉這段密技，就這樣成為第一段 KONAMI CODE。

而真正發揚光大這段密技的是 Konami 的另一款作品 《魂斗羅》 ，只要輸入 「上上下下左右左右BA」，就能從 3 條命變成 30 條命，拯救了無數玩家。

後來 KONAMI 在之後的 30 幾年橫跨了多個遊戲世代，都有繼續推出的遊戲中放入 KONAMI CODE 或是類似的密技，這也演變成了一種流行文化。

但是最近 10 年內越來越多 KONAMI CODE 被移除Q_Q

一些有此彩蛋的網站

暴雪娛樂Overwatch官方網站
Plurk - 占卜精靈
GoSkills
BuzzFeed

先思考：那我們要怎麼在網頁上實作出 KONAMI CODE 的效果呢？

1. 設定密碼

2. 監聽並儲存我們輸入的字串。

   • 字串長度要和密碼長度等長

3. 將我們儲存的字串與密碼字串做判斷，相等的話跳出效果。

監聽並儲存下我們輸入的字串。

1. 把鍵盤輸入的字串存取下來

先建立一個存取用的空陣列

const pressed = []

$(window).keyup( (e) => {
	
})

監聽到的陣列長度維持在固定長

將陣列長度維持在密碼長度，這邊有兩種方式

1. 可以使用判斷式判斷長度，並搭配 .shift() 移除陣列的第一個元素

shift() 方法會移除陣列的第一個元素並回傳陣列。此方法會改變陣列的長度。

pressed = [] // 我們鍵盤輸入組成的陣列
secretCode = 'abc' // KONAMI CODE 

if (pressed.length > secretCode.length) {
	pressed.shift()
}

2. 或是使用 .splice()

secretCode = 'abc' // KONAMI CODE 
pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length)

pressed = [z, x, c, v] 
pressed.splice(-3 - 1, 4 - 3)
pressed.splice(-4, 1)
pressed = [x, c, v] 

只有在 pressed 鍵盤陣列長度大於密碼長度才會被觸發，

判斷鍵盤陣列跟 KONAMI CODE 是否相等

就判斷式

if (pressed.join('') === secretCode) {
  console.log('WEEEEEEEEEEEEEEEEEEEEEEEEEE')
}

// 或是

if (pressed.join('').includes(secretCode)) {
  console.log('WEEEEEEEEEEEEEEEEEEEEEEEEEE')
}

謝謝大家

本周小挑戰第一名： Allen 同學!!

使用到的技術

keyup() 可以監聽鍵盤輸入什麼

.includes() MDN 用以判斷字串或陣列中是否有包含特定字串。

console.log('apple'.includes('apple'))		// true
console.log('apple is good'.includes('apple'))		// true
console.log(['apple', 'org'].includes('apple'))		// true
console.log(['apple is good', 'org'].includes('apple'))		// false

.splice() MDN
arr.splice(要插入的位置, 要刪除的數量, 要插入的元素們)
arr.splice(要刪除的位置, 要刪除的數量)
<要刪除的數量> 如果為負數的話不會執行

.shift() MDN shift() 方法會移除並回傳陣列的第一個元素。此方法會改變陣列的長度。