-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
71 lines (60 loc) · 2.36 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conway's Game of Life</title>
<link href="./styles.css" rel="stylesheet" />
<script src="./scripts/game.js" defer type="module"></script>
</head>
<body>
<div class="container">
<header>
<h1>Conway's Game of Life</h1>
</header>
<main>
<div id="game-board"></div>
<div id="controls">
<div>
<button id="start-btn">Play</button>
<button id="reset-btn">Reset</button>
<select id="grid-size">
<option value="25">25x25</option>
<option value="50">50x50</option>
<option value="75">75x75</option>
<option value="100">100x100</option>
</select>
</div>
<div>
<input type="text" id="generation-input" readonly value="0" disabled>
</div>
<div>
<button id="advance-btn">></button>
</div>
</div>
</main>
<aside>
<h2>What's it?</h2>
<p>The <a href="https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life">Game of Life</a> is a cellular automaton by the British mathematician John Conway in 1970. It is a zero-player game, meaning that its evolution is determined by its initial state, requiring no further input. One interacts with the Game of Life by creating an initial configuration and observing how it evolves</p>
<h2>How does it work?</h2>
<ul>
<li>Any live cell with fewer than two live neighbours dies, as if 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>
</ul>
<h2>How to play?</h2>
<ul>
<li>Click on the tiles of the board to draw any pattern you want.</li>
<li>Click 'Play' and watch what happens.</li>
<li>Can you preddict what's gonna happen next?</li>
</ul>
</aside>
<footer>
<hr>
<a href="https://github.com/alande-amorim">Alande Amorim</a> |
<a href="https://github.com/alande-amorim/game-of-life-js">GitHub</a>
</footer>
</div>
</body>
</html>