jQuery로 코나미 커맨드 이스터에그 구현하기

이 포스트에서는 제이쿼리를 써서 코나미 커맨드(⬆⬆⬇⬇⬅➡⬅➡🅱🅰 상상하하좌우좌우BA)를 입력하면 이스터 에그가 발동되게 하는 코드를 설명합니다.

우선 아래와 같이 코딩해 봅시다.

var kkeys = [], konami = "38,38,40,40,37,39,37,39,66,65";
$(document).keydown(function(e) {
    kkeys.push( e.keyCode );
    if ( kkeys.toString().indexOf( konami ) >= 0 ){
        kkeys = [];
        alert('Hello, world!');
    }
});

1번 줄에서 키 입력을 저장할 배열 변수를 미리 선언해 놓고 코나미 코드 배열을 지정할 문자열 변수를 선언합니다. 콤마(,)로 구분된 10개의 숫자들은 각각 상-상-하-하-좌-우-좌-우-B-A에 대응하는 키 코드입니다.

2번 줄에서는 키가 눌리면 실행될 이벤트를 함수 형태로 선언합니다. 그리고 3번 줄에서 kkeys 배열에 키 입력을 저장합니다. 그리고 4번 줄에서 ‘상-상-하-하-좌-우-좌-우-B-A’ 조합이 완성되었는지를 검사, 완성되었다면 이벤트가 실행됩니다. 먼저 5번 줄에서 키 입력을 받는 배열을 초기화한 후 6번 줄의 코드가 실행됩니다. 위 예제에서는 ‘Hello, world!’라는 메시지가 경고창으로 출력되는 예제입니다.

만약에 코나미 커맨드를 한 번만 받고 싶다면

var kkeys = [], konami = "38,38,40,40,37,39,37,39,66,65";
$(document).keydown(function(e) {
    kkeys.push( e.keyCode );
    if ( kkeys.toString().indexOf( konami ) >= 0 ){
        $(document).off('keydown',arguments.callee);
        alert('Hello, world!');
    }
});

위와 같이 unbind off 메소드를 써서 실행 즉시 이벤트 바인딩을 해제하는 방법을 쓸 수도 있습니다.

[2019. 01. 19. 수정]
unbind 메소드는 지원 중단될(deprecated) 메소드이므로, off 메소드로 대체합니다.

※ 이 블로그에도 코나미 커맨드 이스터에그가 있습니다. 과연 무엇일까요?

“jQuery로 코나미 커맨드 이스터에그 구현하기”의 2개의 생각

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다