Warning: Undefined array key "steps" in /home/bubudoufu/bubudoufu.com/public_html/wp-content/plugins/amp/src/ReaderThemeSupportFeatures.php on line 501
JavaScriptでマインスイーパを作ってみる - プログラミングを学習中の私が、アウトプットするためのサイト
サイトアイコン プログラミングを学習中の私が、アウトプットするためのサイト

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

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

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

マスを開く

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

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

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

モバイルバージョンを終了