経緯
大学時代に部活でマインスイーパーを作ったんですよ。
ただ、当時は「マインスイーパーってどうやって遊ぶの？どこが楽しいの？」と、正直よくわかっていませんでした。
それから年月を経て、今改めてやってみると……意外と面白い！シンプルなんだけど、ちゃんと奥深いんですよね。
そんなわけで「もう一度作り直してみよう」という軽いノリで実装しました。
皆さんはマインスイーパーのルール、ご存じですか？
使用技術
フロントエンド
- React
- ReactDOM
- Tailwind CSS
- PostCSS
- Autoprefixer
ビルド・デプロイ
- React Scripts
- gh-pages
仕様と概要
基本仕様
-
ボードサイズ: 10×10
-
地雷数: 15個
-
操作方法:
- 左クリック → セルを開く
- 右クリック → フラグを立てる / 外す
ゲームメカニクス
-
初期化
- 10×10のグリッドを生成
- 地雷を15個ランダム配置
- 各セルに「周囲の地雷数」を計算して埋め込む
-
セルの状態
- 未開封 → グレー
- 開封済み → 数字（周囲地雷数） or 💣
- フラグ付き → 🚩
-
自動展開
- 周囲の地雷数が「0」のセルを開いたら、さらに周囲8セルも自動で開く
- 連続する空白セルを再帰的に展開
-
終了条件
- 敗北 → 地雷を開いてしまったとき
- 勝利 → すべての非地雷セルを開いたとき
UI機能
- フラグカウンター: 残りフラグ数を表示
- タイマー: 経過時間を秒単位で表示
- リスタートボタン: ゲームを初期化
- 結果表示: 勝利 / 敗北時にメッセージ表示（ちょっとしたアニメーション付き）
課題
正直、今のままだと単純すぎてちょっと物足りないです。
「初級・中級・上級」といった難易度選択ができると遊びごたえが増すかなと思っています。
とりあえず今回は「昔の自分が作ったものを作り直してみた」というのがゴールなので、次は機能追加に挑戦したいです。