-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathindex.html
169 lines (159 loc) · 5.21 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta property="og:title" content="Rhythm" />
<meta
property="og:description"
content="A vertical scrolling rhythm game where you have to hit the notes falling down, which will appear according to the music."
/>
<meta
property="og:url"
content="https://chloeliang.github.io/rhythm-game/"
/>
<meta
property="og:image"
content="https://res.cloudinary.com/nliangxin/image/upload/v1543036731/rhythm.png"
/>
<link
rel="shortcut icon"
type="image/png"
href="https://img.icons8.com/dusk/50/ecf0f1/musical-notes.png"
/>
<link
href="https://fonts.googleapis.com/css?family=Playball"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/style.css" />
<title>Game</title>
</head>
<body>
<audio class="song" src="media/music.mp3"></audio>
<main>
<div class="game">
<div class="hit">
<div class="hit__combo"></div>
<div class="hit__accuracy"></div>
</div>
<div class="track-container"></div>
<div class="key-container">
<div class="key key--s key--blue">
<div class="keypress keypress--blue"></div>
<span>S</span>
</div>
<div class="key key--d key--red">
<div class="keypress keypress--red"></div>
<span>D</span>
</div>
<div class="key key--f key--blue">
<div class="keypress keypress--blue"></div>
<span>F</span>
</div>
<div class="key key--space key--orange">
<div class="keypress keypress--orange"></div>
<span>Space</span>
</div>
<div class="key key--j key--blue">
<div class="keypress keypress--blue"></div>
<span>J</span>
</div>
<div class="key key--k key--red">
<div class="keypress keypress--red"></div>
<span>K</span>
</div>
<div class="key key--l key--blue">
<div class="keypress keypress--blue"></div>
<span>L</span>
</div>
</div>
</div>
<div class="menu">
<div>
<h1>Rhythm</h1>
<p>
Made with <span class="heart">❤</span> by
<span>ChloeLiang</span>
</p>
<a
class="author"
target="__blank"
href="https://github.com/ChloeLiang/rhythm-game"
>GitHub Repo</a
>
</div>
<div class="menu__song">
<h2>Your Name OST - Kataware Doki</h2>
<div>
<p>Original song composed by <span>Yojiro Noda</span></p>
<p>
Piano synthesia version composed by
<a
class="author"
target="__blank"
href="http://www.theishter.com/"
>Theishter</a
>
</p>
</div>
</div>
<div class="menu__config">
<div class="config__speed">
<h2>Speed</h2>
<div>
<a class="btn btn--small btn--selected" href="#">1x</a>
<a class="btn btn--small" href="#">2x</a>
<a class="btn btn--small" href="#">3x</a>
</div>
</div>
<div class="config__challenge">
<h2>Challenge</h2>
<div><a class="btn btn--small" href="#">Fade</a></div>
</div>
</div>
<div class="menu_start">
<a class="btn btn--primary btn--start" href="#">Start</a>
</div>
</div>
<div class="summary">
<div class="summary__timer"></div>
<div class="summary__result">
<h2 class="result__heading">Clear</h2>
<div class="result__accuracy perfect">
<p class="accuracy__heading">Perfect</p>
<span>:</span>
<p class="accuracy__count perfect__count"></p>
</div>
<div class="result__accuracy good">
<p class="accuracy__heading">Good</p>
<span>:</span>
<p class="accuracy__count good__count"></p>
</div>
<div class="result__accuracy bad">
<p class="accuracy__heading">Bad</p>
<span>:</span>
<p class="accuracy__count bad__count"></p>
</div>
<div class="result__accuracy miss">
<p class="accuracy__heading">Miss</p>
<span>:</span>
<p class="accuracy__count miss__count"></p>
</div>
<div class="result__accuracy combo">
<p class="accuracy__heading">Max Combo</p>
<span>:</span>
<p class="accuracy__count combo__count"></p>
</div>
<div class="result__accuracy score">
<p class="accuracy__heading">Score</p>
<span>:</span>
<p class="accuracy__count score__count"></p>
</div>
</div>
</div>
</main>
<script src="scripts/song.js"></script>
<script src="scripts/script.js"></script>
</body>
</html>