This repository has been archived by the owner on Nov 6, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
training.html
384 lines (343 loc) · 14.9 KB
/
training.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
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css" type="text/css">
<script src="https://cdn.jsdelivr.net/ace/1.2.4/min/ace.js"></script>
<script type="text/javascript" src="async.js"></script>
<script type="text/javascript" src="bot.js"></script>
<textarea id="random" type="javascript/worker" style="visibility:hidden;">
function main(arg){
action=["LEFT","RIGHT","UP","DOWN","SHOOT"]
var result=action[Math.floor(Math.random() *5)]
return result
}
</textarea>
</head>
<body>
<div id="preview" class="markdown-body">
<div class="line">
<div class="bloc B3 M6 S6">
<h1>Tank War</h1></div>
<div class="bloc B1 M1 S0">
<p><a href="./home.html"><h4>basics</h4></a></p>
</div>
<div class="bloc B1 M1 S0">
<p><a href="./training.html"><h4><strong>training</strong></h4></a></p>
</div>
<div class="bloc B1 M1 S0">
<p><a href="./arena.html"><h4>arena</h4></a></p>
</div>
<div class="bloc B8 M4 S1"></div>
<div class="bloc B1 M2 S1 imageInside">
<p><img alt="alt text" title="Logo Title Text 1" src="rock.png"></p>
</div>
</div>
<div class="line">
<div class="bloc B1 M1 S1">
<hr>
</div>
</div>
<div class="line">
<div class="bloc B9 M9 S9">
<h2>Ok lets get started</h2></div>
<div class="bloc B1 M1 S1"></div>
<div class="bloc B1 M1 S1">
<hr>
</div>
<div class="bloc B1 M1 S1"></div>
<div class="bloc B9 M9 S9">
<ul>
<li>First things you need to be confortable with: this website</li>
<li>All steps are divided in two panel: the code window and the simultation window</li>
<li>You write your code on the code panel, and clicking play will tun the simulation </li>
<li>Your tank is green, and you are refered as <strong>rookie</strong> on the score panel. </li>
<li>In this page, you will play against one or many <strong>random tanks</strong>, which choose their action at random</li>
</ul>
</div>
</div>
<div class="line">
<div class="bloc B9 M9 S9">
<h2><br><br>Basics</h2></div>
<div class="bloc B1 M1 S1"></div>
<div class="bloc B1 M1 S1">
<hr>
</div>
<div class="bloc B1 M1 S1"></div>
</div>
<div class="line">
<div class="bloc B1 M1 S1">
<p>Your whole IA lives in a javascript function. This fonction take an argument parameter, that encaspulate all the datas you need to know about the state of the board. The programm expects you to return a command, in the form of a string</p>
<p>Your options are:</p>
<ul>
<li><strong>UP</strong> : moves the tank one case upward</li>
<li><strong>DOWN</strong> : moves the tank one case downward</li>
<li><strong>LEFT</strong> : moves the tank one case to the left</li>
<li><strong>RIGHT</strong> : moves the tank one case to the right</li>
<li><strong>SHOOT</strong> : launch a rocket in the direction you were facing</li>
</ul>
</div>
<div class="bloc B9 M9 S9">
<p>If you dont send an order or your order does not fall within one of these options, your tank will <strong>do nothing</strong>. If you send an impossible order (run over another tank or shoot when you are out of missiles), your tank will
<strong>do nothing</strong>. If your programm takes more than 500ms to answer, tour tank will <strong>explode!</strong> </p>
</div>
<div class="bloc B9 M9 S9">
<h3>one quick exemple (click on the editor)</h3></div>
</div>
<div class="line">
<div class="bloc B1 M0 S0">
</div>
<div class="editor bloc B4 M9 S9" id="exemple1" type="javascript/worker" onClick='startGame("zoneexemple1",[editor1.getValue(),document.querySelector("#random").value],["rookie","randomBot"],"score1");'>
function main(arg){
console.log(arg);
action=["LEFT","RIGHT","UP","DOWN","SHOOT"]
var result=action[Math.floor(Math.random() *5)]
return result
} </div>
<div class="bloc B4 M9 S9 imageInside" style="padding:0px; display:none;" id="zoneexemple1">
</div>
<div class="bloc B1 M1 S1">
</div>
</div>
<div class="line">
<div class="bloc B1 M1 S0">
</div>
<div id="score1" style="padding:0px; display:none;"class="bloc B8 M4 S1 imageInside">
<table>
<thead>
<tr>
<th>Name</th>
<th align="center">Score</th>
</tr>
</thead>
<tbody >
</tbody>
</table>
</div>
<div class="bloc B1 M1 S0">
</div>
</div>
<script type="text/javascript">
var editor1 = ace.edit("exemple1");
editor1.setTheme("ace/theme/monokai");
editor1.getSession().setMode("ace/mode/javascript");
var rect = document.getElementById("exemple1").getBoundingClientRect();
var width = window.innerWidth
if (width < 800) {
document.getElementById("exemple1").style.height = "100px";
} else {
document.getElementById("exemple1").style.height = "300px";
}
</script>
</div>
<div class="line">
<div class="bloc B1 M1 S1">
<p>The behaviour in this exemple is quite simple:</p>
<ul>
<li>It takes the array of possible moves</li>
<li>It picks one at random</li>
<li>It sends one back</li>
</ul>
<p>This is the random bot operation, and rookie, I expect you to do a little bette than that !</p>
</div>
</div>
<div class="line">
<div class="bloc B9 M9 S9">
<h2><br><br>Getting the data</h2></div>
<div class="bloc B1 M1 S1"></div>
<div class="bloc B1 M1 S1">
<hr>
</div>
<div class="bloc B1 M1 S1"></div>
</div>
<div class="line">
<div class="bloc B9 M9 S9">
<p>To make the most of this little brain of yours, you will need some data to work on. At each turn, your fonction get sent some pretty usefull data! </p>
<p>The data is a javascript object, organised as followed:</p>
</div>
<div class="bloc B1 M1 S9">
<ul>
<li>Data: object
<ul>
<li>BULLET : int </li>
<li>HISTORY: array</li>
<li>X : int</li>
<li>Y : int</li>
</ul>
</li>
</ul>
</div>
<div class="bloc B1 M1 S9">
<ul>
<li>Ennemies : array of objects
<ul>
<li>DEAD: boolean</li>
<li>HISTORY : array</li>
<li>X: int</li>
<li>Y: int</li>
</ul>
</li>
</ul>
</div>
<div class="bloc B1 M1 S9">
<ul>
<li>Missiles : array of objects
<ul>
<li>DIR : direction</li>
<li>X : int </li>
<li>Y : int</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="line">
<div class="bloc B1 M1 S1">
<p>The easiest way for you to test it is to print it to your console. Open the devTools (F12, Ctrl + Shift + I or Cmd + Opt + I) an run the next simulation where <code> console.log(arg);
</code>has been added</p>
</div>
</div>
<div class="line">
<div class="bloc B1 M0 S0">
</div>
<div class="editor bloc B4 M9 S9" id="exemple2" type="javascript/worker" onClick='startGame("zoneexemple2",[editor2.getValue(),document.querySelector("#random").value],["rookie","randomBot"],"score2");'>
function main(arg){
console.log(arg);
action=["LEFT","RIGHT","UP","DOWN","SHOOT"]
var result=action[Math.floor(Math.random() *5)]
return result
} </div>
<div class="bloc B4 M9 S9 imageInside" style="padding:0px; display:none;" id="zoneexemple2">
</div>
<div class="bloc B1 M1 S1">
</div>
</div>
<div class="line">
<div class="bloc B1 M1 S0">
</div>
<div id="score2" style="padding:0px; display:none;"class="bloc B8 M4 S1 imageInside">
<table>
<thead>
<tr>
<th>Name</th>
<th align="center">Score</th>
</tr>
</thead>
<tbody >
</tbody>
</table>
</div>
<div class="bloc B1 M1 S0">
</div>
</div>
<script type="text/javascript">
var editor2 = ace.edit("exemple2");
editor2.setTheme("ace/theme/monokai");
editor2.getSession().setMode("ace/mode/javascript");
var rect = document.getElementById("exemple2").getBoundingClientRect();
var width = window.innerWidth
if (width < 800) {
document.getElementById("exemple2").style.height = "100px";
} else {
document.getElementById("exemple2").style.height = "300px";
}
</script>
</div>
<div class="line">
<div class="bloc B9 M9 S9">
<h2><br><br>Training</h2></div>
<div class="bloc B1 M1 S1"></div>
<div class="bloc B1 M1 S1">
<hr>
</div>
<div class="bloc B1 M1 S1"></div>
</div>
<div class="line">
<div class="bloc B9 M9 S9">
<p>Well it seems like we got the basics covered! Now it's time to start training! Here you can train againt multiple opposant, so get cracking</p>
</div>
</div>
<div class="line">
<div class="bloc B1 M0 S0">
</div>
<div class="editor bloc B9 M9 S9" id="exemple3" type="javascript/worker" onClick='startGame("zoneexemple3",[editor3.getValue(),document.querySelector("#random").value,document.querySelector("#random").value,document.querySelector("#random").value],["rookie","randomBot1","randomBot2","randomBot3"],"score3");'>
function main(arg){
action=["LEFT","RIGHT","UP","DOWN","SHOOT"]
var result=action[Math.floor(Math.random() *5)]
return result
} </div>
<div class="bloc B9 M9 S9 imageInside" style="padding:0px; display:none; height:300px;" id="zoneexemple3">
</div>
<div class="bloc B1 M1 S1">
</div>
</div>
<div class="line">
<div class="bloc B1 M1 S0">
</div>
<div id="score3" style="padding:0px; display:none;"class="bloc B8 M4 S1 imageInside">
<table>
<thead>
<tr>
<th>Name</th>
<th align="center">Score</th>
</tr>
</thead>
<tbody >
</tbody>
</table>
</div>
<div class="bloc B1 M1 S0">
</div>
</div>
<script type="text/javascript">
document.addEventListener("keydown", function(e) {
if (e.keyCode == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
e.preventDefault();
console.log("CTRL S")
localStorage.setItem('code', editor3.getValue())
}
}, false);
var editor3 = ace.edit("exemple3");
editor3.setTheme("ace/theme/monokai");
editor3.getSession().setMode("ace/mode/javascript");
if(localStorage.getItem('code')!=""){
editor3.setValue(localStorage.getItem('code'))
}
var rect = document.getElementById("exemple3").getBoundingClientRect();
var width = window.innerWidth
if (width < 800) {
document.getElementById("exemple3").style.height = "100px";
} else {
document.getElementById("exemple3").style.height = "300px";
}
function submitcode(){
console.log(editor3.getValue());
var result = prompt("You are a fighter now rookie. You deserve a Name! If you want to claim your robot, use your github handle! ");
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://localhost:3000/newbot", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify({
value: editor3.getValue(),
name: result
}));
document.getElementById("submitzone").innerHTML="Well "+result+" is going to combat! Thanks!";
}
</script>
</div>
<div class="line">
<div class="bloc B9 M9 S9" id="">
<h2 id="submitzone">Think your code is good enough to make it to the big league? Well <a onClick="submitcode()">submit it!</a> It will be tested in battle in the arena</h2>
</div>
</div>
<div class="line">
<div class="bloc B1 M1 S1">
<hr>
</div>
</div>
<div class="line">
<div class="bloc B9 M9 S9">
<h5 style="margin-bottom:0px;">Made by <a href="http://seed-up.io"><p>Seed-Up</p></a></h5>
<h5 style="margin-top:0px;">2016</h5></div>
</div>
</div>
</body>
</html>