-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgravity-ships.html
78 lines (78 loc) · 3.08 KB
/
gravity-ships.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gravity Ships: the game</title>
<link rel="stylesheet" href="gravity-ships.css">
<script src="gravity-ships.js"></script>
</head>
<body onload="start();">
<main>
<div class="lienzo">
<canvas id="canvas"></canvas>
</div>
</main>
<div class="pause"><p>.</p></div>
<aside>
<div class="configuration">
<select class="language">
<option value="en">English</option>
<option value="es">Español</option>
</select>
<button class="helpIcon">help</button>
<div class="triple">☰</div>
<div class="navesContainer">
<div class="naves"></div>
<button id="createShip">ADD NEW SHIP</button>
</div>
</div>
</aside>
<!-- Modal window for choosing a key -->
<!-- From https://medium.com/@nerdplusdog/a-how-to-guide-for-modal-boxes-with-javascript-html-and-css-6a49d063987e -->
<div class="modal">
<div class="modal-content">
<span class="close-btn">×</span>
<p id="pressKey">Press any key...</p>
</div>
</div>
<div class="confirmDelete">
<div class="deleteContent">
<p id="confirmShipDelete">Do you <em>really</em> want to delete this ship?</p>
<div>
<span class="buttonConfirm" id="yes">Yes!</span>
<span class="buttonConfirm" id="no">No...</span>
</div>
</div>
</div>
<div class="helpModal">
<div class="helpContent">
<span class="close-btn-help">×</span>
<ul>
<li>
<canvas id="shipHelpCanvas"></canvas>
<span id="helpOne">The ship obeys the principles of
<strong>newtonian mechanics</strong> and <strong>gravitation</strong>.
</span>
</li>
<li id="helpTwo">Its energy cells get replenished via <strong>solar cells</strong>:
the nearer to the sun the ship is, the faster they get charged.
</li>
<li>
<div id="controlHelp">
<input type="color" name="" id="" value="#FF756D" style="grid-area: color;">
<button style="grid-area: area1;">↑</button>
<button style="grid-area: area2;">←</button>
<button style="grid-area: area3;">↓</button>
<button style="grid-area: area4;">→</button>
<button style="grid-area: trash;">🗑</button>
</div>
<span id="helpThree">
You can change the <strong>color</strong> of the ship, its control <strong>keys</strong>
or even <strong>delete</strong> it by clicking in the corresponding buttons.
</span>
</li>
</ul>
</div>
</div>
</body>
</html>