-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
181 lines (174 loc) · 6.57 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
<!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>Conway's Game of Life</title>
<meta property="og:description" content="Tadeusz Dudkowski, Github Page, Cellular Automaton Conway's Game of Life">
<meta property="og:image" content="https://tdudkowski.github.io/img/glider.jpg">
<meta property="og:url" content="https://tdudkowski.github.io/Game-Of-Life/">
</head>
<link rel="stylesheet" href="style.css">
<body>
<nav><a href="https://tdudkowski.github.io/">to Github Page</a> | <a href="https://github.com/tdudkowski/Game-Of-Life">repo
of Game of Life</a></nav>
<section class="board">
<!-- <div data-key="0110" class="margin"></div> -->
<div data-key="0111"></div>
<div data-key="0112"></div>
<div data-key="0113"></div>
<div data-key="0114"></div>
<div data-key="0115"></div>
<div data-key="0116"></div>
<div data-key="0117"></div>
<div data-key="0118"></div>
<div data-key="0119"></div>
<div data-key="0120"></div>
<!-- <div data-key="0210" class="margin"></div> -->
<div data-key="0211"></div>
<div data-key="0212"></div>
<div data-key="0213"></div>
<div data-key="0214"></div>
<div data-key="0215"></div>
<div data-key="0216"></div>
<div data-key="0217"></div>
<div data-key="0218"></div>
<div data-key="0219"></div>
<div data-key="0220"></div>
<!-- <div data-key="0310" class="margin"></div> -->
<div data-key="0311"></div>
<div data-key="0312"></div>
<div data-key="0313"></div>
<div data-key="0314"></div>
<div data-key="0315"></div>
<div data-key="0316"></div>
<div data-key="0317"></div>
<div data-key="0318"></div>
<div data-key="0319"></div>
<div data-key="0320"></div>
<!-- <div data-key="0410" class="margin"></div> -->
<div data-key="0411"></div>
<div data-key="0412"></div>
<div data-key="0413"></div>
<div data-key="0414"></div>
<div data-key="0415"></div>
<div data-key="0416"></div>
<div data-key="0417"></div>
<div data-key="0418"></div>
<div data-key="0419"></div>
<div data-key="0420"></div>
<!-- <div data-key="0510" class="margin"></div> -->
<div data-key="0511"></div>
<div data-key="0512"></div>
<div data-key="0513"></div>
<div data-key="0514"></div>
<div data-key="0515"></div>
<div data-key="0516"></div>
<div data-key="0517"></div>
<div data-key="0518"></div>
<div data-key="0519"></div>
<div data-key="0520"></div>
<!-- <div data-key="0610" class="margin"></div> -->
<div data-key="0611"></div>
<div data-key="0612"></div>
<div data-key="0613"></div>
<div data-key="0614"></div>
<div data-key="0615"></div>
<div data-key="0616"></div>
<div data-key="0617"></div>
<div data-key="0618"></div>
<div data-key="0619"></div>
<div data-key="0620"></div>
<!-- <div data-key="0710" class="margin"></div> -->
<div data-key="0711"></div>
<div data-key="0712"></div>
<div data-key="0713"></div>
<div data-key="0714"></div>
<div data-key="0715"></div>
<div data-key="0716"></div>
<div data-key="0717"></div>
<div data-key="0718"></div>
<div data-key="0719"></div>
<div data-key="0720"></div>
<!-- <div data-key="0810" class="margin"></div> -->
<div data-key="0811"></div>
<div data-key="0812"></div>
<div data-key="0813"></div>
<div data-key="0814"></div>
<div data-key="0815"></div>
<div data-key="0816"></div>
<div data-key="0817"></div>
<div data-key="0818"></div>
<div data-key="0819"></div>
<div data-key="0820"></div>
<!-- <div data-key="0910" class="margin"></div> -->
<div data-key="0911"></div>
<div data-key="0912"></div>
<div data-key="0913"></div>
<div data-key="0914"></div>
<div data-key="0915"></div>
<div data-key="0916"></div>
<div data-key="0917"></div>
<div data-key="0918"></div>
<div data-key="0919"></div>
<div data-key="0920"></div>
<!-- <div data-key="1010" class="margin"></div> -->
<div data-key="1011"></div>
<div data-key="1012"></div>
<div data-key="1013"></div>
<div data-key="1014"></div>
<div data-key="1015"></div>
<div data-key="1016"></div>
<div data-key="1017"></div>
<div data-key="1018"></div>
<div data-key="1019"></div>
<div data-key="1020"></div>
</section>
<div class="remote">
<div class="counter">
<p>Generation: </p><span>0</span><button class="reset">Reset counter</button>
</div>
<button class="first_mover">[ CLICK ]</button>
</div>
<main>
<div>
<p>Cellular Automaton - <strong>Conway's Game of Life</strong> (<a href="https://en.wikipedia.org/wiki/Conway's_Game_of_Life">en.wikipedia.org/wiki/Conway's_Game_of_Life</a>)</p>
<h3>Rules</h3>
<ul>
<li>Any living cell with < 2 living neighbors dies.</li>
<li>Any living cell with == (2||3) living neighbors lives.</li>
<li>Any living cell with > 3 living neighbors dies.</li>
<li>Any dead cell with == 3 living neighbors becomes a live cell.</li>
</ul>
<h3>Border Rules</h3>
<p>Conway designed this Game of Life for an infinitive grid, but in real world of small apps (like this) the
border is inevitable, real, and it must have rules. In any case they are arbitrary. Borders are non-canonical.</p>
<ul>
<li>Border of the Board is a dead edge, any nonexistend but imaginable Cell behind it has turned out
possibility to became Black (aka living) in any conditions</li>
<li>Cells on the border have counted values only of an existing (visilble) neighbors</li>
</ul>
</div>
<div>
<h3>Info</h3>
<p>At this moment engine works, and transformation is correct (glider moves fine). As far as I tested all is OK.
Engine can be much more optimized.</p>
<ul>
<li>Click on a square to change its color black/white - white is default at start, this is non-life. Living
Cell is black.</li>
<li>Button click makes one cycle of Life.</li>
<li>Cell can be clicked/modified at any moment.</li>
</ul>
<h3>ToDo</h3>
<ul>
<li>Optimising the engine</li>
<li>Make it pseudoinfinitive: add two or three row on each side, all invisible for user with killing border on
the real edge, in fact I started doing it, but this is real boring and tedious work.</li>
</ul>
<div>
</ul>
</main>
<script src="main.js"></script>
</body>
</html>