JS30 Day 12 筆記

功能

鍵盤輸入網站預設的 " 暗號 " 後，網站會出現彩蛋特效

思路：比對輸入的值是否與預設的 "密碼" 相同，相同的話則觸發特效

方法一：

step 1 : 設定密碼與建立陣列 preesed 來保存輸入的值

// 建立 konamiCodeode
const konamiCode = 'hello'

// 建立一個陣列準備裝輸入的值
const pressed = []

step 2 : 監聽 window 的鍵盤動作，並進行比對

// 監聽 keyup 事件
window.addEventListener('keyup', function(e){

    // 將按下的鍵記錄在 pressed 陣列中
  pressed.push(e.key)

  // 用 slice 方法取出要比對的陣列
  // 保留與 konamiCode 長度相同且最新輸入的字母
  // 陣列 pressed 的長度超出 konamiCode 的長度時
  // 陣列 pressed 刪除第一個元素，

  // 相當於 
  // if(pressed.length > konamiCode.length){
  //   pressed.splice(0,1)
  // }
  pressed
    .slice(
      -konamiCode.length - 1, 
      pressed.length - konamiCode.length
    )

  // 將陣列 pressed 轉成字串，比對最新按下這些按鍵內容是否包含 konamiCode
  // 有的話，執行 cornify_add()
  if(pressed.join('').includes(konamiCode)){
    cornify_add()
  }
})

方法二：

// 用 keyCode 的方式比對，輸入值是否與 konamiCode 相同
const konamiCode = [38,38,40,40,37,39,37,39,66,65]
let pressed = []

window.addEventListener('keyup',function(e){
  pressed.push(e.keyCode)

  // 當輸入的字母個數大於 konamiCode 時，將陣列 pressed 的第一個元素去掉
  while(pressed.length > konamiCode.length){
    pressed.shift()
  }

  // 將 pressed 與 konamiCode 兩個陣列轉成字串，然後比對是否相同， 是的話執行 cornify_add()
  if(pressed.join('|') === konamiCode.join('|')){
    cornify_add()
  }
})

Javascript

keyup() 當鍵盤上的手指點擊後離開按鍵時， keyup 事件會被觸發。

includes() 判斷字串或陣列中是否有包含特定字串，回傳 true 或 false

const array1 = [1, 2, 3];

console.log(array1.includes(2)); // true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat')); // true

console.log(pets.includes('at')); // false

splice() 在陣列指定的位置刪除或添加元素，會改變原陣列的值

// start：起始的 index 位置
// deleteCount：要刪除的數量（若為負數不執行，為 0 則是不刪除）
// item1,item2 ...： 要加入的元素

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

// var array = ['a','b','c'];
// array.splice(0, 2);  // ['c']
// array.splice(-1, 1); // ['a','b']
// array.splice(2, -1); //第二個參數為負值，不執行，所以還是 [a,b,c]
// array.splice(0, 2, 'd') // ['a','b','d']

join() 將讓陣列轉成字串，並可透過()內的參數串接字串

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join()); //"Fire,Air,Water"
console.log(elements.join('')); //"FireAirWater"
console.log(elements.join('-'));//"Fire-Air-Water"

字串比對- 以下是 guahsu 整理的筆記，覺得超棒的

var str = 'abcde';
var check1 = 'ab'; //包含ab，期待值是true
var check2 = 'ac'; //包含ac，期待值是false

//用includes()來取得true/false
str.includes(check1); //true
str.includes(check2); //false

//用match()來處理，判斷是否為null來取得true/false
str.match(check1); // object
str.match(check2); // null

//用indexOf()來處理，判斷是否為-1來取得true/false
str.indexOf(check1); // 0
str.indexOf(check2); // -1

//用search()，判斷是否為-1來取得true/false
str.search(check1); // 0
str.search(check2); // -1

//用RegExp正規表示式來取得true/false
var reg1 = /ab/;
var reg2 = /ac/;
reg1.test(str); // true
reg2.test(str); // false

參考資料：