클릭이벤트 파악
네모로직 게임 보드에서 일어날 수 있는 대표적인 이벤트는 크게 두 가지이다.
클릭 - 셀이 검은색으로 칠해짐/이미 페인트 된 셀은 클릭시 지워짐
우클릭 - 셀이 엑스 표시가 됨
단순 명쾌하다.
클릭 이벤트에 따라 셀에 상태 값을 업데이트 해야하며, 위의 이미지와 같이 클릭 시에 cells[n][n] = false|true|'block'으로 넣기로 했다. (X 아이콘은 나중에 삽입하기로 했다.)
1. 셀에 이벤트 리스너 추가
for (let i = 0; i < ROWS; i++) {
...
for (let j = 0; j < COLS; j++) {
...
const cell = document.createElement("div");
...
cell.addEventListener("click", checkCellArr);
cell.addEventListener("contextmenu", checkBlockArr);
}
}이전에 배열을 만들고 테이블을 페인트 하는 반복문에 클릭/우클릭 이벤트 리스너를 추가하였다.
2. 셀 체크 함수
//클릭 시 셀배열 체크
function checkCellArr(e) {
//1) 클릭한 셀의 위치 값 찾기
const thisRow = parseInt(e.target.getAttribute("data-row"));
const thisCol = parseInt(e.target.getAttribute("data-col"));
//2) 클릭한 셀을 토글로 변경
cells[thisRow][thisCol] = !cells[thisRow][thisCol];
//3) 클릭한 배열의 요소 값을 바탕으로 페인팅하는 함수 실행
paintCell(thisRow, thisCol, e);
}클릭한 셀의 data태그 값으로 cells 배열 내 위치를 찾고 false 였던 상태값을 true로 변경한다. 만일 해당 값이 true라면 false로 바뀌게된다.
3. 셀 블락 체크 함수
//우클릭 시 셀배열 블락 체크
function checkBlockArr(e) {
e.preventDefault();
//1) 우클릭한 셀의 위치 값 찾기
const thisRow = parseInt(e.target.getAttribute("data-row"));
const thisCol = parseInt(e.target.getAttribute("data-col"));
//2) 우클릭한 셀을 블락으로 변경
cells[thisRow][thisCol] !== "block"
? (cells[thisRow][thisCol] = "block")
: (cells[thisRow][thisCol] = false);
//3) 클릭한 배열의 요소 값을 바탕으로 페인팅하는 함수 실행
paintCell(thisRow, thisCol, e);
}우클릭 이벤트 또한 셀의 data태그 값으로 cells 배열 내 위치를 찾고 block로 변경한다. 이미 상태 값이 block인 셀을 클릭할 경우엔 false상태로 돌아간다.
4. 셀의 상태 값에 따라 페인팅 하는 함수
//배열을 바탕으로 셀 요소 채우기
function paintCell(row, col, e) {
//1) row, col인덱스를 인자로 받아 셀의 상태 체크
const cellStatus = cells[row][col];
//2) 해당 셀이 false인 경우 클래스 지우기, true||'block'인 경우 그에 맞는 클래스 추가
if (cellStatus === false) {
e.target.removeAttribute("class");
} else if (cellStatus === true) {
e.target.setAttribute("class", "true");
} else if (cellStatus === "block") {
e.target.setAttribute("class", "block");
}
}배열 내 요소 값을 바꾼 이후 셀을 페인팅하는 paintCell() 함수를 모듈화하여 구현하였다. 나중에 페인팅 하는 조건이 추가되거나 수정할 경우 편리하게 구현할 수 있을 것이다. 또한 row, col 인덱스 값을 인자로 받아 해당 셀의 상태를 체크하여 그에 따라 조건을 주는 것이기 때문에 더 안전하다.
확인
클릭, 우클릭 이벤트를 테스트 해보고 콘솔에 찍은 내용과 화면에 보이는 내용이 일치한다면 성공~!
=> 이번 프로젝트는 깨끗한 코드, 재사용 가능한 코드를 구현하는 것을 목표로 하다보니 중간중간 함수를 계속 모듈화 할 궁리를 하게되고 장단점을 고민하고 있다. 그러다 보니 구현 속도가 더디거나 작성했던 코드를 수정하는 경우가 다반사이지만 이렇게 간단한 기능부터 연습을 해보면 나중엔 더 큰 프로젝트도 미리 구조화하고 시행착오를 줄일 수 있지 않을까 생각한다.
