Wesbos - 코나미 코드

---

코나미 코드…?

💡 게임이나 웹사이트 내에 개발자가 숨겨둔 “이스터에그” 같은 것이라고 생각하면 된다.

---

로직

1. 키보드 입력을 감지할 이벤트리스너 + 함수 생성
2. 배열 생성하기
3. 특정한 문자열이 입력됐을 때 이스터에그 발생되도록 설정

---

이벤트리스너

💡 이 부분은 쉽다.
**’keyup’**을 listen할 수 있도록 설정하고 그에 따른 함수를 생성해보자

// 'keyup'을 감지해야 할 것은 window 전체!
window.addEventListener('keyup', easterEgg);

// 키가 잘 찍히는지 콘솔창을 통해 확인해보자
function easterEgg(e) {
  console.log(e.key);
}

---

잘 된다!!

---

배열 생성

💡 내가 입력한 키값들이 저장될 수 있도록 배열을 활용해보자.

const pressed = [];

// 배열에 잘 저장되는지 테스트도 해보기!

function easterEggg(e) {
  pressed.push(e.key);
  console.log(pressed);
}

//근데... 무한으로 배열에 키가 저장되면 비효율적이니까 MAXIMUM 길이를 정해주자. (splice 활용)

잘 된다!

---

splice()

⭐ 배열의 기존 요소를 삭제, 교체, 추가 하며 배열의 내용을 변경할 수 있도록 하는 메서드!

//기본 문법

array.splice(index, deleteCount, item);

//deleteCount를 0으로 지정하면 insert!
//item 지정하지 않으면 삭제만 수행함

---

시크릿코드 생성

💡 진부하지만… 일단 편의상 ‘hoonjoo’로…!!

const secretCode = 'hoonjoo';

---

이스터에그 실행

💡 배열에 ‘hoonjoo’가 포함된다면 이스터에그 실행되도록 할 것임!

function easterEggg(e) {
  pressed.push(e.key);
  //splice(시작점인덱스, 삭제카운트, 아이템) => (-8. n-7)이 되는 것
  pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);
  console.log(pressed);
  if (pressed.join('').includes(secretCode)) {
    console.log('성공!!');
    //이건 그냥 자바스크립트에서 제공하는 플러그인인 것 같다.
    cornify_add();
  }
}

---

최종코드

const pressed = [];
const secretCode = 'hoonjoo';

function easterEggg(e) {
  pressed.push(e.key);
  //splice(시작점인덱스, 삭제카운트, 아이템) => (-8. n-7)이 되는 것
  pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);
  console.log(pressed);
  if (pressed.join('').includes(secretCode)) {
    console.log('성공!!!');
    cornify_add();
  }
}
window.addEventListener('keyup', easterEggg);

---