今更ながらjQueryで、ライフゲームを作る(DOM版)
横:25セル、縦:25セルのライフゲームをjQueryで作ってみた。
ページ背景のアクセサリとかにどうかな…
初期配置は、ランダムです。(1つだけグライダー型を配置)
一応、ライフゲームの生存ルールは以下の通り、
・生命がいるセルでは、その周りに2個か3個の生命が存在すれば、次の世代も生き残る。
・生命がいないセルでは、その周りに3個の生命が存在すれば、次の世代で生命が誕生する。
・それ以外のときは、どちらも次の世代で死滅する。
■初期配置
- 現在のセルの状況を保存する配列(arr_cells_now[])と、
- 1世代すすめた時の状況を保存する配列(arr_cells_future[])を作る
- arr_cells_now[]配列に、ランダムに配置する
function arr_init() {
for ( var i = 0; i < max_cells; i++ ) {
arr_cells_now[i] = 0;
arr_cells_future[i] = 0;
var nums = Math.random() * 10;
if( nums < 1 ) {
arr_cells_now[i] = 1;
}
}
//グライダーを配置
arr_cells_now[27] = 1;
arr_cells_now[53] = 1;
arr_cells_now[76] = 1;
arr_cells_now[77] = 1;
arr_cells_now[78] = 1;
//セル用shape
for ( var j = 0; j < max_cells; j++ ) {
$('#lifestage').append('<div class="cells" id="cell' + j + '">');
if( arr_cells_now[j] == 0 ) {
$('#cell' + j).css('visibility','hidden');
}
}
}
■世代を進めて描画する
- ライフゲームのルールに従って1世代ずつ進める
- 次の世代の状況を描画する
- 1000世代までで終了とする
function life_mov( now_arr , future_arr ) {
//console.log('move');
for ( var i = 0; i < max_cells; i++ ) {
//上下左右のセルの配列上の相対位置を出すため用
var arr_cellpos = [
(max_width +1) * -1, ( max_width ) * -1, ( max_width -1 ) * -1,
-1, 0 , 1,
max_width -1,max_width,max_width +1
]
//周りのセルを調べる
var cnt = 0;
for( var j = 0; j < 9; j++ ) {
if ( j != 4 ) {
var n = i + arr_cellpos[j];
if( n < 0 ) {
n += max_cells;
} else if( n > ( max_cells - 1 ) ) {
n -= max_cells;
}
if ( now_arr[n] >= 1 ) {
cnt++;
}
}
}
//生存セルのとき
future_arr[i] = now_arr[i];
if( now_arr[i] >= 1 ) {
if( cnt < 2 ) {
future_arr[i] = 0;
}
if( cnt > 3 ) {
future_arr[i] = 0;
}
} else {
//空きセルのとき
if( cnt == 3 ) {
future_arr[i] = 1;
}
}
//描画
var posx = ( i % max_width ) * 4;
var posy = ( parseInt( i / max_width ) ) * 4;
if ( future_arr[i] == 1 ) {
$('#cell' + i).css('visibility','visible');
} else {
$('#cell' + i).css('visibility','hidden');
}
}
}