Web Game: マインスイーパー風のゲーム (16x16)
遊び方
地雷をクリックしないように、地雷以外のタイルを全て開く。クリックしたタイルに表示された数字は、地雷が周りに幾つ接しているかを表示しています。
操作方法
- マウスクリック動作
- 左ボタンタイルを開く
- 右ボタン １回目タイルに！（確定）マーク
- 右ボタン ２回目タイルに？（不明）マーク
- 右ボタン ３回目タイルのマークを除去
ブラウザー（JavaScript）でマインスイーパー風のゲームをプレイ！
ゲームの動きを理解するための学習用には、このページの HTMLと利用しているJavaScriptのソースを確認！
JavaScriptで作ってみよう！
- minesweeper.htmlの gameAreaと minesweeper.min.js, minesweeper.css で構成されています。
- このページ(minesweeper.html) のソースを確認すると HTMLとJavaScriptのファイルがわかります。JavaScriptのソースと同じ場所に .min が無いファイル名で圧縮されていないファイルが置いてあります。
- ソースコード(minesweeper.js) は、クラス化してないシンプルな作りでコメントも入れてあり、コメントを含めて 380 行ぐらいです。
HTML側：
- body タグに初期化処理を記述
- table タグを利用してタイルを並べる
JavaScript側：
- 画面サイズなどの初期設定を行う変数の初期化
- タイル配置時に地雷の設置や隣接する地雷数の初期化を行う関数の作成
- 経過時間測定用のタイマー関数の作成
- タイルクリック時の処理を行う関数の作成
- タイルクリック後の描画の処理を行う関数の作成
- 初期化関数の作成
