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

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

와 그리드 짜는 것도 겨우겨우 이해하면서 했는데
이걸 함수에 다시 넣는 과정에서 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()이 호출되도록 한다!

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

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

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