HTML, JAVASCRIPT - 테트리스 만들기 - 3

https://myhappyman.tistory.com/93

HTML, JAVASCRIPT - 테트리스 만들기 - 2

2장 이후 3장까지 왔습니다. 이번에는 키 이벤트를 처리해보겠습니다.

 

3. 키 이벤트에 따라 테트리스 제어하기

이번에는 키 이벤트를 받아서 테트리스를 제어해보겠습니다.

 

2장에서 만들었던 action 메소드에 keypress 이벤트를 추가하겠습니다.

keypress 처리

function action(){
    //keyEvent
    document.addEventListener("keypress", function(){
        myFunction(event.keyCode);
    });
}

특정 키값을 받을때마다 파라미터 값으로 myFunction에 파라미터로 넘겨주고 그에 따라 동작을 정의할 것입니다.

 

myFunction - 입력값에 따른 출력 메시지

function myFunction(input){
    switch(input){
        case 53://회전
            console.log("5번이 입력되었습니다.");
            break;
        case 49://블럭왼쪽이동                        
            console.log("1번이 입력되었습니다.");
            break;
        case 51://블럭오른쪽이동            
            console.log("3번이 입력되었습니다.");
            break;
        case 50://블럭아래로이동            
            console.log("2번이 입력되었습니다.");
            break;
        case 32://스페이스
            console.log("스페이스바가 입력되었습니다!");
            break;
    }
    //테트리스 블럭 그리기
    drawTetris(GX, TYPE, TURN);
}

 

action 함수에서 키이벤트를 추가했기 때문에 키보드 입력값이 들어오면 myFunction이 실행될텐데 이제 파라미터 input값에 따라 switch문에서 동작을 시켜줄겁니다.

저는 우측 키보드로 게임을 즐긴다고 생각하고 키 세팅을 했는데, 이 부분은 원하시는 키값으로 하시면 됩니다.

키 세팅

 

키 입력을 정상적으로 받아진다.

실행 후 키보드를 입력해보면 블럭은 움직이지 않지만 키보드 입력에 따라 콘솔로그값이 찍히는 모습을 볼 수 있습니다.

 

이제 입력값에 따라 실제로 이동이 되거나 블록을 회전시키거나 맨 아래로 이동시켜야겠죠?

바로 동작을 처리해보겠습니다.

회전, 스페이스바, 이동 시키기

function myFunction(ChangeValue){
    switch(ChangeValue){
        case 53://회전
            TURN++;
            TURN = TURN % 4;
            break;
        case 49://블럭왼쪽이동
            GY--;
            break;
        case 51://블럭오른쪽이동
            GY++;
            break;
        case 50://블럭아래로이동            
            GX++;
            break;
        case 32://스페이스
            GX=21;
            break;
    }
    //테트리스 블럭 그리기
    drawTetris(GX, TYPE, TURN);
}

53은 윗 방향을 누르는 키값으로 회전이 되어야 합니다. 즉, TURN의 값을 증가시키고 그리면 됩니다.

하지만 %연산자가 있는것을 볼 수 있는데, 존재하는 이유는 회전은 4가지의 모습이 있기 때문입니다.

 

맨 처음 시작할때 추가하였던 tetris_data.js에서 TETRIS 변수 중 ㄹ모양의 블럭을 예시로 볼 경우

ㄹ 모양 4가지 회전

이렇게 4가지 형태를 볼 수 있습니다.

이러한 이유때문에 모든 블럭을 4가지 형태로 넣었고, ㅁ모양의 블럭도 4가지인 이유입니다.

 

실행해서 해보면 일정시간마다 블럭이 내려가게 했을 때처럼 이전 블럭의 잔상이 남는 것을 볼 수 있는데, 눈치채신분들은 여기서 지우는 함수를 넣으면 된다는것을 알 수 있을겁니다.

키 이벤트에 따라 변경되지만 잔상이 남는다.

 

erase함수를 역시 처음에 추가해보겠습니다.

 

그럴싸한 myFunction - erase함수까지 추가

function myFunction(input){
    //그리기 전에 지우기 추가!!!
    erase(GX, TYPE, TURN);
    switch(input){
        case 53://회전
            TURN++;
            TURN = TURN % 4;
            break;
        case 49://블럭왼쪽이동
            GY--;
            break;
        case 51://블럭오른쪽이동
            GY++;
            break;
        case 50://블럭아래로이동            
            GX++;
            break;
        case 32://스페이스
            GX=21;
            break;
    }
    //테트리스 블럭 그리기
    drawTetris(GX, TYPE, TURN);
}

 

아직 완벽하진 않지만 그럴싸하게 키 이벤트도 받고 동작이 되는 모습을 볼 수 있습니다.

 

 

다음 포스팅에서는 마지막행에 닿으면 현재 블럭의 이벤트가 멈추고 다음블럭으로 넘어갈 수 있게 추가해보겠습니다.