はじめに
flutter for webを使って何か作りたいなと思い考えていたところ、『本当に無理ゲーな神経衰弱』を思いつきました。
「全く伸びずでした」で終わりでもいいかなと思ったのですが、Flutter for webを使ってみた記事がそもそもあまりなかったため、せめて情報共有をしようと思いこの記事を書くことにしました。
コードも公開してます(BSD-3)。
https://github.com/yasudadesu/kuso_sinkei
どんなアプリか
圧倒的にクリアが難しい神経衰弱です。
ルールは以下
- 基本ルールは神経衰弱と全く同じ
- 毎回カードの絵柄は自動的に生成される
- 難易度は４段階
ゲーム中の画像は以下のような感じ。
どういうこと？と思う方も多いと思いますのでコードを見る前に一度プレイしてみると良いかと思います。
こちらからプレイができます↓
https://muzu-sinkei.firebaseapp.com/#/
コードを参考する上で注意して欲しいこと
ある程度コード内でコメントなどもしていますが、その他にも色々注意点があるので記しておきます。
1. 状態管理はProvider
もはや非常に有名なパッケージであるProviderを使って状態管理をしています。
notifyListersを呼ぶべき箇所とそうでない箇所の参考などになるかと思います。
2. ランダムの方法
最初はCustomPainterの内部でfinal rand = Random()を作って実装をしようとしていたのですが、そのように実装するとリビルドが起こるたびに関数が再実行されてしまいます。
ですので、あらかじめChangeNotifierクラス内で非常に大きなランダムの配列を作り、その配列の中から初期位置を決めるようにして、Widgetのリビルドと処理を切り離しました。
3. firebase関連のファイルは入ってません
そのまんまです。
https://flutter.dev/docs/development/data-and-backend/firebase
いくつかのサイトでfirebase x Flutter for webの記事は上がっていますが、個人的には上のリンクの公式ページからリンクされている以下のページを見ることをお勧めします。
4. リファクタなどはしていない
リファクタなどの作業やディレクトリの整理などはしておりません。
さいごに
ベッドの上で思いついた瞬間は非常に面白いと思って(個人開発あるある)飛び起きて突貫工事で作ったのですが、その後にTwitterでつぶやいたところ全くインプレッションが伸びず、恥ずかしすぎてツイ消ししました。
個人的には非常に面白いゲームを作れたなと深夜テンションながら思っており、全く伸びなかったのが悔しかったため、一人でも多くの方にプレイしてもらえると嬉しいなと思い本記事を書きました。
よければプレイしてみてください！
また、もっといいプラクティスなどがあればご共有いただけますと幸いです。