12. Key Sequence Detection

프로젝트 소개

• 일정 키 패턴의 입력 값을 받아서, 미리 정해진 패턴과 일치하면, 유니콘 캐릭터가 화면에 새로 생성되도록 구현

코드 작성 순서

1. 미리 사전에 일정한 키 패턴을 array 형식으로 저장
2. keyup 이벤트에 대한 이벤트 리스너 생성
3. 입력 키 값을 받아 미리 사전에 정해둔 패턴과 일치여부를 판단 => 여기서, 미리 정해진 키의 자리수에 따라 자동으로 잘라서 일치여부를 판단하도록 하는게 핵심(splice method)
4. if 문 통해 이벤트 생성

배운 것들

• splice(a, b, c)
  : 삭제 뿐만 아니라, 교체, 추가 등에도 사용 가능한 array method임
  : a index 부터 b개를 삭제, c를 추가(b와 c는 선택적 입력)
  : a 인자가 배열이 길이보다 크면, 배열의 길이로 자동 설정, 음수이면, 뒤에서 부터 -1부터 시작, 값의 절대값이 배열의 길이보다 큰 경우 0으로 설정됨
  : b 인자는 생략하거나 배열의 길이 - a보다 크면, a부터 모든 요소를 제거
  : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
  

최종 코드

<script>
      const pressed = [];
      const secretKey = 'wecode';
      const secretArray = secretKey.split('');

      window.addEventListener('keyup', (e) => {
        console.log(secretArray);
        pressed.push(e.key);

        console.log(pressed);

        if (pressed.join('') == secretArray.join('')) {
          cornify_add();
        }

        if (pressed.length >= secretArray.length) {
          pressed.shift();
          console.log('ok');
        }
      });
    </script>

• 위 코드는 내가 다른 방법으로 시도한 코드이고 원래 공개 코드는 아래와 같음

<script>
      const pressed = [];
      const secretCode = 'wesbos';

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

느낀 점

• 이번 프로젝트에서 핵심은, 입력하는 키 값의 수를 일정 수로 항상 잘라서 비교하는 것이었음.
• .splice method를 활용해도 되고, 내가 한 방식대로 .shift method 활용해도 됨
• 한 가지 아직 궁금한 점은, 내가 작성한 코드에서 첫 번째 if 문이 먼저 나오는 경우는 정상작동했으나, 두 번째 if 문을 더 앞에 두는 경우에는 작동하지 않았는데, 정확히 원인을 모르겠음