それなりに高機能なライフゲーム

ライフゲームとは

Wikipediaからのコピペですが、ライフゲームはこういうものです。

  • セルオートマトンの一種
  • セルの上に生命体をつくり、誕生から死亡をシミュレートする
  • 生命のステータスは4つ(以下)
誕生
死んでいるセルに隣接する生きたセルがちょうど3つあれば、次の世代が誕生する。
生存
生きているセルに隣接する生きたセルが2つか3つならば、次の世代でも生存する。
過疎
生きているセルに隣接する生きたセルが1つ以下ならば、過疎により死滅する。
過密
生きているセルに隣接する生きたセルが4つ以上ならば、過密により死滅する。

この単純なルールで生命体を表現するのがライフゲームです。
とりあえずそれを作ってみました。

デモ

グライダー

まずは”グライダー”をご覧ください。Runをクリックしてください。
このページへ

ほかの物体はリンク先の下のほうにあるリンクで辿れます。

銀河

こんなのもいいですね。
このページへ

Numを押して生命数の表示を有効化すると、セルの周りの生命体数が表示され、ルールと照らし合わせて確認できます。が!ブラウザによっては固まってしまうことも・・・。重いようです。

ほかにはこういうのも

パルサーといわれるようです。たしかに、天体の一種に見えなくもない。
このページへ

グライダーを量産するグライダー銃

グライダーを製造しまくります。
幅が広いので、このページで見てください。

ほかに・・・

というわけで、いろいろ作れます。セルをクリックすると生命体を作れるので、やってみてください。一つや二つのセルに生命を置いても、過疎で死んでしまいますし、4つ以上を隣接させるとそれはそれで過密で死にます。

more..

see wikipedia
たくさんあります。なにか新しいものを作ったら、リンクをGetURIで生成して、コメントにでも書き込んでくださいね。

プログラムの工夫

  • とりあえずHTML5です
  • セルの内容をURIにシリアライズできます。
    URIの後ろの#以降は、実は生命体の座標が入っています。いい感じの生命ができたら、GetURIでURIを作成して共有できるというわけ。
    上のサンプルのリンクへいくと、URIが長いのが分かります。

Shallow copy / Deep Copy

さて、このライフゲームを作っているときに、JavaScriptの代入で困っていました。たとえば、tmp = obj.aのようなことをすると、tmpにはobj.aの参照が入ります。これはShallow Copyというものです。これに対して、丸ごとコピーすることをDeep Copyといいます。
Deep Copyをする方法はググればいろいろなライブラリがあるようです。

Base64

URI生成でシリアライズはJSONとBase64URLを利用しました。JSON+encodeURIComponentだとどうしても大きくなるからです。Base64URLとは、Base64で利用する文字種について、URIでディレクトリセパレータなどになってしまう文字を置き換えたりしたものです。

code review

Kinetic.jsをつかってみましたが、何か遅いです。newが重いのか、描画が重いのか定かではありません。ブラウザ別で早かった順で行くと、IE10, Chrome, Safari==Firefoxくらいになりました。
requestAnimationFrameを利用して垂直同期と同じくらいの間隔でレンダリングをしようと思ったのですが、最速のIE10でもワンステップのシミュレーションに20msほどかかるので、setTimeoutにて行っています。
Kinetic.jsでリフレッシュにstage.draw()を使うと遅かったので、layerごとにdraw()しています。この場合、枠のレイヤーはレンダリングされません。

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>