-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
180 lines (154 loc) · 8.38 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Deep Betting - Emanuele Rucci</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<!-- Run npx parcel index.html to run everything -->
</head>
<body>
<div class="progress-bar-container">
<label for="progress-bar">Loading experience...</label>
<progress id="progress-bar" value="0" max="100"> </progress>
</div>
<div class="initial-screen ">
<i class="fa-solid fa-gear" id="settings-button"></i>
<img src="./assets/Robot.png" class="robot-img"/>
<!-- <img src="./assets/Preview.gif" class="robot-img"/> -->
<div class="initial-screen-container">
<h1 class="game-title">Deep Betting</h1>
<h2 class="credits" style="margin-bottom: 10px;"><b> Emanuele Rucci, 2053183 -- An interactive graphics course project</b></h2>
<h2 class="credits">Version 0.1 2023</h2>
<p class="note"><b>NOTE: </b> to enable physic debug mode got to settings and enable physic debug mode;
<br>
The sphere on the head of the robot indicate that the robot is the one that you are controlling.
</p>
</div>
<div class="action-container">
<button class="button button-success" id="start-game">Start Game</button>
<button class="button" id="release-obstacle" enabled="false">Enable Release Mode</button>
<button class="button button-info" id="how-it-works" enabled="false">How it works</button>
</div>
</div>
<div class="settings-container d-none">
<button class="button button-info" id="settings-exit">Go back</button>
<h1>Settings</h1>
<div class="box-container">
<div class="box box-camera">
<i class="fa-solid fa-video"></i>
<div class="radio-container">
<input type="radio" id="third-person" name="camera-view" value="third_person" checked>
<label for="third-person">Third Person</label><br>
<input type="radio" id="whole-view" name="camera-view" value="whole_view">
<label for="whole-view">Whole View</label><br>
</div>
</div>
<div class="box box-camera">
<i class="fa-brands fa-codepen"></i>
<div class="radio-container">
<input type="radio" id="debug-true" name="debug" value="true">
<label for="debug-true">Physics Debug enabled</label><br>
<input type="radio" id="debug-false" name="debug" value="false" checked>
<label for="debug-false">Physics Debug disabled</label><br>
</div>
</div>
<div class="box box-camera">
<i class="fa-solid fa-volume-high"></i>
<div class="radio-container">
<input type="radio" id="audio-true" name="audio" value="true" checked="checked">
<label for="audio-true">Audio enabled</label><br>
<input type="radio" id="audio-false" name="audio" value="false">
<label for="audio-false">Audio disabled</label><br>
</div>
</div>
</div>
</div>
<div class="release-mode-container d-none">
<button class="button button-danger" id="release-mode-exit">Exit Release Mode</button>
</div>
<div class="how-it-works-container d-none">
<button class="button button-info" id="how-it-works-exit">Go back</button>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<h1 class="how-it-works-title">1. Release the obstacles</h1>
<p class="how-it-works-text">
Press on the button 'Enable release mode' and you will enter in the release mode in which you will be able to release the obstacle on the line of the others robot excluding your line.<br> <b>Remeber that you have a budget to respect!</b><br>Yuo will have to use the mouse to move around the camera and choose where to spawn the obstacles.
<br>Moving the mouse you will see an higlight white plane that will indicate where the obstacle can be spawned.
<br>Then just click and the obstacle will be spawned.
</p>
</div>
<div class="swiper-slide">
<h1 class="how-it-works-title">2. Start the game</h1>
<p class="how-it-works-text">When you use your full budget you will be able to start the game pressing the 'Start game' button.<br><b>The game will spawn 3 random obstacle on your line.</b></p>
</div>
<div class="swiper-slide">
<h1 class="how-it-works-title">3. Actions</h1>
<p class="how-it-works-text">You will have to avoid or destroy the objects:
<br><br>- Use <b>SHIFT</b> to jump over an obstacle
<br>- Use <b>SPACEBAR</b> to punch over an obstacle
</p>
<p>
<b>Note:</b> The physic may have some undesired behaviour, if you want to see the physic debug press the 'Settings' button and enable the 'Physics Debug' option.
</p>
</div>
</div>
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<div class="game-statistics">
<div class="current-cash-container d-none">
<i class="dollar-money-icon fa-sharp fa-solid fa-dollar-sign"></i>
<div id="cash-value"></div>
</div>
</div>
<div class="countdown-competition">
<h1 id="countdown-current-value">3</h1>
</div>
<div class="message message-spawning d-none">
<img class="loading-icon" src="./assets/loading-loading-forever.gif" >
<h1 id="message">Spawning random object on your path...</h1>
</div>
<div class="message competition-timer message-spawning" hidden="true">
<h1 id="competition-timer-value">Timer : 0s</h1>
</div>
<div class="container-button-settings d-none">
<!-- button for sound, for physic debug and for camera -->
<i class="fa-solid fa-video" id="change-camera-view"></i>
<!-- <i class="fa-solid fa-volume-high" id="change-sound"></i> -->
</div>
<div class="message message-danger d-none" id="budget-finished">
<h1>Budget finished. Exit from release mode and start the game!</h1>
</div>
<div class="winner-screen d-none">
<div class="trofeo-container">
<img class="trofeo" src="./assets/trofeo.gif">
</div>
<div class="lost-container">
<img class="crying-emoji-m" src="./assets/crying-emoji-m.gif">
</div>
<h1 id="winner-screen-message">YOU WON!</h1>
<h2 id="your-time">Your time: <b>0s</b></h2>
<h2 id="winner-time">Winner time: <b>0s</b></h2>
<button class="button button-info" id="play-again">Play Again</button>
</div>
<img src="./assets/shift.png" id="shift-img" class="d-none">
<img src="./assets/space.png" id="space-img" class="d-none">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/20.0.0/tween.umd.js"></script>
<script src="./js/utility.js" type="module"></script>
<script src="./js/robot.js" type="module"></script>
<script src="./js/obstacle.js" type="module"></script>
<script src="./js/main.js" type="module"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/20.0.0/tween.umd.js"></script>
</body>
</html>