목표
코나미 코드와 같이 연속한 키 입력을 감지해 보자.
레이아웃 만들기
페이지 상단에 지금까지 누른 버튼을 순서대로 보여주고, 하단에 가장 최근에 누른 버튼을 보여줄 것이다. 버튼을 누르는 것에 따라 동적으로 생성할 것이기 때문에 HTML 요소는 거의 없다.
스크립트 작성
키 이름은 문자열 형식인데 자주 사용해야 하므로 상수로 선언하였다. 원래는 ArrowUp처럼 파스칼 케이스지만 소문자로 변환해 비교할 것이라 모두 소문자로 적었다. code는 비밀 코드로 코나미 코드를 그대로 이용했고, commands는 사용자의 입력을 저장하는 배열이다.
키를 누르는 이벤트가 발생하면 키의 종류를 가져온다. 대소문자에 관계없이 체크할 수 있도록 소문자로 변환하여 사용했다. 받아온 키를 화면에 보여주고 지금까지 기록된 키로 판정을 진행한다. 메모리가 낭비되지 않도록 기록의 길이는 비밀 코드의 길이보다 길어지지 않도록 했다. 최근 누른 버튼을 기록해야 하므로 push/shift를 이용했다. 그 다음 기록과 비밀 코드가 일치하면 비밀 작업을 수행한다.
키를 올바른 순서로 입력하면 페이지 배경색이 차례대로 변하도록 했다.
화면에 지금까지 누른 버튼을 보여주는 부분은 HTML 요소를 동적으로 생성하여 구현했다. 화살표가 입력되면 화살표 기호로 표시되고 그 외에는 키의 이름이 표시된다.
새로 알게 된 점
배열을 비교할 때 단순히 ==를 이용해 비교할 수 없었다. 그래서 이전 과제에서 배운 every를 응용해서 코드를 작성해 보았다. JSON.stringify()를 이용하는 게 가장 간단한 방법 같다.
