-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
73 lines (66 loc) · 2.94 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3D Maze Game with 3JS</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Carme&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<link rel="icon" href="bOt.jpg" />
</head>
<body>
<div id="loading-screen">
<div id="loading-text">Loading 3D-MAZE</div>
<div id="loading-bar">
<div id="loading-progress"></div>
</div>
<div id="loading-percentage">0%</div>
</div>
<div class="container">
<h1>3D-MAZE</h1>
<button id="play-button">Play</button>
</div>
<button id="fullscreenToggle" class="control-button hidden game-control">
<svg
id="fullscreenIcon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
d="M344 0L488 0c13.3 0 24 10.7 24 24l0 144c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39-87 87c-9.4 9.4-24.6 9.4-33.9 0l-32-32c-9.4-9.4-9.4-24.6 0-33.9l87-87L327 41c-6.9-6.9-8.9-17.2-5.2-26.2S334.3 0 344 0zM168 512L24 512c-13.3 0-24-10.7-24-24L0 344c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39 87-87c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8z"
/>
</svg>
<svg
id="exitFullscreenIcon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
style="display: none"
>
<path
d="M439 7c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H296c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39 87-87zM72 272h144c13.3 0 24 10.7 24 24v144c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39-87 87c-9.4 9.4-24.6 9.4-33.9 0L7 473c-9.4-9.4-9.4-24.6 0-33.9l87-87-39-39c-6.9-6.9-8.9-17.2-5.2-26.2s12.5-14.8 22.2-14.8z"
/>
</svg>
</button>
<button id="viewToggle" class="hidden">Change View</button>
<div id="landscape-prompt" class="hidden">
Please rotate your device to landscape mode for the best experience.
</div>
<div id="joystick-container" class="hidden">
<div id="left-joystick" class="joystick"></div>
<div id="right-joystick" class="joystick"></div>
</div>
<div id="cursor-notification" class="hidden">Press ESC to show cursor</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nipplejs/0.9.0/nipplejs.min.js"></script>
<script src="script.js"></script>
</body>
</html>