uiur/life.html

## life.html
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
  <script src='life.js'></script>
</body>
</html>

## life.js
var LifeGame = function () {
	this.width = 600
	this.height = 600
	this.size_i = this.height / 10;
	this.size_j = this.width / 10;
	this.cells = this.randomCells();
	this
}

LifeGame.prototype = {
	initGame : function () {
		var canvas = document.createElement("canvas");
		canvas.id = 'lifegame';
		canvas.width = this.width;
		canvas.height = this.height;
		document.body.appendChild(canvas);
		this.canvas = canvas
	  this.context = canvas.getContext("2d");
		this.context.save();
		this
	},
	initCells : function () {
		var i, j;
		var cells = [];

		for (i = 0; i < this.size_i; i += 1) {
			cells[i] = [];
			for (j = 0; j < this.size_j; j += 1) {
				cells[i][j] = 0;
			}
		}
		return cells;
	},
	stepCells : function () {
		var i, j, k, l;
		var alive, dead;
		var dx = [-1,0,1];
		var dy = [-1,0,1];
		var nx, ny;

		var nextCells = this.initCells();

		for (i = 0; i < this.size_i; i += 1) {
			for (j = 0; j < this.size_j; j += 1) {
				alive = 0; dead = 0;
				for (k = 0; k < 3; k += 1) {
					for (l = 0; l < 3; l += 1) {
						nx = i+dx[k]; ny = j+dy[l];
						if (0 <= nx && nx < this.size_i && 0 <= ny && ny < this.size_j) {
							if (this.cells[nx][ny]) {
								alive += 1;
							}
							else {
								dead += 1;
							}
						}
					}
				}

				if (this.cells[i][j]) {
					alive -= 1;
					if (alive == 2 || alive == 3) {
						nextCells[i][j] = 1
					}
					else {
						nextCells[i][j] = 0
					}
				}
				else {
					dead -= 1;
					if (alive == 3) {
						nextCells[i][j] = 1;
					}
					else {
						nextCells[i][j] = 0;
					}
				}
			}
		}
		this.cells = nextCells;
	},
	showCells : function () {
		var i,j;
		for (i = 0; i < this.size_i; i += 1) {
			for (j = 0; j < this.size_j; j += 1) {
				if (this.cells[i][j]) {
					this.fillGrid(i, j);
				}
			}
		}
		this.context.restore();
		this.context.save();
	},
	showColoredCells : function () {
		var i,j;
		for (i = 0; i < this.size_i; i += 1) {
			for (j = 0; j < this.size_j; j += 1) {
				if (this.cells[i][j]) {
					this.fillColorGrid(i, j)
				}
			}
		}
		this.context.restore();
		this.context.save();
	},
	randomCells : function () {
		var i, j;
		var rand;
		var cells = this.initCells();
		for (i = 0; i < this.size_i; i += 1) {
			for (j = 0; j < this.size_j; j += 1) {
				rand = Math.floor(Math.random() * 2);
				cells[i][j] = rand;
			}
		}
		return cells
	},
	fillGrid : function (x, y) {
		var context = this.context;
		context.fillStyle = '#000'
		context.fillRect(10 * x, 10 * y, 10, 10);
	},
	fillColorGrid : function (x, y) {
		var colors = ['#0ff','#00f','#0f0','#f0f','#ff0','#f00']
		var color = colors[Math.floor(Math.random() * colors.length)];
		var context = this.context;
		context.fillStyle = color;
		context.fillRect(10 * x, 10 * y, 10, 10);
	},
	// main loop

	clearCanvas : function () {
		this.context.clearRect(0,0,this.width,this.height);
	},
	drawGrid : function () {
		var context = this.context
		for(var x = 0; x <= this.width; x += 10) {
			context.beginPath();
			context.moveTo(x,0);
			context.lineTo(x,this.height);
			context.closePath();
			context.stroke();
		}
		for(var y = 0; y <= this.height; y += 10) {
			context.beginPath();
			context.moveTo(0,y);
			context.lineTo(this.width,y);
			context.closePath();
			context.stroke();
		}
	}
};

window.onload = function() {
	var life = new LifeGame();
	life.initGame();

	function loop () {
		life.clearCanvas();
		life.showCells();
		life.stepCells();
		setTimeout(loop, 200);
	}

	loop();
}
	<!DOCTYPE HTML>
	<html>
	<head>
	</head>
	<body>
	<script src='life.js'></script>
	</body>
	</html>
	var LifeGame = function () {
	this.width = 600
	this.height = 600
	this.size_i = this.height / 10;
	this.size_j = this.width / 10;
	this.cells = this.randomCells();
	this
	}

	LifeGame.prototype = {
	initGame : function () {
	var canvas = document.createElement("canvas");
	canvas.id = 'lifegame';
	canvas.width = this.width;
	canvas.height = this.height;
	document.body.appendChild(canvas);
	this.canvas = canvas
	this.context = canvas.getContext("2d");
	this.context.save();
	this
	},
	initCells : function () {
	var i, j;
	var cells = [];

	for (i = 0; i < this.size_i; i += 1) {
	cells[i] = [];
	for (j = 0; j < this.size_j; j += 1) {
	cells[i][j] = 0;
	}
	}
	return cells;
	},
	stepCells : function () {
	var i, j, k, l;
	var alive, dead;
	var dx = [-1,0,1];
	var dy = [-1,0,1];
	var nx, ny;

	var nextCells = this.initCells();

	for (i = 0; i < this.size_i; i += 1) {
	for (j = 0; j < this.size_j; j += 1) {
	alive = 0; dead = 0;
	for (k = 0; k < 3; k += 1) {
	for (l = 0; l < 3; l += 1) {
	nx = i+dx[k]; ny = j+dy[l];
	if (0 <= nx && nx < this.size_i && 0 <= ny && ny < this.size_j) {
	if (this.cells[nx][ny]) {
	alive += 1;
	}
	else {
	dead += 1;
	}
	}
	}
	}

	if (this.cells[i][j]) {
	alive -= 1;
	if (alive == 2 \|\| alive == 3) {
	nextCells[i][j] = 1
	}
	else {
	nextCells[i][j] = 0
	}
	}
	else {
	dead -= 1;
	if (alive == 3) {
	nextCells[i][j] = 1;
	}
	else {
	nextCells[i][j] = 0;
	}
	}
	}
	}
	this.cells = nextCells;
	},
	showCells : function () {
	var i,j;
	for (i = 0; i < this.size_i; i += 1) {
	for (j = 0; j < this.size_j; j += 1) {
	if (this.cells[i][j]) {
	this.fillGrid(i, j);
	}
	}
	}
	this.context.restore();
	this.context.save();
	},
	showColoredCells : function () {
	var i,j;
	for (i = 0; i < this.size_i; i += 1) {
	for (j = 0; j < this.size_j; j += 1) {
	if (this.cells[i][j]) {
	this.fillColorGrid(i, j)
	}
	}
	}
	this.context.restore();
	this.context.save();
	},
	randomCells : function () {
	var i, j;
	var rand;
	var cells = this.initCells();
	for (i = 0; i < this.size_i; i += 1) {
	for (j = 0; j < this.size_j; j += 1) {
	rand = Math.floor(Math.random() * 2);
	cells[i][j] = rand;
	}
	}
	return cells
	},
	fillGrid : function (x, y) {
	var context = this.context;
	context.fillStyle = '#000'
	context.fillRect(10 * x, 10 * y, 10, 10);
	},
	fillColorGrid : function (x, y) {
	var colors = ['#0ff','#00f','#0f0','#f0f','#ff0','#f00']
	var color = colors[Math.floor(Math.random() * colors.length)];
	var context = this.context;
	context.fillStyle = color;
	context.fillRect(10 * x, 10 * y, 10, 10);
	},
	// main loop

	clearCanvas : function () {
	this.context.clearRect(0,0,this.width,this.height);
	},
	drawGrid : function () {
	var context = this.context
	for(var x = 0; x <= this.width; x += 10) {
	context.beginPath();
	context.moveTo(x,0);
	context.lineTo(x,this.height);
	context.closePath();
	context.stroke();
	}
	for(var y = 0; y <= this.height; y += 10) {
	context.beginPath();
	context.moveTo(0,y);
	context.lineTo(this.width,y);
	context.closePath();
	context.stroke();
	}
	}
	};

	window.onload = function() {
	var life = new LifeGame();
	life.initGame();

	function loop () {
	life.clearCanvas();
	life.showCells();
	life.stepCells();
	setTimeout(loop, 200);
	}

	loop();
	}