カテゴリー:webめっきり更新ができていないふきのとうです。「Canvasを使ってみたい」と思い立ち何かいいネタはないかと考えたのですが、これといって思いつかないためライフゲームを作ってみることにします。今回は単純にルールに従って動作させてみます。追加していきたいと思います。記事の目次デモコーディングHTMLJavascript変数についてメソッドについてFieldオブジェクトCanvasライフゲームの実行デモ今回の完成形はこんな感じ。デモページコーディングHTMLシンプルにcanvasタグだけあればOKです。100);});&#91;/code&#93;<h2>簡単な説明</h2>Javascriptの簡単な説明をつけておきます。<h3>Javascriptの実行</h3>これはDOMへのアクセス準備ができた段階で実行するための方法で、<code>$</code>がコンフリクトを起こさないようにもするためですね。});変数について5つの変数を宣言します。canvas制御用メソッドについてメソッドは3つ。init:初期化処理(各オブジェクトの初期化など)draw:描画処理の呼び出しrandom:指定された範囲内で乱数を返すFieldオブジェクトメンバ変数オブジェクトのメンバ変数は3つ。各ドットの状態保持配列prototype(内部メソッド)prototype(内部メソッド)として7つ。init:Filedの初期化処理randomize:fieldをランダムに設定するnext:次の状態に遷移させるneighbor:8近傍のうちactiveなセルの数を返すfate:生死判定val:fieldから状態を返すset:fieldに状態を設定するCanvasメンバ変数オブジェクトのメンバ変数は3つ。セルサイズprototype(内部メソッド)prototype(内部メソッド)として2つ。100);setIntervalを利用してlifegameメソッドを100ms間隔で繰り返し実行します。lifegameを1回だけ実行することでステップ実行が実現できます。100を変更することで、実行スピードの調整ができます。次回はこのあたりの作りこみをしてみます。UIのDatepickerを利用する中途半端なcheckboxを作るコメントコメントは公開されません。誤記、お問い合わせなどお気軽に送信してください。