[테트리스] 8. 키보드 버튼 구현

2018. 8. 1.

---

# html

<table class="arrow">
<tr>
    <td></td>
    <td></td>
    <td>
         <i class="fas fa-arrow-up"></i>
    </td>
    <td></td>
</tr>
<tr>
    <td>
         <i class="fas fa-arrow-circle-down"></i>
    <td>
    <td>
         <i class="fas fa-arrow-left"></i>
    </td>
    <td>
         <i class="fas fa-arrow-down"></i>
    </td>
    <td>
         <i class="fas fa-arrow-right"></i>
    </td>
    </tr>
</table>

# css

// 기본 화살표 배경-흰, 화살표-검
.arrow {
    color: black;
    background-color: white;
}
// 클릭 시 화살표 배경-검, 화살표-흰
.click {
    color: white;
    background-color: black;
}

# js

// 키보드 keyCode 상수
const LEFT = 37;
const UP = 38;
const RIGHT = 39;
const DOWN = 40;
const SPACEBAR = 32;

// 키보드 element 가저온 변수
var arrow_up = $(".fa-arrow-up");
var arrow_down = $(".fa-arrow-down");
var arrow_left = $(".fa-arrow-left");
var arrow_right = $(".fa-arrow-right");
var spacebar = $(".fa-arrow-circle-down");

// 키 눌렀을 때 호출할 함수들
var leftKeyDown = function() {
    //class 이름에 click을 추가한다.
    // ex. class 이름 : left -> left click
    arrow_left.addClass("click"); 
    nowBlock.drawLeftOrRight(nowBlock.x - 1, nowBlock.y);
};
var upKeyDown = function() {
    //up
    arrow_up.addClass("click");
     //rotation
    nowBlock.rotation();
    nowBlock.drawBlock(nowBlock.x, nowBlock.y);
};
var rightKeyDown = function() {
    //right
    arrow_right.addClass("click");
    nowBlock.drawLeftOrRight(nowBlock.x + 1, nowBlock.y);
};
var downKeyDown = function() {
    //down
    arrow_down.addClass("click");
    nowBlock.drawDown(nowBlock.x, nowBlock.y + 1);
};
var spacebarKeyDown = function() {
    spacebar.addClass("click");
    drawBelow(nowBlock);
};

// 키에서 손 땠을 때 호출할 함수
 var leftKeyUp = function() {
    // 클래스 이름에서 click을 제거한다.
    // ex. 클래스 이름 : left click -> left
    arrow_left.removeClass("click"); 
};
var upKeyUp = function() {
    arrow_up.removeClass("click");
};
var rightKeyUp = function() {
    arrow_right.removeClass("click");
};
var downKeyUp = function() {
    arrow_down.removeClass("click");
};
var spacebarKeyUp = function() {
    spacebar.removeClass("click");
};

// 키보드 관련 이벤트 등록
$(document).keydown(function(e) {
    switch (e.keyCode) {
        case LEFT:
            leftKeyDown();
            break;
        case UP:
            upKeyDown();
            break;
        case RIGHT:
            rightKeyDown();
            break;
        case DOWN:
            downKeyDown();
            break;
        case SPACEBAR:
            spacebarKeyDown();
            break;
        default:
            break;
    }
});

$(document).keyup(function(e) {
    switch (e.keyCode) {
        case LEFT:
            leftKeyUp();
            break;
        case UP:
            upKeyUp();
            break;
        case RIGHT:
            rightKeyUp();
            break;
        case DOWN:
            downKeyUp();
            break;
        case SPACEBAR:
            spacebarKeyUp();
            break;
        default:
            break;
    }
});

// 마우스 관련 이벤트 등록
$(arrow_up).mouseup(upKeyUp);
$(arrow_down).mouseup(downKeyUp);
$(arrow_right).mouseup(rightKeyUp);
$(arrow_left).mouseup(leftKeyUp);
$(spacebar).mouseup(spacebarKeyUp);

$(arrow_up).mousedown(upKeyDown);
$(arrow_down).mousedown(downKeyDown);
$(arrow_right).mousedown(rightKeyDown);
$(arrow_left).mousedown(leftKeyDown);
$(spacebar).mousedown(spacebarKeyDown);

http://withhamit.co.kr/tetris/

가장 왼쪽에 있는 혼자만 다르게 생긴 화살표가 스페이스바 버튼이다. (가장 아래로 내려감)
font awesome 프로 유저가 아니라서 적절한 아이콘을 못 찾았다.

친구들이 폰으로 할 수가 없다고 해서 화살표 버튼 먼저 개발했다.
그런데 폰으로 하니까 너무 불편하다.. ㅠ keydown이랑 mousedown 인식도 달라서
키보드로는 위 그림처럼 누르고 있을 때 명백하게 배경색 검정색으로 보이는데 버튼은 인식이 좀 안됨..
버튼 크기 키웠는데도 바뀐게 별로 없어서 UX에 변화를 줘야할 듯 하다.
폰 4등분해서 해당 위치 클릭하면 상하좌우 버튼 클릭과 같은 이벤트 호출하게 생각 중. 

---

fontawesome : https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css

깃허브
make key button
arrow font size up