jjok/game-of-life.html

## game-of-life.html
<!DOCTYPE html>
<html lang="en-GB">
<head>
	<meta charset="UTF-8" />
	<title>Conway's Game of Life - CoffeeScript</title>
	<style>
		body { margin:0; padding:0; background:#EEE; }
		canvas { background:#FFF; }
		#stats { position:absolute; top:1%; left:0.5%; border:1px dashed #CCC; padding:1em; background: rgba(255, 255, 255, 0.8); }
	</style>
</head>
<body>

<canvas id="game"></canvas>
<div id="stats">
	<div>Generation: <span id="generation">0</span></div>
	<div>Living cells: <span id="living">0</span></div>
</div>

<script type="text/coffeescript">

	#
	#
	#
	class GameOfLife

		__cells: []

		__context = null

		__cell_size = 0

		__rows: 0

		__columns: 0

		__generation: 1

		constructor: (@__cells, @__context, @__cell_size) ->
			@__rows = @__cells.length
			@__columns = @__cells[0].length

		#
		# Get the number of living cells.
		# @visibility public
		# @return integer
		#
		getLiving: ->
			total = 0
			total += (cell for cell in column when cell).length for column in @__cells
			return total

		#
		# @visibility public
		# @return integer
		#
		getGeneration: ->
			return @__generation

		#
		# Update cells.
		# @visibility public
		#
		update: ->
			@__cells = (@__updateRow row, x for row, x in @__cells)
			@__generation++

		#
		# Update each cell in the given row.
		# @visibility private
		#
		__updateRow: (row, x) ->
			(@__updateCell cell, x, y for cell, y in row)

		#
		# @visibility private
		# @return boolean
		#
		__updateCell: (cell, x, y) ->
			neighbours = []
			neighbours.push @__cells[x - 1]?[y - 1]? and @__cells[x - 1][y - 1]
			neighbours.push @__cells[x][y - 1]? and @__cells[x][y - 1]
			neighbours.push @__cells[x + 1]?[y - 1]? and @__cells[x + 1][y - 1]
			neighbours.push @__cells[x - 1]?[y] and @__cells[x - 1][y]
			neighbours.push @__cells[x + 1]?[y] and @__cells[x + 1][y]
			neighbours.push @__cells[x - 1]?[y + 1]? and @__cells[x - 1][y + 1]
			neighbours.push @__cells[x][y + 1]? and @__cells[x][y + 1]
			neighbours.push @__cells[x + 1]?[y + 1]? and @__cells[x + 1][y + 1]

			#neighbours2 = ((cell for cell, j in row when y - 2 < j < y + 2) for row, i in @__cells when x - 2 < i < x + 2)
			#console.log neighbours2

			alive_neighbours = (neighbour for neighbour in neighbours when neighbour)
			#console.log alive_neighbours

			(not cell and alive_neighbours.length is 3) or (cell and 1 < alive_neighbours.length < 4)

		#
		# Clear all cells and draw living cells
		# @visibility public
		#
		draw: ->
			@__context.clearRect 0, 0, @__rows * @__cell_size, @__columns * @__cell_size
			@__drawRow row, y for row, y in @__cells

		#
		# @visibility private
		#
		__drawRow: (row, y) ->
			@__drawCell x, y for cell, x in @__cells when @__cells[x][y]

		#
		# Draw a cell to the canvas context at the given position.
		# @visibility private
		#
		__drawCell: (x, y) ->
			#x = x * cell_size
			#y = y * cell_size
			#@__context.fillRect x, y, @__cell_size, @__cell_size
			@__context.fillRect x * cell_size, y * cell_size, @__cell_size, @__cell_size


	# Game settings
	cell_size = 20
	columns = 50
	#columns = Math.floor document.documentElement.clientWidth / cell_size
	rows = 30
	#rows = Math.floor document.documentElement.clientHeight / cell_size

	# Populate cells array
	cells = ((Math.random() > 0.8 for i in [1..rows]) for i in [1..columns])
	#console.log cells

	canvas = document.getElementById "game"
	canvas.width = columns * cell_size
	canvas.height = rows * cell_size
	context = canvas.getContext "2d"

	generation = document.getElementById "generation"
	living = document.getElementById "living"

	game = new GameOfLife cells, context, cell_size
	game.draw()

	generation.textContent = game.getGeneration()
	living.textContent = game.getLiving()

	# Run the game
	int = @setInterval () ->
		game.update()
		game.draw()

		# Draw some stats
		generation.textContent = game.getGeneration()
		living.textContent = game.getLiving()
	, 500

</script>

<script type="text/javascript" src="http://coffeescript.org/extras/coffee-script.js"></script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en-GB">
	<head>
	<meta charset="UTF-8" />
	<title>Conway's Game of Life - CoffeeScript</title>
	<style>
	body { margin:0; padding:0; background:#EEE; }
	canvas { background:#FFF; }
	#stats { position:absolute; top:1%; left:0.5%; border:1px dashed #CCC; padding:1em; background: rgba(255, 255, 255, 0.8); }
	</style>
	</head>
	<body>

	<canvas id="game"></canvas>
	<div id="stats">
	<div>Generation: <span id="generation">0</span></div>
	<div>Living cells: <span id="living">0</span></div>
	</div>

	<script type="text/coffeescript">

	#
	#
	#
	class GameOfLife

	__cells: []

	__context = null

	__cell_size = 0

	__rows: 0

	__columns: 0

	__generation: 1

	constructor: (@__cells, @__context, @__cell_size) ->
	@__rows = @__cells.length
	@__columns = @__cells[0].length

	#
	# Get the number of living cells.
	# @visibility public
	# @return integer
	#
	getLiving: ->
	total = 0
	total += (cell for cell in column when cell).length for column in @__cells
	return total

	#
	# @visibility public
	# @return integer
	#
	getGeneration: ->
	return @__generation

	#
	# Update cells.
	# @visibility public
	#
	update: ->
	@__cells = (@__updateRow row, x for row, x in @__cells)
	@__generation++

	#
	# Update each cell in the given row.
	# @visibility private
	#
	__updateRow: (row, x) ->
	(@__updateCell cell, x, y for cell, y in row)

	#
	# @visibility private
	# @return boolean
	#
	__updateCell: (cell, x, y) ->
	neighbours = []
	neighbours.push @__cells[x - 1]?[y - 1]? and @__cells[x - 1][y - 1]
	neighbours.push @__cells[x][y - 1]? and @__cells[x][y - 1]
	neighbours.push @__cells[x + 1]?[y - 1]? and @__cells[x + 1][y - 1]
	neighbours.push @__cells[x - 1]?[y] and @__cells[x - 1][y]
	neighbours.push @__cells[x + 1]?[y] and @__cells[x + 1][y]
	neighbours.push @__cells[x - 1]?[y + 1]? and @__cells[x - 1][y + 1]
	neighbours.push @__cells[x][y + 1]? and @__cells[x][y + 1]
	neighbours.push @__cells[x + 1]?[y + 1]? and @__cells[x + 1][y + 1]

	#neighbours2 = ((cell for cell, j in row when y - 2 < j < y + 2) for row, i in @__cells when x - 2 < i < x + 2)
	#console.log neighbours2

	alive_neighbours = (neighbour for neighbour in neighbours when neighbour)
	#console.log alive_neighbours

	(not cell and alive_neighbours.length is 3) or (cell and 1 < alive_neighbours.length < 4)

	#
	# Clear all cells and draw living cells
	# @visibility public
	#
	draw: ->
	@__context.clearRect 0, 0, @__rows * @__cell_size, @__columns * @__cell_size
	@__drawRow row, y for row, y in @__cells

	#
	# @visibility private
	#
	__drawRow: (row, y) ->
	@__drawCell x, y for cell, x in @__cells when @__cells[x][y]

	#
	# Draw a cell to the canvas context at the given position.
	# @visibility private
	#
	__drawCell: (x, y) ->
	#x = x * cell_size
	#y = y * cell_size
	#@__context.fillRect x, y, @__cell_size, @__cell_size
	@__context.fillRect x * cell_size, y * cell_size, @__cell_size, @__cell_size


	# Game settings
	cell_size = 20
	columns = 50
	#columns = Math.floor document.documentElement.clientWidth / cell_size
	rows = 30
	#rows = Math.floor document.documentElement.clientHeight / cell_size

	# Populate cells array
	cells = ((Math.random() > 0.8 for i in [1..rows]) for i in [1..columns])
	#console.log cells

	canvas = document.getElementById "game"
	canvas.width = columns * cell_size
	canvas.height = rows * cell_size
	context = canvas.getContext "2d"

	generation = document.getElementById "generation"
	living = document.getElementById "living"

	game = new GameOfLife cells, context, cell_size
	game.draw()

	generation.textContent = game.getGeneration()
	living.textContent = game.getLiving()

	# Run the game
	int = @setInterval () ->
	game.update()
	game.draw()

	# Draw some stats
	generation.textContent = game.getGeneration()
	living.textContent = game.getLiving()
	, 500

	</script>

	<script type="text/javascript" src="http://coffeescript.org/extras/coffee-script.js"></script>

	</body>
	</html>