BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. コーディング(html/css/JavaScript)
  5. jQueryでマインスイーパーを作ってみた
by 稲垣 稲垣

jQueryでマインスイーパーを作ってみた

jQueryでマインスイーパーを作ってみた

こんにちは、稲垣です。

花見シーズン真っ盛りですね。今年は暖かくて雨も降らず連日絶好の花見日和です。

弊社も今晩花見を開催するので今からとても楽しみです!

さて、花見には全く関係ないのですが今回はjQueryでマインスイーパーを作ってみました。

目次

デモ

まずは完成サンプルになります。

0のところをまとめて開く機能は実装されていないので全てのタイルをポチポチしていただけると幸いです…。

html、CSSファイル

htmlとcssを準備します。

html

中身はjsで置くので枠組みのdivだけ用意します。

あと爆弾の絵文字を使いたいのでFont Awesomeを読み込んでおきます。

css

枠内のタイルの装飾をつけます。

.openはクリックしたタイルに付与するクラスなので、少し背景色を変えておきます。

す。

動きの実装

それでは動きの部分になります。

必要な変数と配列を書きます。

bomの配列には[タイルの行数,列数,爆弾の数]を入力しているので、ここの数値を変えるとタイルの数と爆弾の数を変更できるので難易度が調整できます。

bomPosi[]はランダムな重複しない整数を取得する時に使用します。

gameFlgはゲームの進行状態を管理するための変数になります。

次にゲーム内で使用する関数を作成していきます。

#stage内にタイルを配置する関数と、その中からランダムにタイルを選び爆弾のクラスを付与する関数になります。

重複しないランダムな数は、9×9のマスなので0~81の中からランダムな数字を一つ選び、bomPosi[]に同じ数字が含まれていなければpushするという形で爆弾の数の分処理を繰り返しました。

クリックしたタイルの周囲に.bombがあるか調べる関数になります。

ifのオンパレードですみません…もっと効率よい書き方をしたいものです。。

周辺タイルの位置は下図のように求めています。

Xをクリックした時の周辺タイルの位置の求め方

残りのゲームオーバーとクリアー時の関数を作成します。

これで必要な関数が揃ったので、あとはゲーム開始時とタイルクリック時の処理を書けば完成です!

まとめ

最後にコードをまとめて載せます。

以上になります!

今回作ったものは必要最低限の機能のみですが、0のマスを一気に開いたり爆弾の位置に旗を立てたりと、もう少し本家の形に近いものにも挑戦してみたいです。

ページの先頭に戻る