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

기초다지기가 가장 어렵다

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

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

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

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

테트리스 블럭을 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의 값을 변경하지 않고 복사해서 가져와서 이리저리 이동 값에 따라 변경시킨다고 한다

... 그렇다고 한다

더 많이 배워오겠다