JS30 day12 - Key Sequence Detection

作業內容

今天的也是有點無聊，在這個網頁中只要打出某串密碼就會在畫面中跑出獨角獸＠＠

學到什麼

• JS
  splice 的使用補充
  splice 的參數如果是負值的話也可以，比方說我今天想要砍掉倒數第七個項目：

  1 2 3

  const arr = 'abcdefghijklmnopqrstuvwxyz'.split(''); arr.splice(-7, 1) // ["t"] console.log(arr) // ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "u", "v", "w", "x", "y", "z"]

  話說 JS 的陣列本身找值卻不能使用負值，只能使用本身陣列長度去找

  1 2 3

  const arr = 'abcdefghijklmnopqrstuvwxyz'.split(''); console.log(arr[-6]) // undefined console.log(arr[arr.length - 6]) // ["u"]

  然後要注意的是，第二個值如果是負的，splice 就取不到值，就不會對陣列改變

  1 2	const arr = 'abcdefghijklmnopqrstuvwxyz'.split(''); arr.splice(-7, -1) // []

  在今天的例子中，寫成這樣：

  1	pressed.splice(-passCode.length - 1, pressed.length - passCode.length)

  其實 pressed.length - passCode.length 這一段數字在陣列長度還不到密碼長度的時候是負數或者 0 ，這時候都不會刪減陣列，但是一但長度夠了之後，每次都會是 1，讓陣列的長度永遠保持密碼長度

參考資料：
https://github.com/wesbos/JavaScript30

code 內容：
HTML:

1

<script type="text/javascript" src="https://www.cornify.com/js/cornify.js"></script>

JS:

1
2
3
4
5
6
7
8
9
10
11
12

const arr = 'abcdefghijklmnopqrstuvwxyz'.split('');

const pressed = [];
const passCode = "anthony"

window.addEventListener('keydown', (e) => {
  pressed.push(e.key)
  pressed.splice(-passCode.length - 1, pressed.length - passCode.length)
  if(pressed.join('').includes(passCode)){
    cornify_add()
  }
})

• ← Previous Post
• Next Post →