JavaScriptでライフゲームを作った
この記事は SLP KBIT Advent Calendar 2020 2日目の記事です。
ライフゲームをつくりました。紹介と振り返っての感想です。
GitHub Pagesで公開してます。
https://yassi-github.github.io/LifeGame/
ライフゲームとは
ちょっと昔の数学者が考えた，生物集団の生死を簡単に再現するもの。らしい。
集団は過疎でも過密でも死んじゃう。ほどよい具合だと誕生したり生存できたりする。考えた人すごい。
で，これ，作られる模様がいいんですよ。ドット絵のピコピコ感が非常によき。
さらに，作られるパターンに名前があって，宇宙船とかパルサーとかSFみがあってすき。シュシュポッポ列車なんてのもあるみたい。かわいい。
こういうのをつくって遊べるのをつくりました。
JavaScriptでの実装
コードはここに置いてます
GitHub - yassi-github/LifeGame: 古典的で簡単なシミュレーションゲーム
機能紹介
- お絵かきの要領で，フィールドにドット絵を描きます。
- PLAYボタンでシミュレート！固定か滅亡するまでつづきます。
マスの数は3から30まで変えられるようになっています。
シミュレート中に変更を加えることもできます。
作成過程
- お絵かきをするコードを参考に，ドット絵描画ができるようにする
- 配列とドット絵をリンクさせる
- アルゴリズムを実装する
- 動作の不具合やミスを修正
- インタフェースを改善
って感じです。
参考にしたコードは「JavaScript お絵かき」などと検索してでてきたサイトで解説してたものです。
そもそも，イベントリスナーってなんぞ？みたいに，JSの基本的な書き方がよくわかっていないので，全体的な形がわかると(テンプレ的に使えるので)すごく助かる。キャンバス要素なんて存在程度しか知らなかったし，自分で暗中模索して時間つぶすぐらいなら，基礎となる手法は既存の手法を真似るのがいいよね…。
ハマったとこ
- 開発ツールの仕様
2次元配列の値を変更する過程を出力しようと，ループ中にconsole.logして開発ツールで見たら，全部の出力が最終結果と同じになってる。
Node.jsで動かしたら正常に表示されるのに…。
試行錯誤した結果…
開発ツールのコンソールで出力される2次元配列は，そのままだとタブで閉じられてるまま。この状態では値が入っていない？みたいで，タブを開いた時点の状態が表示される仕様という認識に至った。
- 2次元配列のコピー，比較
concatだと1次元しか対応してない。でもエラーは出ないしコピーはできてるので問題ないと判断してしまった。後から値を変更したらコピー元とコピー先両方に変更が加えられてしまうのだった。
比較も，イコールで結ぶのはダメだし，どうしたものかと思っていた。Google先生に聞くとJSON.parse(JSON.stringify())を使えばいいと。
結果，コピーも比較もJSONさんで解決。
- マスサイズの更新
入力値に基づいてマスサイズを決定するため，どうやってJSを更新させよう…？とグローバル領域に変数置いたりごちゃごちゃしていた。
結局，パラメータによってページごとに決定するものになった。ページ自体を遷移させるのは気が進まないが，他に方法見つからなかったので仕方なし。
おわりに
動くようになったときはプログラミング楽しい～～～～！！！ってなったのでこの気持ちを忘れないように精進してまいります。
まだアドカレの担当残ってるんでそっちも進めなきゃ…終わるかな…
