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

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]]
    ]
}

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

이상 위 아래 방향키였다

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

일단 셋팅을 먼저 하겠다

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

(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 밖으로 안나가는 거에 조금 뿌듯함 느끼는 중ㅋㅋ

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

잠시 사담을하자면...

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

이상 여기까지~

기초다지기가 가장 어렵다

왜냐허면... 기초를 다져야 그 위에 뭐든 쌓을 수 있기 때문이다...

허허허 그래서 내가 이렇게 어렵나 보다 이해하려고 세 번째 같은 영상을 보고 있다

그러니까... 아니 그니까...

선생님께서 설명을 잘해주시는데 이것들이 내 머리 속에 들어오질 않는다 ㅜㅠ

테트리스 블럭을 x,y좌표로 나타내고 또 자주 사용하게 될 변수 선언하고 뭐 이 정도만 했는데...

근데 막상 이해하려고 하니 어렵다... 선생님이 말씀하시는거 하나하나 적어놓고 봐도 아리까리 한걸...?

배움이 부족하기 때문이다 더 배우자 정진하자.

분석을 해 보겠습니다.

첫 번째, 자주 사용하게 될 변수를 선언하겠습니다.

// variables
let score = 0;
let duration = 500;
let downInterval;
let tempMovingItem;

점수, 블럭이 떨어지는 시간 등등이다

여기서 tempMovingItem은 movingItem을 하기 전에, 블럭을 잠시 담아두는 용도이다.

밑에 movingItem이 나올건데, movingItem은 실질적으로 다음 블럭의 타입과 좌표의 정보를 가지고 있는 변수이다.

두 번째, 블럭을 하나 만들자

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

나중에 따로 뺄거긴 하지만, 일단 설명을 위해 하나 만드셨다고 한다! (ㅠㅠ 감사합니다)

세 번째, 위에서 본 movingItem

const movingItem = {
    type: "tree",
    direction: 0,
    top: 0,
    left: 0,
}

실질적으로 다음 블록의 타입과 좌표의 정보를 가지고 있는 변수이다 type : 다들 알거고,, direction : 좌우로 돌리는 키 top : 어디까지 내려가는지, left : 좌우 값

네 번째, 블럭을 잘... 아주 잘 옮기자?

function renderBlocks(){
    const { type, direction, top, left } = tempMovingItem;
    BLOCKS[type][direction].forEach(block=>{
        const x = block[0];
        const y = block[1];
        const target = playground.childNodes[y].childNodes[0].childNodes[x];
        target.classList.add(type)
    })
}

내가 원하는 곳에 블럭이 이동할 수 있도록, x축, y축 좌표 값을 분리하고 childNodes로 ul,li 값 얻는다

... 그렇다고 한다

추가, ...movingItem

//functions
function init(){
    tempMovingItem = {...movingItem};
    for (let i = 0; i < GAME_ROWS; i++) {
        prependNewLine()
    }
    renderBlocks()
}

여기서 중요한 게 펼침연산자인데, 그 movingItem의 값을 변경하지 않고 복사해서 가져와서 이리저리 이동 값에 따라 변경시킨다고 한다

... 그렇다고 한다

더 많이 배워오겠다

그리드로 짠 걸 함수에 넣어준다구요?

와 그리드 짜는 것도 겨우겨우 이해하면서 했는데 이걸 함수에 다시 넣는 과정에서 3번이나 먹통이 되었다

첫번째와 두번째는 내가 적은 코드 뭐가 틀렸는지 비교하면서 꼭 해야지! 틀린 부분 적어놨다가 다음에 안틀려야지! 라고 생각했었는데,

세 번이나 그리드가 없어지는 마법을 부리니 테트리스를 만들 실력이 안되나 보다 생각했다

그리고는 잠시 접었다가 다시 시도...!

짠 세 번 빠꾸 먹고 네번째에 성공했습니다~

하 그래... 따라만 하는 과정인데 내가 잘못 받아썼지 내 실력과는 무관하지...휴!

이제 분석을 시작해 볼꽈...

// DOM
const playground = document.querySelector(".playground > ul");

// Setting
const GAME_ROWS = 20;
const GAME_COLS = 10;


init()

//functions
function init(){
    for (let i = 0; i < GAME_ROWS; i++) {
        prependNewLine()
    }
}



function prependNewLine() {
    const li = document.createElement("li");
    const ul = document.createElement("ul");
    for (let j = 0; j < GAME_COLS; j++) {
        const matrix = document.createElement("li");
        ul.prepend(matrix);
    }
    li.prepend(ul)
    playground.prepend(li)
}

먼저, DOM 구조를 잡고, 20줄과 10칸을 알아보기 쉽게 선언을 한 다음 처음에 렌더링이 되면 init()이 호출되도록 한다!

하하하하 여기까지 오기도 힘들었지만 그럼에도 앞으로 나아가봐야지...

다음은 테트리스 모양을 잡아갈 듯 하다

초보 코더인 저에게 충고 혹은 틀린 부분을 가르쳐 주시는 것 모두 환영입니다!

그리드를 ul,li로 짠다구요?

벌써부터 눈물이 앞을 가린다 ㅠㅠㅠㅠ

얼마전에 테이블을 자바스크립트 for문으로 짰는데 이젠 그리드를 목록(ul,li)로 짜라니 ㅠㅠㅠㅠㅠㅠ (사실 조금은 신기해서 눈물 흘리면서 웃는 중)

const playground = document.querySelector(".playground > ul");

console.log(playground);

for (let i = 0; i < 20; i++){
    const li = document.createElement("li"); 
    const ul  = document.createElement("ul"); 
    for (let j = 0; j < 10; j++){
        const matrix =  document.createElement("li"); 
        ul.prepend(matrix)
    }
    li.prepend(ul)
    playground.prepend(li)
}

prepend?

부모의 자식 요소로 추가되지만 앞으로 추가가 된다고 한다

테트리스 만들면서 먼저 접해보는군...

해석해봅시다

댓글 환영 (틀렸으면 꼭 말해주세요!)

자... 일단 ul 하나 만들어 놓았고 코드를 하나씩 보자...!

1. playground 선언 (ul)
2. li 선언 (li)
3. ul 선언 (ul)
4. matrix 선언 (li)
5. matrix 앞에 ul 추가 : ul > matrix 10개
6. ul 앞에 li 추가 : li 20개 > ul > matrix 10개
7. li 앞에 playground : _playground > li 20개 > ul > matrix 10개 _

그래서 총 200개의 작은 네모가 만들어졌다

그림 크기는 어떻게 줄이죠...?

정말 미련없이 돌아서서 그런지 몰라도 준비하는 과정이 일사천리였다. (물론, 가족을 설득하는 일은 아직도 진행 중이다)

학원을 등록하고, 참고 서적을 찾고, 많은 것을 준비하다보니

내가 노트북이 없더라

그래서 샀습니다. 에어M1 (영롱)

이것 저것 서핑해보니 m1이 넘사벽이라고 하고 또 모두들 입이 마르도록 극찬하고 있으니 제가 안사고 배기겠습니까 허허허(먼산)

물론 깡통모델이긴 한데, 스펙을 높이고자 하면 한 없이 높아지고,

일단 나의 재정상황에선 이만한 스펙을 뽑을 수 없었다 정말...

ㅎㅎ..ㅎ.ㅎㅎㅎㅎㅎㅎㅎㅎㅎ

학원에 있다가도 얘 생각하면 웃음 남ㅋㅋㅋㅋㅋㅋ 너무 좋다 왜 이제 샀지?

행복하다 행복허다 행복햐댜~ 캬~ 취한다~

아니 이럴게 아니지, 애칭을 붙여줘야겠다 애칭

정말정말 영롱하고 소중하니까... 뇽뇽이?(아무말)

뇽뇽아 앞으로 잘 부탁해!!!

내가 너 방전 되는 일 없도록 잘 관리할게 (찡긋)

뭘 어떻게 해야할까...

그래... 뭘 한 번 만들어보자

무슨 글을 읽든 프로젝트 한 번 하면 실력이 는다고 한다!

그리고 그걸 만드는 과정에서 몰랐던 걸 벨로그에 정리해보자

그리곤 나중엔 혼자서 구현할 수 있도록 해보자!

그래서 시작합니다.

https://youtu.be/1lNy2mhvLFk

youtube - code Scalper 님의 영상을 따라해보며

모르는 부분을 벨로그에 정리해보겠습니다...!