-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathgame.html
83 lines (75 loc) · 3.36 KB
/
game.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
<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">
<!-- bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- My style Sheet -->
<link rel="stylesheet" href="assets/css/game.css">
<title>Rhythm Heroes</title>
</head>
<body>
<!-- The game board, a score and the song/artist/difficulty.
game board contains - static arrows on the bottom, game play
arrow animate from the top. When the arrow key is pressed and
its the correct arrow and the arrow is in the tap zone then
they get a point. After 7 missed they lose game or lose points? -->
<!-- Game Name -->
<div class="header">
<h2 class="game-title">Rhythm Heroes</h2>
</div>
<!-- Game name-->
<!-- ScoreBoard -->
<div class="score-wrapper">
<div class="current-song">
<h3>Current Song</h3>
<p><span id="artist"></span> / <span id="song"></span></p>
<p>difficulty <span id="level"></span></p>
</div>
<div class="score">
<p>Score: </p>
<p id="score"></p>
<p>High Score: cookie?</p>
</div>
<div id="carousel-volume-settings">
<label id="mute-button" for="volume"><svg xmlns="http://www.w3.org/2000/svg" height="48" width="48">
<path
d="M28 41.45v-3.1q4.85-1.4 7.925-5.375T39 23.95q0-5.05-3.05-9.05-3.05-4-7.95-5.35v-3.1q6.2 1.4 10.1 6.275Q42 17.6 42 23.95t-3.9 11.225Q34.2 40.05 28 41.45ZM6 30V18h8L24 8v32L14 30Zm21 2.4V15.55q2.75.85 4.375 3.2T33 24q0 2.85-1.65 5.2T27 32.4Zm-6-16.8L15.35 21H9v6h6.35L21 32.45ZM16.3 24Z" />
</svg></label>
<input type="range" id="volume" name="volume" min="0" max="10" value="2">
</div>
</div>
<!-- ./ScoreBoard -->
<!-- GameBoard -->
<div class="game-wrapper">
<div class="new-row-generator" id="new-row-generator">
<!-- Rows with active arrow appear here -->
</div>
<div class="board-wrapper" id="board">
<div class="arrow-wrapper left-arrow" id="left-arrow">
<img src="assets/images/arrow.svg" alt="arrow" class="arrow-color arrow" id="ArrowLeft">
</div>
<div class="arrow-wrapper up-arrow" id="up-arrow">
<img src="assets/images/arrow.svg" alt="arrow" class="arrow-color arrow" id="ArrowUp">
</div>
<div class="arrow-wrapper down-arrow" id="down-arrow">
<img src="assets/images/arrow.svg" alt="arrow" class="arrow-color arrow" id="ArrowDown">
</div>
<div class="arrow-wrapper right-arrow" id="right-arrow">
<img src="assets/images/arrow.svg" alt="arrow" class="arrow-color arrow" id="ArrowRight">
</div>
</div>
</div>
<!-- ./GameBoard -->
<!-- Audio Player -->
<audio id="game-audio" controls>
<source src="">
</audio>
<!-- ./Audio Player -->
<script src="assets/js/data.js"></script>
<script src="assets/js/game.js"></script>
<script src="assets/js/loadgame.js"></script>
</body>
</html>