-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
168 lines (167 loc) · 5.07 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
<head>
<title>JS Fighting Game</title>
<link rel="stylesheet" href="style.css" />
<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=Press+Start+2P&display=swap"
rel="stylesheet"
/>
</head>
<body>
<!--big container-->
<div class="main_container">
<div class="ui_container">
<!--player health-->
<div class="health_bar_container player_hp_container">
<div class="hp_bar"></div>
<div id="playerHealth" class="player_hp_bar"></div>
</div>
<!--timer-->
<div class="timer" id="timer">60</div>
<!--enemy health-->
<div class="health_bar_container enemy_hp_container">
<div class="hp_bar"></div>
<div id="enemyHealth" class="enemy_hp_bar"></div>
</div>
</div>
<div class="info_container player_info_container">
<!--player name-->
<p class="player_name" id="player_name">HIROSHI</p>
<!--player medal-->
<img
id="pm1"
class="medal pm1"
src="/assets/ui/skull.png"
alt="skull_png"
/>
<img
id="pm2"
class="medal pm2"
src="/assets/ui/skull.png"
alt="skull_png"
/>
</div>
<div class="info_container enemy_info_container">
<!--enemy name-->
<p class="enemy_name" id="enemy_name">JIRO</p>
<!--enemy medal-->
</div>
<img
id="em1"
class="medal2 em1"
src="/assets/ui/skull.png"
alt="skull_png"
/>
<img
id="em2"
class="medal2 em2"
src="/assets/ui/skull.png"
alt="skull_png"
/>
<!--main menu background-->
<img
src="./assets/background/mainmenubg.png"
alt="main_menu"
class="main_bg"
id="main_bg"
/>
<!--Main Menu UI-->
<div id="instruction" class="intro_container">
<p class="instruction_title">BLADE OF HONOUR</p>
<p class="start_text">Click to Enter the Duel!</p>
<div class="control">
<img
src="./assets/fighters/Samurai Fighter/player_potrait_1.png"
alt="player_potrait"
class="player_pic"
/>
<div class="control_text">
<h2 class="header">HIROSHI TAKEDA</h2>
<h2>広志 武田</h2>
<p>W - Jump</p>
<p>A - Move Left</p>
<p>D - Move Right</p>
<p>S - Parry</p>
<p>F - Slash</p>
<p>G - Charged Slash</p>
</div>
</div>
<div class="control">
<img
src="./assets/fighters/Ninja Fighter/player_potrait_2.png"
alt="player_potrait"
class="enemy_pic"
/>
<div class="control_text">
<h2 class="header">JIRO HATTORI</h2>
<h2>次郎 服部</h2>
<p>Arrow Up - Jump</p>
<p>Arrow Left - Move Left</p>
<p>Arrow Right - Move Right</p>
<p>Arrow Down - Parry</p>
<p>K - Slash</p>
<p>L - Charged Slash</p>
</div>
</div>
</div>
<p class="hint" id="hint_id">
Master the art of timing: a well-timed parry will stagger your opponent,
but beware, it cannot withstand the force of a powerful charged slash.
</p>
<p class="hint hint_music" id="hint_music">
Press Space Bar to unmute main menu music
</p>
<!--Game End UI-->
<div id="game_end_ui" class="game_end_ui">TIE</div>
<div id="restart" class="game_end_ui restart">Press 1 for Rematch</div>
<canvas></canvas>
<!--background music-->
<audio id="bgm">
<source src="assets/audio/bgm.mp3" type="audio/mp3" />
</audio>
<audio id="main_music" autoplay loop>
<source src="assets/audio/menu_bgm.mp3" type="audio/mp3" />
</audio>
<audio id="end_music">
<source src="/assets/audio/Game_End.mp3" type="audio/mp3" />
</audio>
<!--sound effects-->
<audio
id="attack_sound"
src="assets/audio/attack.mp3"
type="audio/mp3"
></audio>
<audio id="jump_sound" src="assets/audio/jump.mp3" type="audio/mp3"></audio>
<audio id="run_sound" src="assets/audio/run.mp3" type="audio/mp3"></audio>
<audio
id="end_sound"
src="assets/audio/game-start.mp3"
type="audio/mp3"
></audio>
<audio
id="attack2_sound"
src="./assets/audio/attack2.mp3"
type="audio/mp3"
></audio>
<audio
id="block_sound"
src="./assets/audio/block.mp3"
type="audio/mp3"
></audio>
</div>
<!--script-->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="class/sprite.js"></script>
<script src="class/fighter.js"></script>
<script src="utility/definition.js"></script>
<script src="utility/interactionhandler.js"></script>
<script src="utility/collisionDetection.js"></script>
<script src="index.js"></script>
<script src="utility/eventlistener.js"></script>
</body>