Day12 Key Sequence Detection (KONAMI CODE)

Demo

第12天的實作目標在網頁中做出科拿米秘技的網頁。

科拿米祕技是指有特定的暗碼，需要打對符合的鍵盤值才會觸發。

首先設定空的資料陣列，在keyup成立時，取得event.key值，把key值給push到空的資料陣列陣列中。

接下來在Array.splice()來控制，目標是讓資料陣列的長度等同於目標值的長度。

但資料陣列會一直被輸入值，這時要把資料陣列的值去除，讓長度等同於目標值的長度，而且去除資料的位置要為0，這樣每當資料push中時，讓資料保持固定長度，當大於長度時是從索引值0，開始移除。

透過Array.splice()來控制資料陣列的長度。在splice中的start要設定為負數且大於資料列的長度，這樣索引值就會從0開始，
deleteCount的值要一開始當資料列小於目標值時，就為0即不刪除，當資料陣列大於目標值才進行刪除資料列長度-目標列長度。

inputs.splice( start, deleteCount)

之後再透過Array.join('')將陣列結合起來，再透過Array.includes()來比對目標值跟資料陣列。

當比對成功時就執行cornify_add()，讓畫面產生效果。

cornify_add()是js30作者所提供的特效js檔。

Javascript

1. Array.prototype.splice()
   splice() 這方法可刪除或新增一個Array的內容。

// Array.splice 
var removed = myFish.splice(2, 0, 'drum');

句型

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

語法：

array.splice(start)
array.splice(start, deleteCount)
array.splice(start, deleteCount, item1, item2, ...)

參數

start
陣列中要開始改動的索引(起始為 0)。 如果大於陣列長度，則索引值會被設為陣列長度。 若是負數，則會從陣列中最後一個元素開始，此外，若其絕對值大於陣列的長度，則會被設為 0。
deleteCount 選擇性
表示欲刪除的陣列元素數量的整數。 若 deleteCount 為 0，則不會有元素被刪除。 因此，你應該給定至少一個欲加入的新元素。 如果 deleteCount 大於陣列起始索引算起的剩餘元素數量，則會從起始索引到最後一個元素都刪除。
如果 deleteCount 被忽略，抑或是其值大於 array.length - start ，則所有從起始索引開始到陣列中最後一個元素都會被刪除。
item1, item2, ... 選擇性
從起始索引開始，要加入到陣列的元素。 如果你沒有指定任何元素，則 splice() 只會依照 start 和 deleteCount 刪除陣列的元素。

2. KeyboardEvent.key
   當按下鍵盤按下後回傳一個代表的鍵盤值。
   The KeyboardEvent.key read-only property returns the value of a key or keys pressed by the user.

3. KeyboardEvent.Events.keydown
   keydown是當鍵盤被按下去時觸發。
   The keydown event is fired when a key is pressed down.

4. KeyboardEvent.Events.keypress
   keypress是當鍵盤被按下去時觸發，是要鍵盤會產生字元。
   The keypress event is fired when a key that produces a character value is pressed down.

5. KeyboardEvent.Events.keyup
   keyup事件是當鍵盤被放開時觸發。
   The keyup event is fired when a key is released.

keydown, keypress, keyup的差別

• 當按鍵按下時，會送出 keydown event 。
• 當按鍵不是特殊鍵（ modifier key），例如Ctrl 、Alt……等等，會送出 keypress event 。
• 當按鍵放開時，會送出 keyup event 。

6. Array.prototype.join()
   join()方法是將陣列全部元素合起來轉換成一個字串。

var a = ['Wind', 'Rain', 'Fire'];
a.join();      // 'Wind,Rain,Fire'
a.join(', ');  // 'Wind, Rain, Fire'
a.join(' + '); // 'Wind + Rain + Fire'
a.join('');    // 'WindRainFire'

7. Array.prototype.includes()
   includes()是判斷陣列是否有符合目標值，回傳布林trueorfalse值。

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

Tags

splice, KONAMI CODE