jjok · October 13, 2015 05:57
diff --git a/game-of-life.html b/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>