HTML5でLifeGame
プログラマの人なら、新しい言語やプラットフォームと出会ったとき、とりあえず書いてみるプログラムがあると思うのですが、私の場合はLife Gameがそれです。
というわけでHTML5（Javascript + Canvas）で書いてみました。
こんな感じ。（実行してみる）
で、なぜか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>