【HTML5・javascript】ライフゲームより簡単なサンプルを作る② - 新卒から文系エンジニア→人材業界に転職した人のブログ

【今回の紹介】

前回の続き

以下の処理を追加してよりライフゲームっぽくなったので紹介。
　①繰り返し処理を行う関数
　②描画したキャンパスを初期化する処理

【内容】

①繰り返し処理を行う関数
　繰り返し、描画を行うため　
　setTimeout("実行関数",”待機時間”)
　

  setTimeout("default_set()",1000/secoundexe_count);

②描画したキャンパスを初期化する処理
　塗りつぶされたセルが残ってしまうため、描画を初期化する

	context.clearRect(0,0,SCREEN_SIZE,SCREEN_SIZE);

【参考ソース】

<html>
<head>
<meta charset='utf-8'>
</head>
<title>HTML5</title>
<body>
<h1>キャンバス</h1>
<canvas id='canvas'></canvas>
<script>
var SCREEN_SIZE = 600; // キャンバスの幅
var SIDE_CELLS = 30; // 一辺のセルの数
var CELL_SIZE = SCREEN_SIZE / SIDE_CELLS; // セルの幅
var canvas; //= document.getElementById('world');
var context; //= canvas.getContext('2d');
var secoundexe_count=10;
//読み込み後、行う処理
window.onload = function() {
	canvas=$("canvas");
	canvas.width = canvas.height = SCREEN_SIZE; // キャンバスのサイズを設定
	context=canvas.getContext('2d');
	context.fillStyle='#FFF000';

    default_set();
	}

//キャンパス内の配列に初期値を設定する//
//まだら模様にするために１行ごとに初期設定が変える//
function default_set(){
	var sum_cell= new Array(CELL_SIZE*CELL_SIZE);
	for(var i=0;i<sum_cell.length;i++){
	sum_cell[i]=Math.floor(Math.random()*2);
	}
	draw(sum_cell);
	setTimeout("default_set()",1000/secoundexe_count);
}


//描画処理
function draw(sum_cell) {
	context.clearRect(0,0,SCREEN_SIZE,SCREEN_SIZE);
	//１セルごとに座標を取得し、着色判定
	for(var i=0;i<sum_cell.length;i++){
		var x=i%CELL_SIZE*CELL_SIZE;
		var y=Math.floor(i/CELL_SIZE)*CELL_SIZE;
		if(sum_cell[i]==1){
			context.fillRect(x,y,CELL_SIZE,CELL_SIZE);

		}
	}
	}


//DOMobjを取得する処理
function $(id){
	return document.getElementById(id);
}
</script>
</body>
</html>