🤪 자기소개 페이지 만들기 - 4

처음 javascript를 공부를 시작하고 검색을 하면서 많이 봤던 지뢰찾기를 구현해 보았다. 그 당시에는 너무 어려워 보여서 도전해볼 엄두가 안났었는데 그 때 포기했던 문제를 풀고나니 너무 행복했다.

게임 구현을 위해 사용한 함수 목록

function setLevel() {}  // 난이도 설정
function GameRestart() {}  // 재시작
function resetBoard() {}  // 보드 클리어
function gameOver(result) {}  // 게임 종료
function gameResult(mineCount) {} // 게임 결과
function openBlock() {}  // 블록 클릭 이벤트
function viewBlock(row, column) {}  // 클릭 블럭 지뢰 갯수 표시
function checkMine(chkRow, chekColumn) {}  // 주변 8방 지뢰 체크
function randomNumber() {}  // 지뢰 심기
function createBoard() {}  // 난이도에 맞게 블럭 렌더링

어려웠던 부분을 정리 해보겠다....😅

랜덤한 위치에 지뢰 심기

  function randomNumber() {
    for (let i = 0; i < setRow; i++) {
      // 2차원 배열 만들어주기.
      randomArr.push([]);
      for (let j = 0; j < setColumn; j++) {
        randomArr[i].push(0);
      }
    }
    for (let i = 0; i < mineCount; i++) {
      let randomRow = Math.floor(Math.random() * setRow);
      let randomcolumn = Math.floor(Math.random() * setColumn);
      if (randomArr[randomRow][randomcolumn] === "m") {
        i--;
      } else {
        randomArr[randomRow][randomcolumn] = "m";
        checkMine(randomRow, randomcolumn, randomArr);
      }
    }
  }

바둑판식 배열이라 9X9(초급)배열을 만들어서 랜덤한 칸에 지뢰를 심는 방식을 선택했다.

• 빈 배열 생성 후, 빈 값(0)을 입력해준다.
• 랜덤한 숫자를 0~9(난이도에 따라 다름) 행과 열을 따로 구분하여 생성
• ["random Raw"]["randome Column"] 로 접근하여 지뢰를 심어준다.
• 임의 칸에 이미 지뢰가 있다면 해당 임의 값은 폐기하고 다시 뽑는다.
• 지뢰를 심을 때 checkMine()함수를 이용해 주변 8칸에 1씩 더해준다.(지뢰가 아닌칸은 주변에 지뢰가 심어질 때마다 숫자가 1씩 올라간다.)

주변 8칸 검사

  function checkMine(chkRow, chekColumn) {
    for (let i = chkRow - 1; i < chkRow + 2; i++) {
      for (let j = chekColumn - 1; j < chekColumn + 2; j++) {
        if (
          i < 0 ||
          j < 0 ||
          i >= setRow ||
          j >= setColumn ||
          (i === chkRow && j === chekColumn)
        ) {
          continue;
        }
        randomArr[i][j] += randomArr[i][j] !== "m" ? 1 : "";
      }
    }
  }

처음엔 8칸이라 한칸씩 직접 검색하는 방법을 하려고 했으나, 찾아보기도 하고 몇시간 고민해서 row/column 값을 받아 for문을 이용해서 해결했다.

• (1,1) 주변 8칸 (0,0) ~ (2,2) 을 검색 하려면
  행을 0~2 까지 검색, 열을 0~2까지 검색한다.
  chkRow - 1 < i <= chkRow + 2
chkColumn - 1 < j <= chkColumn + 2
• 검사하는 칸이 M(지뢰)가 아니면 지뢰를 추가한다
  randomArr[i][j] += randomArr[i][j] !== "m" ? 1 : "";

예외 설정

• (0,0) ~ (8,8)의 범위를 넘어선 부분은 검사에서 제외 한다.
  i < 0 || j < 0 || i >= setRow || j >= setColumn ||
• 검사 주체가 되는 칸도 제외 한다.
  (i === chkRow && j === chekColumn)

주변 지뢰 개수가 0개인 칸 클릭 시 주변 칸 연쇄 오픈

클릭 시 해당 칸을 오픈 하며 주변 지뢰 개수를 보여준다. 우클릭 시 지뢰를 제거하고 남은 지뢰 개수를 줄여준다.

클릭한 칸의 주변 지뢰 개수가 0일 경우 주변 8칸을 연쇄적으로 오픈 한다.

if (isMineCheck !== "true") {
      if (aroundMine !== 0) {
        if (isClicked === "false") {
          if (aroundMine !== "m") { document.getElementById(`${row}-${column}`).innerHTML =
              randomArr[row][column];
            document
              .getElementById(`${row}-${column}`)
              .setAttribute("isclicked", true);
          }
        }
        return;
      } else {
        // 주변 지뢰 0일때
        document
          .getElementById(`${row}-${column}`)
          .setAttribute("isclicked", true);
        document
          .getElementById(`${row}-${column}`)
          .classList.add("zeroclicked");
        for (let i = row - 1; i < row + 2; i++) {
          for (let j = column - 1; j < column + 2; j++) {
            if (
              i < 0 ||
              j < 0 ||
              i >= setRow ||
              j >= setColumn ||
              (i === row && j === column) ||
              isClicked === "true"
            ) {
              continue;
            }
            viewBlock(i, j);
          }
        }
      }
    }

• 칸을 클릭하면 우클릭 표시가 되어있는지 검사
  (우클릭은 지뢰 제거 표시 이므로 검사에서 제외)
  if (isMineCheck !== "true")
• 주변에 지뢰가 있고,
  if (aroundMine !== 0)
• 이미 오픈되었던 칸이 아니고,
  if (isClicked === "false")
• 해당 칸이 지뢰가 아니면 주변 지뢰 개수를 표시해 준다.
  if (aroundMine !== "m")
• 주변에 지뢰가 없으면 주변 8칸을 검사하고 그 칸의 주변지뢰가 없으면
  또 주변 8칸을 검사한다. (재귀를 이용해 해결)

      if (aroundMine !== 0){
        ...
      } else {
        for (let i = row - 1; i < row + 2; i++) {
          for (let j = column - 1; j < column + 2; j++) {
            if (
              i < 0 ||
              j < 0 ||
              i >= setRow ||
              j >= setColumn ||
              (i === row && j === column) ||
              isClicked === "true"
            ) {
              continue;
            }
            viewBlock(i, j);
          }
        }
}

코드 및 게임체험은 아래 링크를 참조해 주세요.

지뢰찾기 게임 하기
코드보기 (github)