uiur · September 8, 2011 14:02
diff --git a/life.html b/life.html
 <!DOCTYPE HTML>
 <html>
 <head>
 </head>
 <body>
  <script src='life.js'></script>
 </body>
 </html>
diff --git a/life.js b/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();
	}