マインスイーパーの作り方 — JavaScriptでブラウザゲームを作ろう

ボードのデータ構造を準備しよう

まず、盤面の各セルが持つ情報を決めましょう。マインスイーパーでは、各セルに「地雷かどうか」「開いたかどうか」「旗を立てたか」「隣接する地雷の数」の4つの情報が必要です。2次元配列で盤面を管理します。

var NEIGHBORS = [
  [-1, -1], [-1, 0], [-1, 1],
  [0,  -1],          [0,  1],
  [1,  -1], [1,  0], [1,  1]
];

var board = [];
for (var r = 0; r < rows; r++) {
  board[r] = [];
  for (var c = 0; c < cols; c++) {
    board[r][c] = {
      mine: false,
      revealed: false,
      flagged: false,
      adjacentMines: 0
    };
  }
}

NEIGHBORSは8方向のオフセットを表す配列です。あるセルの周囲8マスを調べるときに使います。boardは2次元配列で、各セルをオブジェクトとして管理しています。最初は地雷を置かず、プレイヤーの最初のクリック後に配置するのがポイントです。

地雷の配置と隣接数の計算を作ろう

最初のクリックが安全になるしくみ

マインスイーパーでは、最初のクリックで地雷を踏まないようにするのがお約束です。クリックされた場所とその周囲を「安全ゾーン」として記録してから、地雷をランダムに配置しましょう。

function placeMines(safeRow, safeCol) {
  var safeSet = {};
  safeSet[safeRow + ',' + safeCol] = true;
  for (var i = 0; i < NEIGHBORS.length; i++) {
    var nr = safeRow + NEIGHBORS[i][0];
    var nc = safeCol + NEIGHBORS[i][1];
    if (nr >= 0 && nr < rows && nc >= 0 && nc < cols) {
      safeSet[nr + ',' + nc] = true;
    }
  }

  var placed = 0;
  while (placed < totalMines) {
    var r = Math.floor(Math.random() * rows);
    var c = Math.floor(Math.random() * cols);
    if (!board[r][c].mine && !safeSet[r + ',' + c]) {
      board[r][c].mine = true;
      placed++;
    }
  }
}

safeSetでクリック位置とその周囲を記録し、そこには地雷を置かないようにしています。whileループでランダムな位置に地雷を1つずつ配置していきます。地雷の配置後は、各セルの周囲にある地雷の数を数えてadjacentMinesに格納します。

フラッドフィル（再帰的展開）を実装しよう

マインスイーパーの面白さは、空白セルをクリックすると周囲の空白が一気に開くところです。これを「フラッドフィル」という再帰処理で実現しましょう。隣接地雷数が0のセルを見つけたら、その周囲のセルも再帰的に開いていきます。

function floodReveal(r, c) {
  if (r < 0 || r >= rows || c < 0 || c >= cols) return;
  var cellData = board[r][c];
  if (cellData.revealed || cellData.flagged || cellData.mine) return;

  cellData.revealed = true;
  revealedCount++;
  updateCellDisplay(r, c);

  if (cellData.adjacentMines === 0) {
    for (var i = 0; i < NEIGHBORS.length; i++) {
      floodReveal(r + NEIGHBORS[i][0], c + NEIGHBORS[i][1]);
    }
  }
}

この関数のポイントは3つです。まず、範囲外チェックで配列の外にアクセスしないようにしています。次に、すでに開いたセル・旗付き・地雷のセルは処理をスキップします。そしてadjacentMines === 0のとき、8方向すべてに対して自分自身を呼び出す「再帰」を行います。再帰の終了条件がしっかり書かれているので、無限ループにはなりません。