[JS30] day 12 - Key sequence direction (KONAMI CODE)

비밀 코드 만들기🤐

특정 키 코드를 입력하면 등장하는 유니콘

KONAMI CODE?

👉 코나미 커맨드(영어: Konami Command, Konami Code, 일본어: コナミコマンド)는 코나미의 비디오 게임들에서 나타나는 치트 코드의 일종이다. 코나미 에서 만들지 않은 게임에서도 보이기도 한다. 이 커맨드는 1986년에 발매된 패미컴판 그라디우스에서 처음으로 발견되었으며, 콘트라를 계기로 북아메리카 유저들 사이에서 유명해졌다. 코나미 커맨드를 입력하려면 주로 게임의 타이틀 화면에서 게임 컨트롤러로 다음 키를 입력하면 된다.

 

코나미 커맨드는 일종의 이스터에그🥚 이다

https://www.cornify.com/ 🦄 브라우저에 유니콘이 하나씩 나타나는 기능을 제공해주는 사이트를 이용해 만들 것이다

JS

// unicorn script// logic start
  const pressed = [];
  const secretCode = 'ArrowUpArrowUpArrowDownArrowDownArrowLeftArrowRightArrowLeftArrowRightEnter';
  const pushed = document.querySelector('.kbdIpt');

  window.addEventListener('keyup', (e)=> {
    pushed.innerHTML = '[' + e.key + ']'

    pressed.push(e.key);
    pressed.splice(-secretCode.lenght-1, pressed.length - secretCode.length);

    if (pressed.join('').includes(secretCode)) {
      cornify_add();
      pressed.splice(0, pressed.length); // array 초기화
    }
    console.log(pressed);
  })

원본 커맨드는 'wesbos'로 짧았는데 나는 엄청 길어서 array로 넣어주려고 했다(실제 코나미 코드를 이용했다)

const secretCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'Enter'];

 

그러나 if 문에서 비교를 해 줄 때 pressed === secretCode도 되지 않아서 일단 문자로 해 주었다.

그리고 array로 들어온 e.key들을 secretCode와 똑같이 만들기 위해 join으로 묶어 secretCode에 속해있는지(같은지) 판별해 주었다.

 

cornify_add();는 cornify.js 에서 제공하는 명령어로 그냥 쓰면 된다.

원본에는 없었지만 pressed.splice(0, pressed.length); 를 추가해 주었는데, 이유는 커맨드와 일치하지 않는데도 자꾸 커맨드를 입력한 것처럼 인식이 되었기 때문이다. 하나의 커맨드가 완성 될 때마다 pressed array를 초기화 해 주는 방식으로 바꾸었음.

 

splice MDN 설명

• array.splice(start, deleteCount, item[]...)
  • deleteCount (Optional)
    배열에서 제거할 요소의 수입니다.deleteCount를 생략하거나 값이 array.length - start보다 크면 start부터의 모든 요소를 제거합니다.deleteCount가 0 이하라면 어떤 요소도 제거하지 않습니다. 이 때는 최소한 하나의 새로운 요소를 지정해야 합니다.
  • item1, item2, ... (Optional)
    배열에 추가할 요소입니다. 아무 요소도 지정하지 않으면 splice()는 요소를 제거하기만 합니다.
  • start
    배열의 변경을 시작할 인덱스입니다. 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정됩니다. 음수인 경우 배열의 끝에서 부터 요소를 세어나갑니다(원점 -1, 즉 -n이면 요소 끝의 n번째 요소를 가리키며 array.length - n번째 인덱스와 같음). 값의 절대값이 배열의 길이 보다 큰 경우 0으로 설정됩니다.