読者です 読者をやめる 読者になる 読者になる

FOR SE

文系の学部から新卒でメーカー系のSIerに就職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界に就職

このエントリーをはてなブックマークに追加

【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();
	}

//キャンパス内の配列に初期値を設定する//
//まだら模様にするために1行ごとに初期設定が変える//
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);
	//1セルごとに座標を取得し、着色判定
	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>
.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }