こんにちは。 pregum_foxです。
今回はFlutterでライフゲームを作ってみました。
背景
前回Animationを使用してContainerの色を変えたりして遊んでみましたが、
WinFormsやWPFだとTimer等で簡単な動くものを作っていたのを思い出して、
何かいいネタがないかと考えていたら、LifeGameがふと頭に浮かんだので、
試しに作ってみました。
目次です
動作環境
動作環境は以下の通りです。
| 項目 | バージョン |
|---|---|
| Dart | 2.5.0 |
| Flutter | 1.9.1+hotfix.2 |
完成品
完成品はこちらです。
右下のFloatingActionButton(FAB)をおすと、再生と停止ができます。
gistはこちらです。
処理の流れ
initState()で各セルの状態を表す2次元配列の作成を行う。
ここではList<List<bool>> _cellArrayの2次元配列を生成しています。
List<bool>.generate(length, (j) => false).toList();でlength分の要素を生成しています。Tapされた箇所の状態を反転させます。
ここでは、bool値を反転させています。
GestureDetectorと呼ばれるWidgetを使用することで、Tapされた場合の処理ができるようになります。右下のFloatingActionButtonがTapされたら、Timerを300ms間隔でスタートさせます。
Timerの周期事に_nextLifeCycle()を呼び出し、次のセルの状態を設定します。
単純に全セルについて周囲の生きているセルと自身のセルの状態を確認し次のセルの状態を設定しています。FABが再度押されたら、停止します。
クリアButtonが押されたら、全セルをクリアします。
Timerについて
今回の目的であるTimerクラスについて説明しておきます。
Timer class - dart:async library - Dart API
上記のリファレンスを見るとわかりますが、WinFormsのSystem.Windows.Forms.Timerクラスとは違い、TimerをStartさせる関数は特になく、インスタンスを生成した時点で、タイマーが開始されます。
インスタンス生成時のDurationの値がコールバック関数を呼び出す間隔になります。
// この時点で、Timerが開始される。 Timer timer = Timer(Duration(milliseconds: 1000), () => print($'hello.'));
タイマーを止めたい時は、Timer.cancel()を使用します。
timer.cancel(); // これで止まる
類似したクラスにStopwatchクラスがありますが
こちらにはstart(), stop(), reset()等のメソッドがあるため、
ラーメンタイマー等が作れそうです。
雑感
簡単なドットのゲームならTimerとTableだけで作れそうな感じでした。
また、UIコード合わせても行数が200行弱なのはすごいなと思いました。
この感じだと、テトリスもあまり時間かからず作れそうです。
ここまで読んで頂き、ありがとうございました。
