-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
95 lines (75 loc) · 3.15 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Conway's Game of Life</title>
<link rel="stylesheet" type="text/css" href="lib/css/styles.css">
</head>
<body>
<h1>HTML5 Conway's Game of Life</h1>
<!-- Controls -->
<input data-bind="click: start" type="button" value="Start">
<input data-bind="click: stop" type="button" value="Stop">
<input data-bind="click: clear" type="button" value="Clear">
<br/>
<input data-bind="value: interval" type="range" min="100", max="2000" step="100">
<span data-bind="text: interval"></span> ms
<br/>
Board
<select data-bind="value: boardSize, event: { change: onChangeBoardSize }">
<option>12 x 12</option>
<option>24 x 24</option>
<option>48 x 48</option>
<option>60 x 60</option>
</select>
<select data-bind="event: { change: onChangePattern }">
<option>Default Patterns</option>
<option value="blinker">Blinker</option>
<option value="toad">Toad</option>
<option value="beacon">Beacon</option>
<option value="pulsar">Pulsar</option>
<option value="square">Square</option>
</select>
<a data-bind="click: toogleHelp" href="" >Need Help?</a>
<!-- /Controls -->
<!-- Board -->
<table data-bind="foreach: game.board.lines">
<tr data-bind="foreach: cells">
<td data-bind="css: { 'alive' : active, 'dead': !active() }, click: $root.toggleCellStatus"></td>
</tr>
</table>
<!-- /Board -->
<!-- Links -->
<p>
<a href="https://github.com/nmoliveira/game-of-life" target="_blank">Source Code</a>
</p>
<!-- /Links -->
<!-- Help -->
<div data-bind="visible: helpVisible" id="help" style="display: none">
<a data-bind="click: toogleHelp" href="">Close</a>
<h3>Welcome to Conway's Game of Life</h3>
</p>
The "game" is a zero-player game, meaning that its evolution is determined by its initial configuration and does not require any other input. You can setup an initial configuration by clicking on the cells or selecting one of the predefined patterns. After configuring the initial pattern, just hit start and see the game evolving. You can set the time between each iteration, the lower the interval the faster it evolves.
There are only 4 rules that determines how the game evolves:
<ol>
<li>Any live cell with fewer than two live neighbours dies, as if caused by under-population.</li>
<li>Any live cell with two or three live neighbours lives on to the next generation.</li>
<li>Any live cell with more than three live neighbours dies, as if by overcrowding.</li>
<li>Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.</li>
</ol>
<br/><br/>
<a href="http://en.wikipedia.org/wiki/Conway's_Game_of_Life" target="_blank">Game of Life on Wikipedia</a>
</p>
</div>
<!-- /HELP -->
<script src="lib/js/vendor/knockout.js"></script>
<script src="lib/js/game.js"></script>
<script src="lib/js/game-render.js"></script>
<script type="text/javascript">
window.onload = function () {
var game = new GameOfLife.Game(GameOfLife.Line, GameOfLife.Cell);
var renderer = new GameRender(game);
renderer.init();
};
</script>
</body>
</html>