garyfleming/game-of-life.js

## game-of-life.js
/* An intentionally naive (brute-force), declarative version of Conway's Game
 * of Life.
 *
 * The aim was to write it as quickly as possible, with no tests, and as little
 * regard for developing a domain as possible. That is, it is intentionally
 * naive in as many ways as I could muster. It consequently looks like
 * JavaScript from the early 2000s.
 *
 * The only concession I made was to put sizing and initial population controls
 * near the top, to help me play with it.
 */
var canvas = document.getElementById('game-of-life');
var ctx = canvas.getContext('2d');

//Canvas/cell controls
var cell_size = 10;
var num_rows = canvas.height/cell_size;
var num_columns = canvas.width/cell_size;

//Population controls
var margin = 10;
var sparsity = 0.5;

function buildWorld() {
	var createdWorld = [[]];
	for (row = 0; row < num_rows; row++) {
		createdWorld[row] = new Array(num_columns);
	}
	return createdWorld;
}

function fillCell(ctx, row, column) {
	ctx.fillStyle = "rgb(200,0,0)";
	ctx.fillRect (column * cell_size, row * cell_size, cell_size, cell_size);
}

function clearScreen() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function drawWorld(world) {
	clearScreen();
	for(row = 0; row < num_rows; row++) {
		for (column = 0; column < num_columns; column++) {
			if(world[row][column]) {
				fillCell(ctx, row, column);
			}
		}
	}
}

function randomPopulation(world, margin, sparsity) {
	for(row = margin; row < num_rows - margin; row++) {
	 	for (column = margin; column < num_columns - margin; column++) {
	 		world[row][column] = Math.floor(Math.random() + sparsity) == 1;
		}
	}
}

function liveNeighbourCount(world, row, column) {
	var count = 0;
	var neighbours =
		[[row-1,column-1], [row-1,column],[row-1,column+1],
		[row, column-1],                 [row,column+1],
		[row+1,column-1],  [row+1,column],[row+1,column+1]];
	neighbours.forEach(function(neighbour){
		var row = neighbour[0];
		var column = neighbour[1];
		if(row >= 0 && row < num_rows && column >= 0 && column < num_columns && world[row][column]) {
			count++;
		}
	});
	return count;
}

function tick(world) {
	var newWorld = buildWorld()
	for(row = 0; row < num_rows; row++) {
		for (column = 0; column < num_columns; column++) {
			var count = liveNeighbourCount(world, row, column);
			var alive = world[row][column];
			if (alive && (count == 2 || count == 3)) {
				newWorld[row][column] = true;
			} else if(!alive && count == 3) {
				newWorld[row][column] = true;
			}
		}
	}
	return newWorld;
}

## index.html
<html>
	<head>
		<title>Game of Life</title>
	</head>
	<body>
		<div id="container" width ="400px" >
 			<canvas id="game-of-life" width="400" height="400" style="border: 1px solid black;"></canvas>
		</div>
		<script src="game-of-life.js"></script>
	</body>
</html>
	/* An intentionally naive (brute-force), declarative version of Conway's Game
	* of Life.
	*
	* The aim was to write it as quickly as possible, with no tests, and as little
	* regard for developing a domain as possible. That is, it is intentionally
	* naive in as many ways as I could muster. It consequently looks like
	* JavaScript from the early 2000s.
	*
	* The only concession I made was to put sizing and initial population controls
	* near the top, to help me play with it.
	*/
	var canvas = document.getElementById('game-of-life');
	var ctx = canvas.getContext('2d');

	//Canvas/cell controls
	var cell_size = 10;
	var num_rows = canvas.height/cell_size;
	var num_columns = canvas.width/cell_size;

	//Population controls
	var margin = 10;
	var sparsity = 0.5;

	function buildWorld() {
	var createdWorld = [[]];
	for (row = 0; row < num_rows; row++) {
	createdWorld[row] = new Array(num_columns);
	}
	return createdWorld;
	}

	function fillCell(ctx, row, column) {
	ctx.fillStyle = "rgb(200,0,0)";
	ctx.fillRect (column * cell_size, row * cell_size, cell_size, cell_size);
	}

	function clearScreen() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	}

	function drawWorld(world) {
	clearScreen();
	for(row = 0; row < num_rows; row++) {
	for (column = 0; column < num_columns; column++) {
	if(world[row][column]) {
	fillCell(ctx, row, column);
	}
	}
	}
	}

	function randomPopulation(world, margin, sparsity) {
	for(row = margin; row < num_rows - margin; row++) {
	for (column = margin; column < num_columns - margin; column++) {
	world[row][column] = Math.floor(Math.random() + sparsity) == 1;
	}
	}
	}

	function liveNeighbourCount(world, row, column) {
	var count = 0;
	var neighbours =
	[[row-1,column-1], [row-1,column],[row-1,column+1],
	[row, column-1], [row,column+1],
	[row+1,column-1], [row+1,column],[row+1,column+1]];
	neighbours.forEach(function(neighbour){
	var row = neighbour[0];
	var column = neighbour[1];
	if(row >= 0 && row < num_rows && column >= 0 && column < num_columns && world[row][column]) {
	count++;
	}
	});
	return count;
	}

	function tick(world) {
	var newWorld = buildWorld()
	for(row = 0; row < num_rows; row++) {
	for (column = 0; column < num_columns; column++) {
	var count = liveNeighbourCount(world, row, column);
	var alive = world[row][column];
	if (alive && (count == 2 \|\| count == 3)) {
	newWorld[row][column] = true;
	} else if(!alive && count == 3) {
	newWorld[row][column] = true;
	}
	}
	}
	return newWorld;
	}
	<html>
	<head>
	<title>Game of Life</title>
	</head>
	<body>
	<div id="container" width ="400px" >
	<canvas id="game-of-life" width="400" height="400" style="border: 1px solid black;"></canvas>
	</div>
	<script src="game-of-life.js"></script>
	</body>
	</html>