(클론코딩) 테트리스 게임(1) 밑바탕 제작

js 부분 코드만 복습을 위해 일부 따왔다.

//DOM

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

//Setting

const GAME_ROWS = 20;

const GAME_COLS = 10;

//variables

let score = 0;

let duration = 500;

let downInterval;

let tempMovingItem;

const BLOCKS = {

  tree: [

      [[0,0],[0,1],[1,0],[1,1]],

      [],

      [],

      [],

  ]

}

const movingItem = {

  type:"tree",

  direction: 0,

  top: 0,

  left: 0,

};

init()

//functions

function init() {

  tempMovingItem = {...movingItem}; // movingItem의 실제 값들만 가져온다.

  for(let i=0; i<GAME_ROWS; i++) {

    prependNewLine();  

  }

  renderBlocks()

}

function prependNewLine(){ //20번 반복됨.

  const li = document.createElement("li"); // list 의 약자, ul의 요소.

  const ul = document.createElement("ul"); //unordered list의 약자. li를 하나라도 포함해야됨.

  for(let j=0; j<10; j++) {

    const matrix = document.createElement("li");

    ul.prepend(matrix); // li 10개 만든거 ul에 다 붙여

  }

  li.prepend(ul); //li 10개 만든거를 붙인, ul 하나를 li에 붙여

  playground.prepend(li); // li 10개 딸린 ul로 접착된 li 한개 붙여.(playground가 아직 배열 요소가 4개라서... 20번 반복해도 4개 나옴.)

}

function renderBlocks() {

  const { type, direction, top, left } = tempMovingItem; // 타입 설정

  BLOCKS[type][direction].forEach(block => {  // block은 forEach로 훑은 요소 하나 하나를 끄집어내서 그 요소에 함수짓해서, 저장하는 매개변수.

   // BLOCKS의 [][] 배열의 몇번째 값은 x번째 배열임. 0번째의 값 [0,0], 1번째의 값 [0, 1].....이런 식으로 구성되있음 이걸 foreach가 요소 하나씩 건드는것.

    const x = block[0]; // x는 ul안에 들어 있는 li의 값 -> 20개의 li중 한개의 li 안의 10개의 li중에서 10개중 몇 번째의 li인가?

    const y = block[1]; // y는 li의 row값 -> 20개의 li중 몇번째 li인가? 

    console.log(playground);

  })

 

ul은 각 li와 li를, li와 playground를 이어주는 접착제일 뿐인듯.

---

<렌더링 결과>

 

ul이 배열요소 4개라서 4개밖에 생성되지 않았다. 각각 4(ul)-20(li)-(li 하나당 1개의 ul)-(ul하나 당 10개의 li)

---

<이론 보강 내용>

 

1 prepend() 메소드
.prepend() 메소드는 선택한 요소의 첫번째에 새로운 요소나 콘텐츠를 추가한다.

$(target).prepend(source)
source 객체를 target 객체의 첫번째에 추가한다.

아래와 같이 HTML 요소가 있을 때,

<ol id="list">
    <li>첫 번째 아이템</li>
    <li>두 번째 아이템</li>
</ol>
.append() 메소드를 이용하면, 첫번째 <li>에 앞에 새로운 HTML 요소를 추가할 수 있다.

$("#list").prepend("<li>새로 추가된  아이템</li>");

 

 

---

2. forEach 함수와 3가지 종류의 쓰임

 

forEach 메서드도 배열을 순회하기 위해 사용되지만, 기본적인 for 반복문과는 다른 방식으로 함수를 사용합니다.

forEach 메서드는 다음 매개변수(parameter)와 함께 배열의 각 요소에 적용하게 될 콜백 함수(callback function)를 전달합니다.

Current Value (명명된 매개변수) - 처리할 현재 요소
Index (선택적 매개변수) - 처리할 현재 요소의 인덱스
Array (선택적 매개변수) - forEach 메서드를 호출한 배열
주어진 매개변수를 하나씩 설명하겠습니다.

우선 forEach 메서드를 사용해 배열을 순회하려면 콜백 함수 또는 익명 함수가 필요합니다.

numbers.forEach(function() {
    // code
});
콜백 함수는 각 요소에 대해 실행되며, 배열의 요소를 나타내는 매개변수를 반드시 하나 이상 사용해야 합니다.

numbers.forEach(function(number) {
    console.log(number);
});

---

선택적 매개변수
인덱스(Index)
이어서 선택적 매개변수에 대해 알아봅시다.

첫 번째 선택적 매개변수는 각 요소의 순서를 나타내는 인덱스입니다.

즉 두 개의 매개변수를 활용하여 메서드를 사용하면 두 번째 매개변수를 통해 요소의 인덱스를 확인할 수 있습니다.

numbers.forEach((number, index) => {
    console.log('Index: ' + index + ' Value: ' + number);
});

 

---

배열 순회하면서 인덱스와 주어진 값을 출력한다

배열(Array)
배열 매개변수는 필요에 따라 다양하게 활용할 수 있는 선택적 매개변수로, 원본 배열 그 자체입니다. 단순히 호출하기만 하면 배열의 요소 수만큼 배열이 출력되는 것을 볼 수 있습니다.

numbers.forEach((number, index, array) => {
    console.log(array);
});

 

---

 

3. querySelector 참고

https://www.daleseo.com/js-document-query-selector/

jQuery 없이 자바스크립트로 HTML 요소 선택하기

 

왜 기초기초 하는지 알겠다... 백준 알고리즘 문제에서 배열 직접 쓴 경험 없었으면... 이해 못했을듯.