Lifegame (JavaScript)

概要

Javascript学習のスタートアップのために試作したもの。

内部に配列を持ち、世代交代の結果を文字ベースで表示し、setInterval()で更新している。

htmlのdiv要素内に文字ベースで表示している。

デモンストレーション

このアプリケーションは文字ベースなため、ブラウザやスタイルによって大変見にくい。別ページで用意したこのアプリケーションで、ブラウザによっては見やすくなる場合がある

パターン選択








実行

表示エリア

コード内容

HTML

カテゴリーごとの初期パターン選択ボタン、起動/停止ボタン、表示エリアを表示させている。

JavaScript

グローバルな二次元配列にセルの情報を保持し、配列上で世代交代の処理をしたうえで、HTMLに書き出している。初期パターンの選択は、パターンごとの設定用関数を準備し、ボタンで呼び出している。主な処理ブロックは以下の通り。

グローバル処理
グローバル変数の宣言と初期値定義を行っている。
初期パターン選択
各パターンのボタンのクリックに応じて、パターンごとに準備された関数が呼び出され、初期pターンの設定と表示を行う。
起動・停止
ボタンのクリックによって、一定時間間隔で世代交代関数を実行させ、停止させる。
世代交代
ライフゲームのルールに従い、一世代後のパターンを決定し、表示する。

グローバル処理

  • 共通して利用する変数の宣言/定義
  • グリッドの初期化
  • 初期状態のグリッドの表示

初期パターン選択

ボタンで選択された初期パターンに対応した設定関数が呼び出される。設定関数はパターンごとに準備され、配列リテラルの内容を、グリッドの”ほぼ中央”にコピーする。

起動・停止

起動・停止のボタンが押されるたびに、稼働状態/停止状態がスイッチする。稼働時には、一定時間間隔で関数life()を呼び出している。life()関数内では、世代交代を施した後、表示をさせる。

世代交代

あるセルの次世代の状態は、そのセル自身の状態と、その周囲8つのセルの数によって定められる。

存在 不在
0~1 死滅 不在
2 存在 不在
3 存在 誕生
4~ 死滅 不在

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です