share

あむちょです。

ブラウザー上でゲームといった動的な物を表示したい時、html4とは別の言語で書く必要がある訳だが、ちょっと前まではflash等がメジャー？だったと思う。

しかしappleのflash締め出しのせいで時代はhtml5の流れ…ということで勉強を兼ねてライフゲーム作ってみました。

ライフゲームとは、格子状のマス目を使って生命のプロセスをシュミレートした、ただ眺めるだけのゲームです。初期状態で結果は確定してます。

過疎でも過密でも個体の生存に適さないという、生きにくい社会の中で以下のルールに従って誕生と死滅を繰り返します。

１．誕生
死んでいるセルに隣接する生きたセルがちょうど3つあれば、次の世代が誕生する。

２．生存
生きているセルに隣接する生きたセルが2つか3つならば、次の世代でも生存する。

３．過疎
生きているセルに隣接する生きたセルが1つ以下ならば、過疎により死滅する。

４．過密
生きているセルに隣接する生きたセルが4つ以上ならば、過密により死滅する

何はともあれ見てみるのが早いかと。以下のリンクでできます。canvasタグが何とかって表示される人はブラウザーのバージョンが古いです、更新しましょう。

ライフゲーム

Startボタンを押すと始まります。表示されている数字は世代数です。初期配置は更新するたびランダムで生成されます。

無限に増殖するパターンも存在し、「移動しながら通過した後に破片を残すもの」をシュッシュポッポ列車と呼ぶそうです（本当だよ）。

今回のは*１コメダでてきとうに作ったので、今後暇な時にでもクリックで生命の誕生や死滅に介入できる神の見えざる手を追加する予定です。（*１コメダ=一回のコメダ珈琲滞在）
追加しました。

いちようhtml5の勉強で始めたのだが、<canvas>タグぐらいしか使っておらず、ほとんどjavascriptの勉強で終わりました…

html5をマスターして目指せGREE!

続く
HTML5でライフゲーム２
[ad]