-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
429 lines (417 loc) · 20.8 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
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
<!doctype html>
<html>
<head>
<title>NN Sim</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="app">
<form action="/" method="get">
<!-- Menu Bar {{{ -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Intellibots</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">File <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#" class="js-new"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> New Game</a></li>
<li class="divider"></li>
<li><a href="#" class="js-load"><span class="glyphicon glyphicon-open" aria-hidden="true"></span> Load...</a></li>
<li style="display: none;"><a href="#" class="js-save"><span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span> Save...</a></li>
</ul>
</li>
</ul>
<div class="navbar-form navbar-left">
<span class="btn btn-success js-btn js-start">Run <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></span>
<span class="btn btn-success play-button js-run" style="display: none;"><span class="glyphicon glyphicon-play" aria-hidden="true"></span> Play</span>
<span class="btn btn-primary js-evolve" style="display: none;">Evolve <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span></span>
<span class="btn btn-default js-retry" style="display: none;">Retry <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span></span>
<span class="btn btn-warning js-reset" style="display: none;">Kill All <span class="glyphicon glyphicon-fire" aria-hidden="true"></span></span>
</div>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="http://github.com/rocksolidwebdesign/jsbots">
Fork me on <strong>GitHub</strong>
</a>
</li>
</ul>
<div class="navbar-form navbar-right">
<button class="btn btn-default" type="button" data-toggle="collapse" data-target="#tutorial" aria-expanded="false" aria-controls="tutorial">
Tutorial <span class="glyphicon glyphicon-question-sign"></span>
</button>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Menu Bar }}} -->
<div class="container">
<div class="collapse" id="tutorial">
<div class="panel panel-default nn-config-panel">
<div class="panel-heading">
<strong>Tutorial</strong>
</div>
<div class="panel-body">
<div class="tutorial-container">
<p><strong>The Goal</strong></p>
<p>
Eat as many targets as possible.
</p>
<ul>
<li>
Extra credit for robots that seem to seek out the targets.
</li>
<li>
Beat your high score for a given time limit.
</li>
</ul>
<p><strong>Quick Start</strong></p>
<p>
First just play a game.
</p>
<ul>
<li>
Right now :)
</li>
<li>
Go ahead, click the
<span class="btn btn-success js-btn js-start btn-sm">Run <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></span>
button.
</li>
<li>
The default settings are enough.
</li>
</ul>
<p>
Not very interesting, they just spin in circles right?
</p>
<ul>
<li>
Now start over, change some settings and see if you can fix that.
</li>
</ul>
<p>
Help, it's slow!
</p>
<ul>
<li>
Go to the "Game Settings" section at the bottom.
</li>
<li>
Try fewer robots and fewer targets
</li>
<li>
Try a smaller width and height for the playing field.
</li>
<li>
If you've changed the neuron layers, try taking out some neurons and layers.
</li>
</ul>
<p><strong>Basics</strong></p>
<p>
<em>STEP 1</em>: Create some robot brains:
</p>
<ul>
<li>In the "Neural Network" section, click the "Add Layer" button.</li>
<li>Change the number of neurons in that layer to something between approximately 1 and 100.</li>
<li>Add another layer if you like.</li>
<li>Add even more neurons and layers if you like.</li>
</ul>
<p>
Your computer will, however, have a limit as to how many neurons and layers it can process. If your game slows down, try reducing the number of layers and neurons.
</p>
<p>
<em>STEP 2</em>: Now decide what to "feed" the robot brains:
</p>
<ul>
<li>Check some checkboxes in the "Features" area.</li>
<li>Try different combinations of options to see which ones give you the best results.</li>
</ul>
<p>
If have you set up your robots well, you will probably eventually see some interesting behavior (more than just spinning in circles).
</p>
<p>
The goal of the game is to find a combination of neuron layers and features that demonstrate interesting behavior.
</p>
<p>
You may need to click the "Kill All" button a couple times before you see some robots that do more than spin in circles. This will randomly regenerate a new set of robots based on the brain configuration you chose in steps 1 and 2.
</p>
<p><strong>Training Your Robots</strong></p>
<p>
The next goal is to evolve your robots to have even <em>more</em> interesting behavior. You can do this by clicking the "Evolve" button once you are in game. <strong class="text-warning">Warning</strong>: this will destroy all your current robots except for the best ones, so if you want to save your progress, do so before clicking evolve.
</p>
<p>
Evolving will combine "genes" from two of the best robots and create new robots. A few of the best robots will also stay to play another round. You can see how many rounds your bot has been in the game in the "Age" column underneath the playing field.
</p>
<p><strong>Scoring</strong></p>
<p>
Your scores are really just to help you see when and whether your robots are actually improving beyond random chance. The score is based on the time limit and represents the score at the time the timer hits that limit.
</p>
<p>
By default this means that your score is how many targets you collected in 2 and a half minutes. Your high score will be the best score you've been able to achieve in your past games.
</p>
<p><strong>Saving and Loading Games</strong></p>
<p>
The "File" menu lets you save, load and start over. You must get an account at <a href="http://www.firebase.com/">Firebase.com</a> if you want to be able to save your games. Get a firebase account and then put the URL of your firebase database into the "Firebase URL" field in the "Preferences" section.
</p>
</div>
</div>
</div>
</div>
<p>
Time limit: <input size="2" type="text" name="time_limit" class="js-game-time-limit" value="2.5"> minutes
</p>
</div>
<!-- Config Screen {{{ -->
<div class="js-new-game-settings config-screen container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default nn-config-panel">
<div class="panel-heading">
<strong>Neural Networks</strong>
</div>
<div class="panel-body form-horizontal">
<p>
Setup the layers and number of neurons in each layer for the robot brains.
</p>
<div class="layers">
<input type="text" name="inputs_qty" class="js-inputs-qty" disabled="disabled" value="1"> <strong>INPUTS</strong>
</div>
<p>
<em>The number of inputs depends on how many features are checked in the features column.</em>
</p>
<div class="panel panel-default">
<div class="panel-heading">
Layers <span class="btn btn-info btn-xs js-add-layer"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Layer</span>
</div>
<div class="panel-body">
<div class="js-layers">
</div>
</div>
</div>
<div class="layers">
<input type="text" name="output_layer" value="2" disabled="disabled"> <strong>OUTPUTS</strong>
</div>
<p>
<em>The number of outputs is always 2, an output to control each wheel.</em>
</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<strong>Features</strong>
</div>
<div class="panel-body">
<p>
Choose which information the robot brains should use.
</p>
<div>
<input type="checkbox" name="inputs" class="js-feature" data-size="1" data-field-name="distance" checked="checked"> Target Distance<br>
<input type="checkbox" name="inputs" class="js-feature" data-size="2" data-field-name="nearest_coord"> Target Position (x,y absolute)<br>
<input type="checkbox" name="inputs" class="js-feature" data-size="2" data-field-name="nearest_vector"> Target Direction (x,y relative)<br>
<input type="checkbox" name="inputs" class="js-feature" data-size="1" data-field-name="speed"> Feet Per Second<br>
<!--<input type="checkbox" name="inputs" class="js-feature" data-size="1" data-field-name="closing_speed"> Approach Speed<br>-->
<input type="checkbox" name="inputs" class="js-feature" data-size="1" data-field-name="lspeed"> Left Wheel Speed<br>
<input type="checkbox" name="inputs" class="js-feature" data-size="1" data-field-name="rspeed"> Right Wheel Speed<br>
<input type="checkbox" name="inputs" class="js-feature" data-size="1" data-field-name="wheel_diff"> Wheel Speed Difference<br>
<input type="checkbox" name="inputs" class="js-feature" data-size="1" data-field-name="wheel_ratio"> Wheel Speed Ratio<br>
<input type="checkbox" name="inputs" class="js-feature" data-size="2" data-field-name="position"> Robot Position (x,y absolute)<br>
<input type="checkbox" name="inputs" class="js-feature" data-size="2" data-field-name="heading"> Heading Direction (x,y relative)<br>
<input type="checkbox" name="inputs" class="js-feature" data-size="1" data-field-name="angle"> Heading Angle (degrees absolute)<br>
<input type="checkbox" name="inputs" class="js-feature" data-size="1" data-field-name="angle_diff"> Angle Difference (degrees relative)
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<strong>Preferences</strong>
</div>
<div class="panel-body">
<p>
Firebase URL: <input type="text" name="firebase_url" class="js-db-url" size="60" value="">
</p>
</div>
</div>
<div class="panel panel-default advanced-options">
<div class="panel-heading">
<strong>Advanced Options</strong>
</div>
<div class="panel-body form-horizontal">
<p>
<input type="text" size="2" name="crossover_chance" class="js-crossover-chance" value="40">% Chromosome Mutation Probability
<em>Possiblity that a child will be based on two parents, otherwise child will simply be a mutated form of one parent.</em>
</p>
<p>
<input type="text" size="2" name="mutation_chance" class="js-gene-mutation-chance" value="3.5">% Gene Mutation Probability<br>
<em>When looking for mutations, possibility of mutating an individual gene.</em>
</p>
<p>
<input type="text" size="2" name="first_order_chance" class="js-first-order-chance" value="80">% Best Fitness Selection
<em>Probability that parents will be selected from the highest fitness individuals, otherwise the second highest class will be used.</em>
</p>
<p>
<input type="text" size="2" name="unfit_chance" class="js-unfit-chance" value="20">% Low Fitness Probability
<em>Chance that one parent (but not both) from a pair will be low fitness.</em>
</p>
<p>
<input type="text" size="2" name="new_chance" class="js-new-chance" value="10">% All New Probability
<em>Percentage chance that a child will be completely randomly generated and not based on any parent genes.</em>
</p>
<p>
Keep the <input type="text" size="2" name="num_to_keep" class="js-num-to-keep" value="4"> highest fitness members
<em>Number of highest fitness members to keep in the population when evolving a new generation.</em>
</p>
</div>
</div>
<div class="panel panel-default advanced-options">
<div class="panel-heading">
<strong>Game Settings</strong>
</div>
<div class="panel-body form-horizontal">
<p>
<input type="text" name="speed_scale" class="js-speed-scale" value="200"> Motion Speed Percent
</p>
<p>
<input type="text" name="num_bots" class="js-num-robots" value="25"> Number of Robots
</p>
<p>
<input type="text" name="num_targets" class="js-num-targets" value="35"> Number of Targets
</p>
<p>
<input type="text" name="field_width" class="js-field-width" value="1024"> Field Width (px)
</p>
<p>
<input type="text" name="field_height" class="js-field-height" value="576"> Field Height (px)
</p>
<div class="hide">
<p>
<input type="checkbox" name="use_teleport" class="js-teleport" value="true"> Enable teleport on field edges
</p>
</div>
</div>
</div>
</div>
<!-- Config Screen }}} -->
<!-- Game Screen {{{ -->
<div class="js-run-game-screen" style="display: none;">
<div class="js-playing-field canvas-container">
<div class="well well-sm container">
<div class="row">
<div class="col-md-3">High Score: <strong class="js-high-score">0</strong></div>
<div class="col-md-3">Last Score: <strong class="js-top-score">0</strong></div>
<div class="col-md-3">Best Bot: <em class="js-top-name"></em> found <strong class="js-top-bot">0</strong></div>
<div class="col-md-3"><strong class="js-minutes">0</strong> Generation #<strong class="js-generation">1</strong></div>
</div>
</div>
<canvas class="canvas js-canvas0 js-canvas" style="display: none;"></canvas>
<canvas class="canvas js-canvas1 js-canvas" style="display: none;"></canvas>
</div>
<div class="container">
<div class="row">
<div class="settings col-md-9">
<div class="panel panel-default">
<div class="panel-heading">
<strong>Bot Stats</strong>
</div>
<div class="panel-body">
<div class="bot-stats-container">
<table class="table table-striped table-bordered table-condensed">
<thead>
<th style="text-align: center;">DNA</th>
<th>Name</th>
<th class="bot-stat"> Age </th>
<th class="bot-stat"> Score </th>
<th class="bot-stat"> Found </th>
<th class="bot-stat"> Avg Find Time </th>
<th class="bot-stat"> Avg Find Distance </th>
</thead>
<tbody class="js-bot-stats-list bot-stats-list">
</tbody>
</table>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h4>DNA Inspector</h4>
<p>
Genes for: <em class="js-current-dna-name"></em>
</p>
<p>
<textarea cols="60" rows="10" class="js-chromosome-output chromosome-display-output"></textarea>
</p>
</div>
<div class="col-md-6">
<h4>Console</h4>
<p>
</p>
<div class="js-messages well messages-output"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-display-config settings col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
<strong>Game Config</strong>
</div>
<div class="panel-body">
<div><strong>Neural Networks</strong></div>
<ul class="js-network-layers-config list-group">
</ul>
<div><strong>Features</strong></div>
<ul class="js-inputs-list-config list-group">
</ul>
<div><strong>Evolution</strong></div>
<div class="params">
<div>Mutation Chance <span class="js-config-display-crossover-chance"></span>%</div>
<div>Percentage Mutation <span class="js-config-display-gene-chance"></span>%</div>
<div>High Fitness Chance <span class="js-config-display-high-chance"></span>%</div>
<div>Low Fitness Chance <span class="js-config-display-low-chance"></span>%</div>
<div>All New Chance <span class="js-config-display-new-chance"></span>%</div>
<div>Keep Qty <span class="js-config-display-keep-qty"></span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Game Screen }}} -->
<div class="hide">
<img class="js-img-sweeper" src="img/sweeper.png" alt="Robot">
<img class="js-img-t0" src="img/treasure.png" alt="Treasure">
<img class="js-img-t1" src="img/treasure_on.png" alt="Found Treasure">
</div>
</form>
</div>
<script type="text/javascript" src="vendor/handlebars-v2.0.0.js"></script>
<script type="text/javascript" src="vendor/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="vendor/underscore-min.js"></script>
<script type="text/javascript" src="vendor/backbone-min.js"></script>
<script type="text/javascript" src="vendor/firebase.js"></script>
<script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="vendor/faker.js"></script>
<script type="text/javascript" src="vendor/require.js" data-main="js/main.js"></script>
</body>
</html>