-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
45 lines (42 loc) · 1.78 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
<!DOCTYPE HTML>
<html>
<head>
<title>game of life</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
<h1>conway's game of life</h1>
<p class="lead">imagined using html checkboxes and javascript</p>
</div>
<div class="row">
<div class="col-sm-12">
<div id="">
<p>This is pretty neat. Pulling from <a href="https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life">the Wikipedia article</a>, cells have four rules governing whether they'll live or not:</p>
<ol>
<li>Any live cell with fewer than two live neighbours dies, as if caused by underpopulation.</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 overpopulation.</li>
<li>Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.</li>
</ol>
<p>The game was originally imagined to be played in an infinite plane, with an inifinite number of cells. Computers can't do infinite, so there has to be some way to get around that. I chose to regard 'out of bound' cells as dead cells.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 text-center">
<h4 class="lead">(click the "Next generation" below the grid to 'simulate life')</h4>
<div id="grid" class="game-grid"></div>
<button id="next" class="btn btn-primary">Next generation</button>
</div>
</div>
</div>
</body>
<script src="gameoflife2.js"></script>
</html>