-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
239 lines (149 loc) · 7.37 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Game of Life</title>
<meta
name="description"
content="Developer portfolio HTML, CSS, Javascript and Bootstrap4."
/>
<meta
name="keywords"
content="developer, portfolio, template, dev, html, css, javascript, bootstrap, guim, guim gonzalez, gitub"
/>
<meta name="author" content="Rogelio Caballero" />
<link rel="icon" href="img/terminal.png" type="image/png" />
<!-- Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700|Staatliches"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous"
/>
<!-- Bootstrap CDN -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous"
/>
<!-- Custom css -->
<link rel="stylesheet" href="css/style.css" />
</head>
<body onload="onload()" id="top">
<nav id ="navBar" class="bg-light d-flex flex-column justify-content-center align-items-center mb-4">
<div id="button_2" class="d-flex flex-md-row" >
<a class="nav-link" href="#game"> <button type="button" id="btnhome" class="btn btn-outline-info " >Game</button></a>
<a class="nav-link" href="#about"><button type="button" id="btnabout" class="btn btn-outline-info " >About</button></a>
</div>
</nav>
<section class="section" id="game">
<div class="d-flex flex-column flex-md-row justify-content-center align-items-center">
<div class="d-flex flex-column justify-content-center align-items-center" >
<h3>
Conway's Game Of Life
</h3>
<div class="d-flex flex-column align-items-center m-2">
<div class="d-flex " >
<div class="bg-color mr-5 mb-1">
<input type="color" id="background_color" class="js-bg-color-picker" data-theme-value="--background-color" />
</div>
<div class="slidecontainer ml-5 ">
<input type="range" min="1" max="100" value="20" class="slider" id="myRange">
</div>
</div>
<canvas id="gridCanvas" >
</canvas>
<div class="m-2">
<button type="button" id="btnrandom" class="btn btn-outline-info m-1 ">random</button>
<button type="button" id="btnrun" class="btn btn-outline-info m-1 ">run</button>
<button type="button" id="btnpause" class="btn btn-outline-info m-1 ">pause</button>
<button type="button" id="btnclear" class="btn btn-outline-info m-1 ">clear</button>
</div>
</div>
</div>
<div id="presets" >
<div class="presetCanvas m-1">
<img src="./images/Beacon.png" id="preSet1" class="w-100 h-100" alt="blocks1">
</div>
<div class="presetCanvas m-1">
<img src="./images/Penta.png" id="preSet2" class="w-100 h-100" alt="blocks2">
</div>
<div class="presetCanvas m-1">
<img src="./images/Spaceship.png" id="preSet3" class="w-100 h-100" alt="blocks3">
</div>
<div class="presetCanvas m-1">
<img src="./images/Glider.png" id="preSet4" class="w-100 h-100" alt="blocks4">
</div>
</div>
</div>
</div>
</section>
<section class="section" id="about">
<div class="d-flex flex-column align-items-center m-2">
<div class="card" style="width: 99%">
<div class="card-body">
<div>
<h5>Rules</h4>
<ol>
<li>
Any live cell with fewer than two live neighbours dies, as if 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 neighbors 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>
</div>
</div>
</div>
<div class="card" style="width: 99%">
<div class="card-body">
<h5 class="card-title">What is the Game of Life?</h5>
<p>by Paul Callahan</p>
<h6>The Game</h6>
<p>The Game of Life (or simply Life) is not a game in the conventional sense.
There are no players, and no winning or losing. Once the "pieces" are placed
in the starting position, the rules determine everything that happens later.
Nevertheless, Life is full of surprises! In most cases, it is impossible to
look at a starting position (or pattern) and see what will happen in the future.
The only way to find out is to follow the rules of the game.</p>
<h6>Background</h6>
<p>Life was invented by the mathematician John Conway in 1970. He choose the
rules carefully after trying many other possibilities, some of which caused
the cells to die too fast and others which caused too many cells to be born.
Life balances these tendencies, making it hard to tell whether a pattern will
die out completely, form a stable population, or grow forever.
Life is just one example of a cellular automaton, which is any system in which
rules are applied to cells and their neighbors in a regular grid.
There has been much recent interest in cellular automata, a field of mathematical
research. Life is one of the simplest cellular automata to have been studied, but
many others have been invented, often to simulate systems in the real world.
In addition to the original rules, Life can be played on other kinds of grids with more
complex patterns. There are rules for playing on hexagons arranged in a honeycomb pattern,
and games where cells can have more than two states (imagine live cells with different colors).
</p>
<a href="http://www.math.com/students/wonders/life/life.html" target="_blank" class="card-link">full article</a>
</div>
</div>
</div>
</section>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="data/data.js"></script>
<script src="js/index.js"></script>
</body>
</html>