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

자, 지난 시간의 어려움은 잠시 뒤로 하고, 방향키를 넣어보자

일단 셋팅을 먼저 하겠다

블럭을 중간으로 옮긴건 일단 생략!

(left + 3)

여기서 검사를 누르고, 키보드를 좌우위아래로 눌러보자

그러면 keycode라는게 나오는 데, 그것이 방향 키가 가진 설정값이다

일단 우리가 필요한 것은 좌우방향키이기 때문에 그것을 잠시 노트에 적어놓자

그 다음...

방향키를 눌렀을 때, 이벤트가 발생하도록 해보자!

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

자 일단 addEventListener을 하고 "keydown" 이벤트에 함수를 넣어주자!

왼쪽 방향으로 눌렀을 때 키코드는 39로, 블럭을 왼쪽으로 1칸 옮기고
오른쪽 방향으로 눌렀을 때 키코드는 37로, 블럭을 왼쪽으로 -1칸 옮기자!

이 다음, moveBlock함수를 만들어 주자.

어떻게 블럭을 움직일꽈?

function moveBlock(moveType, amount){
    tempMovingItem[moveType] += amount;
    renderBlocks()

moveBlock이란 함수를 만들었다
여기서 moveType이란 tempMovingItem의 값들이고,
그걸 amount에 쌓는 것이다.

이걸 renderBlocks에 실행을 시키면...!

ㅋㅋㅋㅋㅋㅋ 색깔이 자꾸자꾸 번짐
위 아래는 아직 설정을 안해서 안움직이지만, 왼쪽 오른쪽으로 계속 움직인다

그리고 또, 트리모양 블럭이 li 밖으로 안나가는 거에 조금 뿌듯함 느끼는 중ㅋㅋ

하하 다음에는 어떻게 안버지는지 알아와야지!

잠시 사담을하자면...

모르는 부분을 깊게 파는 것 보단, 다양하게 자주 접하는 거 좋을 것 같아 일계속 테트리스 만들기를 진행하겠습니다
오랜 시간 공무원 준비를 해본 결과, 저는 저 방법이 맞는 사람이고,
또 저 방법이 파지에 좋기 때문입니다

이상 여기까지~