Conway's Game of Life in Javascript

Published: 23 Jun 2016

Conway's Game of Life is probably the most interesting and popular automata simulation. A automata simulation is when a set of cells get given simple rules of how to react within their environment that when played out over time (in steps) create a patterns, often complex and organic looking in nature.

I've been interested in Conway's work and specifically his simulation Game of Life for a while, both on a theorical level and as a fun way to learn programming languages by implementing it. Recently I finally got round to program this one using vanilla javascript and the html5 Canvas API.

js

// setup canvas
var canvas = document.getElementById('gameCanvas');
var ctx = canvas.getContext('2d')
// canvas and grid size defaults
var gridWidth = 140;
var gridHeight = 70;
var gridSquareWidth = 10;
canvas.width = gridWidth * gridSquareWidth;
canvas.height = gridHeight * gridSquareWidth;
canvas.style.width = canvas.width;
canvas.style.height = canvas.height;
var grid = [];
var gridNext = [];
// create default grid array
// sudo random noise
for (var x = 0; x < gridWidth; x++) {
	grid[x] = []
	gridNext[x] = []
	for (var y = 0; y < gridHeight; y++) {
		grid[x][y] = [];
		gridNext[x][y] = []
		var rand = Math.random()*100;
		if (rand > 44) {
			grid[x][y] = 1;
		}
	}
}
// life init grid
function life(){
	// touch each grid coord
	for (var x = 0; x < gridWidth; x++) {
		for (var y = 0; y < gridHeight; y++) {
			// counts alive or dead for neighbours
			var count = countNearby(x,y);
			if(grid[x][y] == 0){
				if(count == 3){
					// life is born
					gridNext[x][y] = 1;
				}
			}else{
				if(count < 2 || count > 3){
					// underpopulation & overpopulation
					gridNext[x][y] = 0;
				}else{
					gridNext[x][y] = 1;
				}
			}
		}
	}
	// replace old grid with new population grid
	grid = gridNext;
}
// count grid neighbours
function countNearby(x,y){
	var count = 0;
	// count all nearby sqaures
	counter(x-1,y-1);
	counter(x-1,y);
	counter(x-1,y+1);
	counter(x,y-1);
	counter(x,y+1);
	counter(x+1,y-1);
	counter(x+1,y);
	counter(x+1,y+1);
	function counter(x,y){
		// if x and y on the grid
		if(x > 0 && x < gridWidth && y > 0 && y < gridHeight){
			if (grid[x][y] == 1) count++;
		}
	}
	// return count value
	return count;
}
// game update
function update(dt) {
	// iterate simulation rules
	life();
	// draw result
	draw();
}
function draw() {
// clear canvas
	ctx.fillStyle = '#fee';
	ctx.fillRect(0, 0, canvas.width, canvas.height);
	for (var x = 0; x < gridWidth; x++) {
		for (var y = 0; y < gridHeight; y++) {
			if (grid[x][y] == 1) {
				ctx.fillStyle = "#ee66aa";
				ctx.fillRect(x * gridSquareWidth, y * gridSquareWidth, gridSquareWidth, gridSquareWidth);
			}
		}
	}
}
// The main game loop
var lastTime;
function gameLoop() {
    var now = Date.now();
    var dt = (now - lastTime) / 1000.0;
    update(dt);
    lastTime = now;
	window.setTimeout(gameLoop, 50);
};
// start game
gameLoop();

Clone it on Github:

• https://github.com/benbyford/game-of-life-js

References:

• http://www.conwaylife.com/wiki/Conway's_Game_of_Life
• http://www.bitstorm.org/gameoflife/