-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
278 lines (250 loc) · 12.4 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
<!DOCTYPE html>
<html>
<head>
<title><Dev Battle> by Salmon</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="lib/bootstrap-slider/bootstrap-slider.min.css">
<link rel="stylesheet" type="text/css" href="lib/codemirror/codemirror.css">
<link rel="stylesheet" type="text/css" href="lib/codemirror/codemirror__fullscreen.css">
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
</head>
<body style="display: none;">
<div class="menu">
<div class="top">
<img class="logo" src="assets/salmon-logo.png" />
</div>
<div class="bottom">
<div class="content">
<h1><DEV BATTLE></h1>
<div class="slide slide-1">
<h2>
<span href="" class="typewrite" data-period="2000" data-type='[ "Hello and welcome!", "Can you escape?", "They said you can run fast.", "♥ to Develop." ]'>
<span class="wrap"></span>
</span>
</h2>
<button type="button" class="next btn btn-primary">start</button>
</div>
<div class="slide slide-2">
<h2>
Your objective is to escape and <br />
avoid being eaten by the chaser. <br />
Other players will be trying to escape too... <br />
Last person standing wins :)
</h2>
<button type="button" class="prev btn btn-primary">prev</button>
<button type="button" class="next btn btn-primary">next</button>
</div>
<div class="slide slide-3">
<h2>
You will now spend 10 minutes writing the code that<br />
will control your character throughout the whole game.</br />
Each turn, the same code you have written will execute
over and over, making your character move across the map.
</h2>
<button type="button" class="prev btn btn-primary">prev</button>
<button type="button" class="next btn btn-primary">next</button>
</div>
<div class="slide slide-4">
<h2>
When you're done, your code will be saved and stored.<br />
At the end of the night, everyone who has participated<br />
will spawn in this same map, and their code will drive<br />
their own character's movement to attempt to escape.<br />
</h2>
<button type="button" class="prev btn btn-primary">prev</button>
<button type="button" class="next btn btn-primary">next</button>
</div>
<div class="slide slide-5">
<h2>
The chaser becomes faster as the game progresses,<br />
so everyone will get caught eventually, meaning there is no <br />
perfect strategy. Instead, try to stay alive for as long<br />
as possible to maximise your chances of winning.
</h2>
<button type="button" class="prev btn btn-primary">prev</button>
<button type="button" class="next btn btn-primary">next</button>
</div>
<div class="slide slide-6">
<h2>
Remember there is no safe area or place you're heading.<br />
In fact, you don't know where the chaser spawns exactly,<br />
so it's better to be reactive to his position rather than<br />
trying to aim for a specific area of the map.
</h2>
<button type="button" class="prev btn btn-primary">prev</button>
<button type="button" class="next btn btn-primary">next</button>
</div>
<div class="slide slide-7">
<h2>
For the moment, it's only you and the chaser on the map.<br />
The game will loop constantly, which should help you see<br />
how your code is performing. On the real game, other players<br />
will be there too. Remember you're only creating the <br />
instructions for your player at this stage, and not<br/>
actually playing the final game itself.
</h2>
<button type="button" class="prev btn btn-primary">prev</button>
<button type="button" class="next btn btn-primary">next</button>
</div>
<div class="slide slide-8">
<h2>
Use the documentation to understand how to<br />
query the environment and characters around you. <br />
For example, you will be able to know where the chaser is <br />
in relation to your position so you can run the opposite way!
</h2>
<button type="button" class="prev btn btn-primary">prev</button>
<button type="button" class="next btn btn-primary">next</button>
</div>
<div class="slide slide-9">
<h2>
Attempting to move onto someone else's square our outside<br />
the map boundaries will lose you the turn, meaning you'll<br />
lag on the escape. If your character steps into water,<br />
it will drown and die, so check where you're going!
</h2>
<button type="button" class="prev btn btn-primary">prev</button>
<button type="button" class="next btn btn-primary">next</button>
</div>
<div class="slide slide-10">
<h2>
Remember you can use all the ES6 features that are supported<br />
in the latest version of Chrome. Your code will not be<br />
transpiled or compiled in any way but executed as is.
</h2>
<button type="button" class="prev btn btn-primary">prev</button>
<button type="button" class="next btn btn-primary">next</button>
</div>
<div class="slide slide-11">
<h2>
When you are ready, enter your nickname below,<br />
tighten your seat belt and click start.<br />
<input type="text" name="playerName" placeholder="Nickname" /><br />
Good luck!
</h2>
<button type="button" class="prev btn btn-primary">prev</button>
<button type="button" class="start btn btn-primary">start</button>
</div>
</div>
</div>
</div>
<div class="backdrop"></div>
<div class="background"></div>
<canvas id="main"></canvas>
<span class="timer"></span>
<img class="compass" src="assets/compass.png" />
<div class="left-panel">
<button class="restart btn btn-primary">Restart</button>
<label class="pause btn btn-primary">
<input type="checkbox" />
Pause
</label>
<span class="turn-ui">Turn: <b>0</b></span>
<input data-slider-id="slider-turn-speed" type="text" data-slider-value="750"/>
<div class="log">
<p>This is your console. You will only receive game messages here that will inform you about what's happening.</p>
</div>
</div>
<div class="right-panel">
<label class="simulate-multiple btn btn-primary" data-toggle="tooltip" data-placement="top" title="Your clones will all use the same player code you write!">
<input type="checkbox" />
Simulate multiple players
</label>
<button class="documentation btn btn-primary" data-toggle="modal" data-target="#documentationModal">Documentation</button>
<button class="fullscreen btn btn-primary">Fullscreen</button>
<div class="code"></div>
</div>
<!-- Documentation modal -->
<div class="modal fade" id="documentationModal" tabindex="-1" role="dialog" aria-labelledby="documentationModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="documentationModalLabel">Documentation</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h4>The fundamentals</h4>
<p>
<span class="code-example">me.move('south')</span><br />
<span class="outputs">// → *your player moves south*</span><br />
<span class="explanation">Move in any of the following directions: 'north', 'south', 'east' or 'west'. The movement will happen when you take your turn. You can only move once per turn, so the first time this method executes in your code will be the one that counts.</span>
</p>
<p>
<span class="code-example">me.whatIsInDirection('east')</span><br />
<span class="outputs">// → one of either 'land', 'water', 'boundary' or 'character' (character can either be a player or the chaser)</span><br />
<span class="explanation">Find what is around you. This will help you move to tiles safely and avoid drowning in water, or losing turns when trying to move onto an occupied tile our outside the map boundaries.</span>
</p>
<p>
<span class="code-example">me.whereIsChaser()</span><br />
<span class="outputs">// → one of either 'north', 'south', 'east', 'west', 'north-east', 'north-west', 'south-east', 'south-west'</span><br />
<span class="explanation">Find out where chaser is relative to you. This will give you the direction in which chaser is the closest to you. Tip: if chaser is north, run south!</span>
</p>
<h4>The map</h4>
<img src="assets/map.png" />
<img src="assets/compass.png" />
<p> The map is 40x40.<br />
At the top corner, you have x: 0 and y: 0, whilst at the bottom, you have x: 40 and y: 40.<br />
And at the right corner, you have x: 40 and y: 0, whilst at the left corner, you have x: 0 and y: 40.<br />
This means you transverse from north to south through y, and from east to west through x.
</p>
<h4>Others</h4>
<p>
<span class="code-example">log('hello')</span><br />
<span class="outputs">// → 'hello'</span><br />
<span class="explanation">Log in the in-game console, similar to what you would do with console.log() in the browser console.</span>
</p>
<p>
<span class="code-example">pause()</span><br />
<span class="outputs">// → *pauses game*</span><br />
<span class="explanation">Pause the game. Useful specially when used inside a function or an if statement to freeze the game in a specific situation, where you will be able to run log() over and over until you remove the pause() statement.</span>
</p>
<p>
<span class="code-example">log(me.pos.x, me.pos.y)</span><br />
<span class="outputs">// → 13</span><br />
<span class="outputs">// → 11</span><br />
<span class="explanation">Find your coordinates in the map.</span>
</p>
<p>
<span class="code-example">log(chaser.pos.x, chaser.pos.y)</span><br />
<span class="outputs">// → 3</span><br />
<span class="outputs">// → 4</span><br />
<span class="explanation">Find the chaser's coordinates in the map.</span>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/lib/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/lib/lodash-4.17.11.min.js"></script>
<script type="text/javascript" src="lib/bootstrap-tooltips__popper.js"></script>
<script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="lib/bootstrap-slider/bootstrap-slider.min.js"></script>
<script type="text/javascript" src="lib/typewriter-effect.js"></script>
<script type="text/javascript" src="lib/download.js"></script>
<script type="text/javascript" src="lib/codemirror/codemirror.js"></script>
<script type="text/javascript" src="lib/codemirror/codemirror__fullscreen.js"></script>
<script type="text/javascript" src="lib/codemirror/codemirror__javascript.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript" src="js/game.js"></script>
<script type="text/javascript" src="js/board.js"></script>
<script type="text/javascript" src="js/player.js"></script>
<script type="text/javascript" src="js/chaser.js"></script>
<script type="text/javascript" src="js/helpers.js"></script>
<script type="text/javascript" src="js/ui.js"></script>
<script type="text/javascript" src="js/logger.js"></script>
<audio controls>
<source src="assets/audio.mp3" type='audio/mp3'>
<p>Your user agent does not support the HTML5 Audio element.</p>
</audio>
<script type="text/javascript">
window.addEventListener('load', game.init, false);
</script>
</body>
</html>