オルタナティブ・ブログ > ビジネスをデザインするブログ >

事業開発ほどクリエイティブな行為は他に無いと思いこんでいる人間の日常

HTML5でLifeGame

»

プログラマの人なら、新しい言語やプラットフォームと出会ったとき、とりあえず書いてみるプログラムがあると思うのですが、私の場合はLife Gameがそれです。

というわけでHTML5(Javascript + Canvas)で書いてみました。

Lifegame

こんな感じ。(実行してみる

で、なぜかIE9で動かない。。。

ちょっと調べてみたところ、IE9では、頭に、

<!DOCTYPE html>

をつけないとHTML5系の機能がうまく動かないようです。いつもVisualStudioにお世話になっていたので、気が付きませんでした。。。

いちおうソース貼り付けておきます。

<!DOCTYPE html>
<html>
    <head>
        <title>Gmae of Life</title>
        <script type="text/javascript">

            //一辺のセルの数(正方形を想定)
            var n = 50;
            //セルの幅(px)
            var w = 10;

            //配列の宣言
            var out = new Array(n); //出力用(描画用)
            var inp = new Array(n); //入力用(計算用)

            //配列の定義と初期化
            for(x=0;x<n;x++){
                out[x] = new Array(n);
                inp[x] = new Array(n);
                for(y=0;y<n;y++){
                    out[x][y] = Math.floor(Math.random()*2); //乱数で0か1を代入
                    inp[x][y] = 0;
                }
            }

            //ロード時にタイマーをスタート
            window.onload = function(){
                //lifegame関数を500ミリ毎に実行
                setInterval(lifegame,500);
            }

            //本体
            function lifegame(){

                //前の状態を入力用配列にコピー               
                copy();
                //ルールを適用       
                calc();
                //描画
                draw();

            }

            //前回の状態を入力値として利用
            function copy(){
                for(x=0;x<n;x++){
                    for(y=0;y<n;y++){
                        inp[x][y] = out[x][y];
                    }
                }
            }

            //ルールを適用
            function calc(){

                //近傍をとれるよう配列をオフセット
                for(x=1;x<n-1;x++){
                    for(y=1;y<n-1;y++){

                        //セルの状態を取得(0か1)
                        var state = inp[x][y];

                        //近傍の状態カウント用
                        var cnt = 0;

                        //近傍の状態を取得
                        for(i=0;i<3;i++){
                            for(j=0;j<3;j++){
                                //近傍で生きているセルの数を数える(左上にオフセットして走査)
                                if(inp[(x-1)+j][(y-1)+i] == 1){
                                    cnt++;
                                }
                            }
                        }

                        //自分が空(死)状態で...
                        if(state == 0){
                            if(cnt == 3){ //周りに3つ生きてたら
                                state = 1; //生まれる
                            }
                        }
                        //自分が生きていて...
                        else{
                            if((cnt-1) == 2 || (cnt-1 == 3)){ //周りが2つか3つ生きていれば...
                                state = 1; //現状維持
                            }
                            else{
                                state = 0; //それ以外は死ぬ
                            }
                        }

                        //状態を描画用の配列に代入
                        out[x][y] = state;

                    }
                }

            }

            function draw(){

                //要素の取得とコンテキストの取得
                var canvas = document.getElementById("cvs");
                var ctx = canvas.getContext("2d");

                //一度描画をクリア
                ctx.clearRect(0,0,canvas.width,canvas.height);

                //配列の状態を見ながら...
                for(x=0;x<n;x++){
                    for(y=0;y<n;y++){
                        //生きているセルがあれば...
                        if(out[x][y] == 1){
                            //四角形を描画s
                            ctx.fillRect(x*w,y*w,w-1,w-1);
                        }
                    }
                }

            }

        </script>
    </head>
    <body>
        <canvas id="cvs" width="500" height="500">not supported.</canvas>
    </body>
</html>

Comment(0)