🙆‍♀️

Flutter でマインスイーパーを実装

2021/11/24に公開

はじめに

raywenderlich に書いてあるFlutter のマインスイーパー実装(https://www.raywenderlich.com/26763909-creating-a-game-like-minesweeper-in-flutter) を自分で動かしてみましたので、記事にしてみました。考察はちょっと浅いです。

demo

一応、申し訳程度に日本語ローカライズは自分でやっています。
また、実際のFlutterアプリでは利用されていないと思われる StatefulWidget での実装です（もともとそうなっていて、riverpod に書き換えるまではいけなかった）。
riverpodについては下記に書きました。

自分がよく分かってなかったので調べてみました。
簡単に言うと、地雷が置かれていない全てのマスを開けるゲームです。

マインスイーパーのメイン画面。

State<MyHomePage> から派生した _MyHomePageStateで各マスの地雷や数字の状態（size, cells など）を持っています。
_MyHomePageState#generateGrid() で状態についての初期化を行なっている。
- https://github.com/HikaruSato/flutter_minesweeper/blob/main/lib/my_app.dart#L76
右上のNEWボタンをタップするとゲームが最初からになります。setState()で_MyHomePageState#generateGrid() をしています。
- https://github.com/HikaruSato/flutter_minesweeper/blob/main/lib/my_app.dart#L294-L298

マス。
下記赤枠の各マスのWidget。

GestureDetectorのchildに指定されており、各マスのonTapやonLongPressは_MyHomePageState側で処理しています。
- https://github.com/HikaruSato/flutter_minesweeper/blob/main/lib/my_app.dart#L112-L125
マスのonTapでマスを開く処理している。地雷があったらアラート表示したり、CellModelを更新してMyHomePage#setState()してます。setStateすると_MyHomePageState#build()が呼ばれて画面更新されます。
- https://github.com/HikaruSato/flutter_minesweeper/blob/main/lib/my_app.dart#L228-L292
  *上記のコードだとsetStateのブロック（{} 部分）内に書かずに直前で状態変数を設定してからsetStateコールしていますが、{} 内に書くのと処理的には変わらならそうです。慣例的には{} 内に状態を設定するコードを書くのが良いのだと思います。
  - https://github.com/flutter/flutter/blob/7dade22f2538f9ee4768216a7212d9071f3f38db/packages/flutter/lib/src/widgets/framework.dart#L1229
  - https://zenn.dev/chooyan/articles/7c2bf39f81cbed
マスのonLongPressで旗をセットする処理をしていて、フラグ設定後にMyHomePage#setState()してます。
- https://github.com/HikaruSato/flutter_minesweeper/blob/main/lib/my_app.dart#L223-L226

下記を参考にやりました。

AndroidとiOS両方でデバッグしてみて思うのが、ビルドがAndroidの方が基本的にだいぶ速いので、両方OSでデバッグできるようなアプリならAndroidでデバッグした方が開発効率はいいと思ってきています。

zenn 初投稿でしたが、markdownでかけるところはいいなと思いました（noteに比べて）。