-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
426 lines (272 loc) · 12.5 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
<!--==============================================
PART 1: Welcome to me web game tutorial!
Our goal here is to build a space shooter.
At any time during this tutorial you can change
the code to test how it works. Don't worry if you
break it, you can always undo and try it again.
We are gonna use three languages, HTML, CSS and JS.
If you are not familiar with then, please
take some time just to learn the basics:
https://www.w3schools.com/html/
https://www.w3schools.com/css/
https://www.w3schools.com/js/
Now that we are familiar with our languages,
let's put'em to good use.
HTML are the files that are downloaded
by the browser when a user open any web page.
When you go to a website like:
http:// www.site.com/someFile.txt
As expected, the default server configuration
will download the file "someFile.txt".
But when you don't write the file and go to:
http://www.site.com
servers will most likely respond with the
"index.html" located in the corresponding
directory. as if you typed:
http://www.site.com/index.html
So this is OUR index.html, our main structure.
The game will have only one HTML file,
this will make things easier!
So lets start our HTML5 coding!
We will tell the browser that we are using the
last version of HTML with the doctype declaration.
==============================================-->
<!DOCTYPE html>
<!--==============================================
That's it, now we are ready to write down our
elements. Let's start diving into HTML markup.
==============================================-->
<html>
<!--==============================================
In HTML we have a basic structure that divides
the head (meta data) and the body (content).
Let's start with the meta data.
==============================================-->
<head>
<!--==============================================
Now we are inside out HTML head. Braaains!!!
Here we'll import our CSS files, this files will
tell the browser the style of our HTML elements.
The head is a good place for them because when the
browser starts to render the page, we want all this
style data to be already defined.
The <link> tag will download and apply the style
pointed in the "href" attribute.
==============================================-->
<link href="P02-styles.css" rel="stylesheet" type="text/css">
<!--==============================================
As you might have guessed by the file name,
we are going to dive into styling on part 2.
The last thing we are going to put in the head is
the HTML title. It will tell the browser what to
write at the window/tab top bar.
==============================================-->
<title>Space Game Title</title>
<!--==============================================
We want to support mobile device screen size.
This meta tag will inform smartphone browsers how
to render our game dimensions correctly.
==============================================-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<!--==============================================
We are done with our head elements,
so let's close our tag:
==============================================-->
</head> <!-- close head -->
<!--==============================================
Time for some body work!
Here we gonna put the elements that will appear
on the user interface screen and our JS scripts.
We are going to use only 10 types of HTML tags
in our body:
1: Title headings: <h1>Title</h1>
2: Divisions to nest other elements: <div><...></div>
3: We use a canvas to draw things: <canvas>Text</canvas>
4: A caption for our sliders <label>Text</label>
5: Input sliders to costumize our ships: <input type="range" />
7: Buttons for user to interaction: <button>Text</button>
7: Scrips for Javascript: <script>
We could (and probably should) use other tags,
since HTML should be as semantic as possible.
But let's keep it simple for this tutorial.
So now we have all we need to start our
<body> structure.
==============================================-->
<body>
<!--==============================================
All our content will live
inside a container <div>, this will make easy
for us to center it on screen.
With the class attribute we can name our elements
and later we will be able to reference or query
them in our CSS and JS code with SELECTORS.
If you are not familiar with this
concept you can learn about it here:
https://www.w3schools.com/cssref/css_selectors.asp
==============================================-->
<div class="container">
<!--==============================================
Elements are rendered on screen in order of
appearance (last elements are on top),
unless you change this with your CSS code.
So the first thing on our container will be our
<canvas> element because we want it below all
other elements.
The easiest way to understand the canvas element
is to think of it as a Microsoft's Paint where
you can draw with JS code.
We will learn how to use the canvas on P07, but
if you are curious, you can quickly learn the
basic stuff in here:
https://www.w3schools.com/graphics/canvas_intro.asp
==============================================-->
<canvas class="screen">No canvas support</canvas>
<!--==============================================
Next we will build our user interface.
As before let's put it all in a div,
for styling and organization. HTML allows
a div to have other div childs, that creates
a tree like structure that after parsed by the
browser is called DOM.
https://www.w3schools.com/js/js_htmldom.asp
==============================================-->
<div class="ui">
<!--==============================================
Let's add a link to the game repository.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
==============================================-->
<a href="https://github.com/rafaelcastrocouto/P2P-Web-Game-Tutorial" target="_blank">Github</a>
<!--==============================================
We will build two interfaces for thew user, the
ship sliders. and the in-game controls.
Let's start with the ship user interface menu.
We will also put them all inside a <div>
==============================================-->
<div class="shipMenu">
<!--==============================================
The game title will have a bigger font, so we
put it into a heading tag.
==============================================-->
<h1>Space Game</h1>
<!--==============================================
Now let's add some sliders, they will
allow the player to customize their ship.
The default values for the range elements are:
<input type="range" min="0" max="100" step="1" value="50">
Since those default values are fine for us,
I will omit them for brevity's sake,
but try to keep them in mind.
Let's make three slider: attack, speed and control.
Each one of them will be preceded by a explanatory
text, inside a <label> tag.
==============================================-->
<!-- attack slider -->
<label for="attack">Attack: X OR Space</label>
<input name="attack" type="range" />
<!-- speed slider -->
<label for="speed">Speed: W or Up Arrow</label>
<input name="speed" type="range" />
<!-- control slider -->
<label for="control">Control: A-D or Left-Right</label>
<input name="control" type="range" />
<!--==============================================
The next item in our user interface is a button.
There's no game without a button, right?
The "play" button will allow the player close
the ship customization menu and start playing.
We are going make it work with JavasCript.
==============================================-->
<button name="play" disabled>Play</button>
</div> <!-- close div.shipMenu -->
<!--==============================================
The next menu will start hidden and only appear
after the play button is pressed.
==============================================-->
<div class="inGameMenu hidden">
<!--==============================================
Our player scores will be a have just three labels.
==============================================-->
<div class="highScores">
<label></label>
<label></label>
<label></label>
</div>
<!--==============================================
The next inputs will allow users to play on mobile
devices by tounching or by clicking with the mouse.
==============================================-->
<div class="mobileControls">
<button name="up">Move</button>
<!--==============================================
Our last buttons will allow player to edit their
ship customization and to shoot.
==============================================-->
<button name="edit">Edit</button>
<!--==============================================
The third column will hold the turn buttons and
the shoot button, so let's group them.
Let's also group up the movement buttons to make
it easier to control their position.
==============================================-->
<div class="column3">
<div class="turnControls">
<button name="left"><</button>
<button name="right">></button>
</div> <!-- close div.turnControls -->
<!--==============================================
And our last button will allow shooting.
==============================================-->
<button name="shoot">Shoot</button>
<!--==============================================
That's all of our game user interface structure,
let's not forget to close all div elements.
==============================================-->
</div> <!-- close div.column3 -->
</div> <!-- close div.mobileControls -->
</div> <!-- close div.inGameMenu -->
</div> <!-- close div.ui -->
<!--==============================================
Above all other HTML stuff we are going to add
an old TV screen effect.
==============================================-->
<canvas class="screenEffect"></canvas>
</div> <!-- close div.container -->
<!--==============================================
The last thing we need to do in the HTML
is to import all the JS code.
The <script> tag will to just that, we just need
to write down each "src" attribute.
It's important to remember that they will
be executed in order.
4web is the module that will take care of our
network sharing the P2P connections and use
the revolt channel as our signaling service.
Learn more about importing modules here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
==============================================-->
<script src="./lib/4web.js" type="module"></script>
<!--==============================================
Now we list all JS code we are going to learn
in the following lessons:
==============================================-->
<!-- P01 index.html that's the file we are right now -->
<!-- P02-styles.css we've already imported it in the head -->
<script src="P03-world-asteroids.js" type="text/javascript"></script>
<script src="P04-player-physics.js" type="text/javascript"></script>
<script src="P05-user-input.js" type="text/javascript"></script>
<script src="P06-canvas-draw.js" type="text/javascript"></script>
<script src="P07-tv-stars.js" type="text/javascript"></script>
<script src="P08-player-ship.js" type="text/javascript"></script>
<script src="P09-audio-oscillator.js" type="text/javascript"></script>
<script src="P10-game-network.js" type="text/javascript"></script>
<!--==============================================
And that's the end of our game HTML,
now we can close the <body> and the <html>.
==============================================-->
</body> <!-- close body -->
</html> <!-- close html -->
<!--==============================================
Next we will learn how to style our elements and
make them shine with our CSS code.
So go on and open the "P02-styles.css" file.
==============================================-->