게임 보드 구조 파악
우선 네모로직의 게임 보드 구조를 살펴 보면 n*n의 체크/미체크 된 셀로 구성되어있는 테이블 형태의 보드이다.
이렇게 테이블 형태의 보드를 구성하기 위하여 2차원 배열을 활용하기로 했다.
2차원 배열 구성
2차원 배열은 위와 같이 테이블 형태의 셀의 요소에 접근하기 위해 배열의 인덱스를 활용하는 방식이다. 테이블 배열 안에 로우 개수를 기준으로 배열을 만들고 그 안에 칼럼 개수를 기준으로 인덱스를 부여하고 요소를 할당한다.
이런 형태로 cells 배열이 구성 되고 cells[rowIndex][colIndex]로 셀의 요소를 확인할 수 있을 것이다.
JS 코드 짜기
const gameBoard = document.getElementById("board");
//1) 보드 사이즈(칼럼, 로우 개수) 정하기
const ROWS = 10;
const COLS = 10;
//2) 셀들의 정보가 담길 빈 배열 선언
let cells = [];
//3) 2차원 배열 만들기
for (let i = 0; i < ROWS; i++) {
//3-1) 로우 배열 만들기
cells.push([]);
for (let j = 0; j < COLS; j++) {
//3-2) 로우 배열에 false(디폴트 값) 순차 할당
cells[i].push(false);
}
}
이렇게 false(디폴트 값)이 담긴 배열을 만들고 console.table(cells)로 확인하면 위와 같이 테이블 형태의 배열을 콘솔창에서도 확인할 수 있다.
const gameBoard = document.getElementById("board");
const ROWS = 10;
const COLS = 10;
let cells = [];
for (let i = 0; i < ROWS; i++) {
cells.push([]);
//1) 로우 elements생성
const row = document.createElement("div");
row.setAttribute("class", "row");
gameBoard.appendChild(row);
for (let j = 0; j < COLS; j++) {
cells[i].push(false);
//2) 셀 elements 생성
const cell = document.createElement("div");
//3) 셀 element에 row, col 인덱스 데이터 부여
cell.setAttribute("data-row", `${i}`);
cell.setAttribute("data-col", `${j}`);
row.appendChild(cell);
}
}이후 테이블을 만들기 위해 위처럼 elements요소들을 생성해주고 상속시키면 된다.
삽질 했던 내용
++ 덧붙임 (삽질 했던 내용)
2차원 배열의 형태로 구성하기 전, 모든 셀의 정보(위치값, 상태)를 객체로 배열에 담았었다.
이렇게 했을 때 위와 같이 한 배열에 row개수*col개수 의 객체가 한 배열 안에 담기게 되었고 후에 셀 클릭 이벤트를 구현할 때 filter함수를 사용하여 row, col 속성 값과 클릭한 요소의 데이터 값이 같은 객체를 뽑아 상태를 변경해야만 하는 번거로움이 있었다.
콘솔 테이블로 찍었을 때 위와 같은 형태로 데이터를 불러왔고 가독성 측면에서도 좋지 않아 2차원 배열로 수정하였다.
처음에 배열을 구현할 때 객체로 정보를 담고자 했던 이유는
1) 2차원 배열로 구성하고 인덱스 값으로만 셀의 정보를 확인하고 수정한다고하면 배열이 수정되는 경우 인덱스 값을 활용할 수 없어 꼬여버릴 것 같았다.
2) 만일 이후에 기능이 고도화 되면서 셀 객체에 key값을 추가하면서 셀의 상태를 변경할 경우도 있을 것 같았다.
=> 일단 우려했던 1)과 같이 배열을 직접 수정해서 인덱스가 꼬이는 경우는 없었다. 배열자체를 수정하는 메서드를 사용할 일도 없을 뿐더러 게임 보드 자체가 '테이블'형 구조기 때문에 배열을 수정해야 한다면 그건 잘못 짠 로직일 것이다.
2)의 고려사항도 직접 게임을 구현하다 보니 투머치로 걱정한 것 같다. 필수 셀의 상태로 들어가야하는 것은 'true', 'false'이고 우클릭 했을 때 'x'표기가 되는 'block'의 상태 값의 경우도 css class만 변경하거나 정오답 체크할 때 false로 변경하면 문제 없었다.
결론 => 2차원 배열이 순회하기 더 간편하다.
