Key Sequence Detection(KONAMI CODE) 🎮🎲

Key sequencing detection, 즉 키보드로 연속된 입력을 할 때

어떤 키를 입력했는지를 기억했다가 특정 문자열이 입력되었는지를 검사하는 예제이다.

 

흔히 게임에서는 '커맨드'라는 이름으로 많이 사용된다.

격투 게임에서 특정 커맨드를 입력하면 필살기가 나간다거나

마리오 게임에서 특정 커맨드를 입력하면 목숨이 무한이 된다거나, 그런 것들.

 

우선, 내가 입력한 키들을 담아둘 배열(pressed 배열)을 만들고

어떤 문자열을 입력했을 때 커맨드가 되도록 할건지(secretCode 변수)를 변수로 만들어준다.

그리고, 키를 입력할 때마다 pressed에 집어넣어주면 된다.

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

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

 

근데, 이렇게 두면 키를 입력할 때마다 계속 집어넣기 때문에 배열의 크기가 무한정으로 커지게 된다.

어차피 우리는 secretCode 라는 정해진 길이의 문자열만 검출하면 되기 때문에

secretCode의 길이보다 커지면 계속해서 배열을 잘라주도록 하자.

pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);

만약 secretCode가 'javascript' 라고 치면, 총 10글자이므로

배열의 길이가 11이 될 때마다 -11번째 index에서 배열의 길이(11) - secretCode의 길이(10) 만큼 splice 해주면 된다.

그러면 길이가 10을 넘어갈 때마다 맨 앞에 한 글자씩 계속 잘라내면서, 새로 들어온 10글자로 이루어진 배열이 남게 된다.

마지막으로, 우리가 입력한 키로 이루어진 배열이 secretCode와 일치하는지를 보기 위해서는

pressed 배열을 join한 문자열이 secretCode를 includes하는지를 검사하면 된다.

if(pressed.join('').includes(secretCode)) {
    console.log('You found it!');
}

 

전체 자바스크립트 코드

<script>  
    const pressed = [];
    const secretCode = 'javascript';
    window.addEventListener('keyup', (e) => {
        pressed.push(e.key);
    
        pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);

        if(pressed.join('').includes(secretCode)) {
            console.log('You found it!');
        }
    });
</script>

오늘은 약간 쉬어가는 느낌의 간단한 예제였다.

문자열을 다루는 간단한 알고리즘 문제를 푼 듯한..ㅎㅎ