🤪 自己紹介ページの作成-4

ゲームを実装するための関数のリスト

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);
      }
    }
  }

碁盤式配列なので、9 X 9(初級)配列を選び、ランダムなマスに地雷を植え込む方式です。

周辺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マスだったので、自分で1マスずつ検索しようと思ったのですが、また探したり探したりして、何時間も考えてrow/column値を得て、for文でこの問題を解決しました。

例外の設定

周辺の地雷の個数の0の格子をクリックして周辺の格子の連鎖を開けることができます

クリックするとこのグリッドが開き、周囲の地雷の数が表示されます。右クリックで地雷を除去し、残りの地雷の数を減らします。

1コマ周辺の地雷個数が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 (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);
          }
        }
}

コードとゲーム体験は以下のリンクを参照してください。