カテゴリー:web前のcanvasでライフゲームでは単純にライフゲームを動かしてみました。今回はボタンの追加や、スピードの変更といった機能を追加してみます。記事の目次デモコーディングHTMLJavascriptメソッドについてGenerationオブジェクトSpeedデモ今回の完成形はこんな感じ。デモページコーディングHTML前回同様シンプルにcanvasタグだけあればOKです。draw();});&#91;/code&#93;<h2>簡単な説明</h2>Javascriptの簡単な説明をつけておきます。<h3>変数について</h3><code>timer</code>、<code>generation</code>、<code>speed</code>の3つを追加しました。表示スピード管理用メソッドについて追加したメソッドは5つ。bind:各ボタンなどの部品へのイベントのバインドreset:fieldを初期化start:ライフゲームを開始するstop:ライフゲームを停止するstep:ライフゲームをステップ実行するGenerationオブジェクトメンバ変数オブジェクトのメンバ変数は2つ。世代数prototype(内部メソッド)prototype(内部メソッド)として3つ。increment:世代を1増やすreset:世代数を0に戻すshow:世代数を表示するSpeedメンバ変数オブジェクトのメンバ変数は3つ。速度の値prototype(内部メソッド)prototype(内部メソッド)として2つ。change:スライドを変更したときの処理show:速度を表示するval:速度の値を取得するspeed:速度を計算するおまけとして、現在activeなセルの数も表示するようにしてみました。UIのDatepickerを利用する中途半端なcheckboxを作るコメントコメントは公開されません。誤記、お問い合わせなどお気軽に送信してください。