JavaScriptでマインスイーパを作ってみる - プログラミングを学習中の私が、アウトプットするためのサイト

このページではソースコードの一部分を簡単な解説をしています。
作成したプログラムのコードはgithubにあります。
その他、作成したアプリやゲームの一覧はこちらにあります

概要
２次元配列で爆弾を管理する
マスを開く

概要

縦・横のマスと爆弾の数を任意に指定できるマインスイーパです。最初の一手は爆弾を踏まないようにプログラミングしました。大きい画面でゲームしたい方はコチラからお願いします。

windows版のマインスイーパーの難易度
・初級：9×9のマスに10個の地雷（Windows Meまでのバージョンは8×8）
・中級：16×16のマスに40個の地雷
・上級：30×16のマスに99個の地雷
https://ja.wikipedia.org/wiki/%E3%83%9E%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%A4%E3%83%BC%E3%83%91

２次元配列で爆弾を管理する

let h, w, bomb;
let data = [];

// 爆弾を設置
function putBomb() {
  for (let i = 0; i < bomb; i++) {
    while (true) {
      const y = Math.floor(Math.random() * h);
      const x = Math.floor(Math.random() * w);
      if (data[y][x] === 0) {
        data[y][x] = 1;
        break;
      }
    }
  }
}

let h, w, bomb;

let data = [];

// 爆弾を設置

function putBomb() {

for (let i = 0; i < bomb; i++) {

while (true) {

const y = Math.floor(Math.random() * h);

const x = Math.floor(Math.random() * w);

if (data[y][x] === 0) {

data[y][x] = 1;

break;

}

変数hは縦のマス、wは横のマス、bombは爆弾の数をそれぞれ保持しています。爆弾の位置は２次元配列のdata配列で管理をし、爆弾がない場所は0、ある場所は1としています。爆弾の設置はMath.random関数を使いランダムな位置に置いています。1手目をクリックした場所とその周囲は-1を設定し、爆弾を置かないようにしました。

マスを開く

クリックされたテーブル要素の子要素をDOM操作で取得し、その情報を元にdata配列を参照して爆弾が無ければマスを開くopen関数が実行されます。

function open(y, x) {
  for (let i = y - 1; i <= y + 1; i++) {
    for (let j = x - 1; j <= x + 1; j++) {
      if (i >= 0 && i < h && j >= 0 && j < w) {
        let bombs = countBomb(i, j);
        if (
          board.rows[i].cells[j].className === "open" ||
          board.rows[i].cells[j].className === "flag"
        ) {
          continue;
        }
        if (bombs === 0) {
          board.rows[i].cells[j].classList.add("open");
          open(i, j);
        } else {
          board.rows[i].cells[j].textContent = bombs;
          board.rows[i].cells[j].classList.add("open");
        }
      }
    }
  }
}

function open(y, x) {

for (let i = y - 1; i <= y + 1; i++) {

for (let j = x - 1; j <= x + 1; j++) {

if (i >= 0 && i < h && j >= 0 && j < w) {

let bombs = countBomb(i, j);

if (

board.rows[i].cells[j].className === "open" ||

board.rows[i].cells[j].className === "flag"

) {

continue;

}

if (bombs === 0) {

board.rows[i].cells[j].classList.add("open");

open(i, j);

} else {

board.rows[i].cells[j].textContent = bombs;

board.rows[i].cells[j].classList.add("open");

}

open関数の引数にはクリックされたテーブル要素のparentNode.rowIndexとcellIndexを渡しています。for文でクリックされた周囲を調べ爆弾があった場合はcountBomb関数で取得した爆弾の数を表示させています。爆弾が無かった場合は再度open関数を実行してその周囲を調べていきます。

その他の処理はgithubでソースコードを公開しているので参照をお願いいたします。
最後までお読みいただきありがとうございました。