[JavaScript] 12. Key Sequence Detection

💡 특정 키들을 순서대로 입력하면 발생하는 이스터에그를 구현해보자!

로직

1. 키보드 입력을 감지
2. 키를 누를 때 마다 해당 키를 배열에 담기
3. 배열의 길이가 목표 키 조합의 길이보다 커지면
   ⇒ 누른 키를 배열에 담는 동시에 이미 배열에 있던 키들 중 가장 먼저 담긴 키를 제거
   ⇒ 배열의 길이가 목표 키 조합의 길이와 동일하게 유지됨
4. 배열과 목표 키 조합이 같아지면 이스터에그 발생!

---

코딩 과정

1. 키보드 입력 감지 핸들러 생성

window.addEventListener("keyup", (e) => {
  console.log(e.key);
});

2. 배열에 누른 키 담기

const pressedArr = [];

window.addEventListener("keyup", (e) => {
  console.log("key:", e.key);
  pressedArr.push(e.key);
  console.log("pressed key array:", pressedArr);
});

3. 이스터에그 발생 조건 만들기

const pressedArr = [];
const secretCode = "sub";

window.addEventListener("keyup", (e) => {
  pressed.push(e.key);
  console.log(
    "배열자르기 전",
    "codeL",
    secretCode.length,
    "arrL",
    pressed.length
  );
  pressed.splice(0, pressed.length - secretCode.length);
  if (pressed.join("").includes(secretCode)) {
    console.log("DING DING!");
    // cornify_add()는 wesbos가 넣어둔 랜덤 유니콘 이미지 추가 함수
    cornify_add();
  }
  console.log(pressed);
  console.log(
    "배열자른 후",
    "codeL",
    secretCode.length,
    "arrL",
    pressed.length
  );
  console.log("");
});

우선 목표 키 조합 secretCode를 미리 상수로 선언해주자.

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

splice()메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.

start는 배열의 변경을 시작할 인덱스로

• 배열의 길이보다 큰 값이면 배열의 길이로 설정
• 음수인 경우에는 배열의 끝에서부터 요소를 세어나감
• 음수인 값의 절대값이 배열의 길이보다 크면 0으로 설정

deleteCount는 배열에서 제거할 요소의 수로

• deleteCount를 생략하거나 값이 array.length - start보다 크면 start부터의 모든 요소를 제거
• deleteCount가 0 이하라면 어떤 요소도 제거X.
  이 때는 최소한 하나의 새로운 요소를 지정해야 한다.

item1, item2, ...는 배열에 추가할 요소로

• 아무 요소도 지정하지 않으면 splice()는 요소를 제거하기만 한다.

여기서 start는 배열 맨 앞의 키를 제거할 것이므로 0으로 두고
deleteCount는 배열의 길이(arrL)가 secretCode의 길이(codeL)보다 커졌을 때만 맨 앞 키 1개를 제거하도록
pressedArr.length - secretCode.length로 둔다.

(arrL이 3보다 커진 순간 배열 맨앞 키를 제거해 arrL을 3으로 유지한다.)

이 후 array.join(’’)으로 배열의 모든 요소를 연결해 만든 하나의 문자열이 secretCode를 포함하면 이스터에그가 발동한다!

---

최종 완성 코드

const pressed = [];
const secretCode = "crusub";

window.addEventListener("keyup", (e) => {
  pressed.push(e.key);
  pressed.splice(0, pressed.length - secretCode.length);
  if (pressed.join("").includes(secretCode)) {
    console.log("DING DING!");
    cornify_add();
  }
});