gameoflife/index.html at master · cdadia/gameoflife · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<html>
	<head>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
		<script type="text/javascript" charset="utf-8">
			var dimension = 30;
			var liveCellProbability = 0.5;
			var board;
			var cells;

			$(document).ready(function() {
				board = $('#board');
				initializeBoard();
				cells = board.find('td');
				randomizeCells();
				simulateGeneration();
			});

			function initializeBoard() {
				var rows = [];
				for(var noOfRows = 0; noOfRows < dimension; noOfRows++) {
					rows.push('<tr>');
					for(var noOfColumns = 0; noOfColumns < dimension; noOfColumns++) {
						rows.push('<td>&nbsp;</td>');
					}
					rows.push('</tr>');
				}
				rows = rows.join('');
				board.append($(rows));
			}

			function randomizeCells() {
				for(var row = 0; row < dimension; row++) {
					for(var column = 0; column < dimension; column++) {
						var cell = getCell(row, column);
						if(Math.random() > liveCellProbability) { cell.addClass('alive'); }
						else { cell.removeClass('alive'); }
					}
				}
			}

			function simulateGeneration() {
				setupNextGeneration();
				renderNextGeneration();
				setTimeout('simulateGeneration()', 200);
			}

			function setupNextGeneration() {
				for(var row = 0; row < dimension; row++) {
					for(var column = 0; column < dimension; column++) {
						var cell = getCell(row, column);
						var neighbours = getLiveNeighboursCount(row, column);
						cell.attr('isAlive', 'false');

						if(isCellAlive(row, column)) {
							if(neighbours === 2 || neighbours === 3) {
								cell.attr('isAlive', 'true');
							}
						} else if(neighbours === 3) {
							cell.attr('isAlive', 'true');
						}
					}
				}
			}

			function renderNextGeneration() {
				cells.each(function() {
					var cell = $(this);
					cell.removeClass('alive');
					if(cell.attr('isAlive') === 'true') cell.addClass('alive');
					cell.removeAttr('isAlive');
				});
			}

			function getLiveNeighboursCount(row, column) {
				var count = 0;
				if(isCellAlive(row-1, column-1)) count++;
				if(isCellAlive(row, column-1)) count++;
				if(isCellAlive(row+1, column-1)) count++;
				if(isCellAlive(row-1, column)) count++;
				if(isCellAlive(row+1, column)) count++;
				if(isCellAlive(row-1, column+1)) count++;
				if(isCellAlive(row, column+1)) count++;
				if(isCellAlive(row+1, column+1)) count++;
				return count;
			}

			function isCellAlive(row, column) {
				return getCell(row, column).attr('class') === 'alive';
			}

			function getCell(x, y) {
				if(x >= dimension) { x = 0; }
				if(y >= dimension) { y = 0; }
				if(x < 0) { x = dimension - 1; }
				if(y < 0) { y = dimension - 1; }

				return $(cells[y * dimension + x]);
			}
		</script>
		<style type="text/css" media="screen">
			td {
				border: solid 1px grey;
				width: 15px;
			}

			td.alive {
				background-color: red;
			}
		</style>
	</head>
	<body id="index">
		<table id="board">
		</table>
	</body>
</html>