CanvasでLifeGame実装したった。

canvas javascript lifegame

カッとなってやった。後悔はしていない。
CanvasLifeGame
重すぎてブラウザが死んでも知らない。

更新履歴

2011/12/15
実装アルゴリズム変更。超高速化できた！
世代交代時間のkeyをrlからfrに変更
2011/12/14
実装アルゴリズム変更
URLクエリで世界の広さと世代交代時間を変更可能にした
2011/12/13
リリース

URLクエリ

w
横幅。半角数字で指定
h
縦幅。半角数字で指定
fr
フレームレート。世代公開時間。ms。半角数字で指定

ex) 横200px、縦150pxで、10ms更新
http://utageworks.jpn.ph/test/CanvasLifeGame/?w=200&h=150&fr=100

仕様

  • canvas + jQuery
    • canvas使ってるからhtml5だなんて思うな！ たぶん大丈夫だけど！
  • width、heightともに100%で表示。1ピクセル＝1セル扱い。
    • XGAで完全フルスクリーンにすると、786,432セルがうごめく。
    • 無駄に色つき。
    • URLクエリによりサイズ変更可能。
  • あまり重くなくなったけど、リフレッシュレートは1,000msに設定
    • あまり重くなくなったので、1,000msに1世代進む進む。
    • テストしたマシンでは、Fxの1600x800くらいで100msくらいかなー
    • URLクエリにより世代交代時間変更可能。
  • 世界はループしている
    • 亀と象の上にあり、蛇に覆われた世界なんてまやかしだ！
  • ウィンドウをリサイズすると世界の広さが変化
    • 小さくすると、非表示になった部分にいたセルは死滅する。
    • 大きくすると、何も無いところに侵略を始める。
    • URLクエリでサイズを指定していない場合に限る
  • Fxで見るとStartと書かれている箇所がボタンにみえる
    • ChromeでCSS3のグラデーションがうまく動かなかったのをそのまま放置

今後の予定