/
index.html
257 lines (217 loc) · 10.2 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
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
<!DOCTYPE html>
<html>
<head>
<title>A Simulation of Life</title>
<link tyle="text/css" rel="stylesheet" href="game-of-life.css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>A Simulation of Life</h1>
<p id="subtitle">A quick explanation of a simulation game</p>
<p id="author">by <a href="http://coolsilon.com/">Jeffrey04</a></p>
</div>
<div id="body">
<h2>This is a story of how neighbours may determine one's lifelihood</h2>
<p>There exists this simple community, which the narrator decides to
represent it with some square boxes. Assuming each of them represents a
cat-like person, and each of them can have anyone of the two states,
which is either living or dead (or yet-to-be-borned).</p>
<div id="intro"></div>
<p>Each person's lifelihood, is determined by how many neighbours
available. Neighbours are the people surrounding the person. Each
evolution may bring in new members to the community, take some of them
off, or nothing changes.</p>
<div id="evolution"></div>
<p>This community values neighbours, so the number of neighbours
directly determines whether a person is able to survive an evolution.
In short,
</p>
<p class="emphasis"><strong>"Having the right amount of neighbours, you
live, otherwise, you die."</strong></p>
<p>There are just 4 rules to be followed, let's go through them 1 by one
</p>
<h3>Dying of loneliness</h3>
<p>We all know what it is like to be left alone, in this community
loneliness is so bad that it may cause one to not survive an evolution.
The person will be dead if there's only 1 or no one around him.</p>
<div id="loneliness"></div>
<p>Just in case you have not noticed, a person's neighbours are
the other 8 surrounding cells.</p>
<h3>Dying of suffocation</h3>
<p>The opposite of loneliness is the feeling of suffocation. When
there are too many people around, we lose the personal space we need.
The same thing applies in this community, and if there are more than 3
people surrounding a person, then the person dies.<p>
<div id="suffocation"></div>
<h3>Optimum survival condition</h3>
<p>Therefore the optimum number of neighbours, is 2 to 3 people.
Everyone has enough room to breathe, and not overwhelmed by too many
neighbours around. I would say this is a win-win situation.</p>
<div id="survive"></div>
<h3>Let's breed, shall we?</h3>
<p>A community keeps moving when there are changes to the structure,
especially when there's an addition of new members. A new member is
born, whenever there are exactly 3 living neighbours around.</p>
<div id="reproduction"></div>
<h3>Patterns</h3>
<p>There are several patterns discovered when people start playing with
the simulation. For instance you have seen one in the example above,
where there were no changes happening regardless how many times you hit
the evolve button. It was an example of <strong>Still lifes</strong>.
</p>
<p>Here is another pattern discovered by others. You can see the pattern
keeps repeating itself after a while. The following pattern is called
a blinker, which is an example of <strong>oscillators</strong>.</p>
<div id="blinker"></div>
<p>And not forgetting <strong>spaceships</strong>, for example this
glider below (press the Automate button to speed it up).</p>
<div id="glider"></div>
<h3>Game of Life</h3>
<p>This game is known as the Game of Life. It was created by John Horton
Conway and you may want to see
<a href="https://www.youtube.com/watch?v=R9Plq-D1gEk">this video</a> for
more interesting facts about the game.</p>
<p>Finally, you can have a play with the following sandbox. Hit the
randomize to generate a board with random living cells.</p>
<div id="sandbox"></div>
<script src="https://code.jquery.com/jquery-2.1.4.js" type="text/javascript"></script>
<script src="http://underscorejs.org/underscore.js" type="text/javascript"></script>
<script src="game-of-life.js" type="text/javascript"></script>
<script type="text/javascript">
(function($) {
$('#intro').game_of_life({
width: 21,
height: 7,
prefix: 'intro-',
init: [
[1, 1], [3, 1], [5, 1], [6, 1], [7, 1], [9, 1], [13, 1], [18, 1],
[1, 2], [3, 2], [5, 2], [9, 2], [13, 2], [17, 2], [19, 2],
[1, 3], [2, 3], [3, 3], [5, 3], [6, 3], [9, 3], [13, 3], [17, 3], [19, 3],
[1, 4], [3, 4], [5, 4], [9, 4], [13, 4], [17, 4], [19, 4],
[1, 5], [3, 5], [5, 5], [6, 5], [7, 5], [9, 5], [10, 5], [11, 5], [13, 5], [14, 5], [15, 5], [18, 5]
],
evolve: false,
reset: false,
randomize: false,
clear: false,
automate: false});
$('#evolution').game_of_life({
prefix: 'evo',
width: 5,
height: 5,
init: [
[2, 0],
[1, 1], [3, 1],
[0, 2], [4, 2],
[1, 3], [3, 3],
[2, 4]
],
evolve: true,
reset: true,
randomize: false,
clear: false,
automate: false
});
$('#loneliness').game_of_life({
prefix: 'loneliness',
width: 3,
height: 3,
init: [[1, 1]],
evolve: true,
reset: true,
randomize: false,
clear: false,
automate: false
});
$('#suffocation').game_of_life({
prefix: 'suffocation',
width: 3,
height: 3,
init: [
[0, 0], [1, 0], [2, 0],
[0, 1], [1, 1], [2, 1],
[0, 2], [1, 2], [2, 2]],
evolve: true,
reset: true,
randomize: false,
clear: false,
automate: false
});
$('#survive').game_of_life({
prefix: 'survive',
width: 4,
height: 4,
init: [
[1, 1], [2, 1],
[1, 2], [2, 2]],
evolve: true,
reset: true,
randomize: false,
clear: false,
automate: false
});
$('#reproduction').game_of_life({
prefix: 'reproduction',
width: 3,
height: 3,
init: [[0, 0], [1, 0], [0, 1]],
evolve: true,
reset: true,
randomize: false,
clear: false,
automate: false
});
$('#blinker').game_of_life({
prefix: 'blinker',
width: 5,
height: 5,
init: [[1, 2], [2, 2], [3, 2]],
evolve: true,
reset: true,
randomize: false,
clear: false,
automate: false
});
$('#glider').game_of_life({
prefix: 'glider',
width: 30,
height: 10,
init: [[1, 3], [2, 3], [3, 3], [3, 2], [2, 1]],
evolve: true,
reset: true,
randomize: false,
clear: false,
automate: true
});
$('#sandbox').game_of_life({
prefix: 'sandbox',
width: 30,
height: 30,
evolve: true,
reset: false,
randomize: true,
clear: true,
automate: true,
disabled: false
});
})(jQuery)
</script>
</div>
<div id="footer">
<h2>Thank you for playing</h2>
<p>I prepared this as part of an assessment test for a job application,
I hope you are somehow enjoying it. The presentation is pretty much
inspired by <a href="http://ncase.me/polygons/">this game</a> made by
<a href="http://vihart.com/">vi hart</a> and
<a href="http://www.patreon.com/ncase">nicky case</a> (though there are
much more visual/UX improvement I should be doing). The source code is
stored at <a href="https://github.com/Jeffrey04/game-of-life">github
</a> for your hacking pleasure, please fork this game as you wish. The
code is licensed under
<a href="https://en.wikipedia.org/wiki/WTFPL">WTFPL</a>. Also, cute cat
face taken from <a href="">here</a>.</a>
</div>
</div>
</body>
</html>