테트리스 강좌 : 링크텍스트

위 아래 방향 키를 눌렀을 때, 이벤트가 발생하도록 하자

document.addEventListener("keydown", e => {
    switch (e.keyCode) {
        case 39:
            moveBlock("left", 1);
            break;
        case 37:
            moveBlock("left", -1)
            break;
        case 40:
            moveBlock("top", 1)
            break;
        case 38:
            changeDirection();
            break
        default:
            break;
    }
    // console.log(e)
})

case 40: moveBlock("top", 1); 로 밑으로 눌렀을 때 밑으로 이동하도록 해주고,
case 38 : changeDirection(); 위로 눌렀을 때에는 changeDirection이라는 함수를 실행시켜 주자!

changeDirection 함수를 정의하자!

function changeDirection(){
    const direction = tempMovingItem.direction;
    direction === 3 ? tempMovingItem.direction = 0 : tempMovingItem.direction += 1;
    renderBlocks();
}

삼항연산자가 이토록 반가울 수가 없다.
진짜 기나 긴~~~ if를 이렇게 짧게 해준다니...!

시계방향 혹은 반 시계방향으로 회전을 할 텐데, 그 방향은 4 방향이 되고,
3번을 누르게 되면 다시 원상태로 되돌려서 다시 실행하도록 하여
무한반복을 할 수 있게 해준다!

아차차, 이전에 생략했던 tree는 다시 빈 칸을 다음과 같이 채웠다.

const BLOCKS = {
    tree: [
        [[2, 1], [0, 1], [1, 0], [1, 1]],
        [[1, 2], [0, 1], [1, 0], [1, 1]],
        [[1, 2], [0, 1], [2, 1], [1, 1]],
        [[2, 1], [1, 2], [1, 0], [1, 1]]
    ]
}

사실 배열 안의 배열은 순서가 중요한 게 아니라 어디에 색칠되느냐갸 중요해서
첫 번째 배열을 기준으로 최소한으로 위치만 바꿔주었다!

---

이상 위 아래 방향키였다