generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 4
/
game.html
89 lines (81 loc) · 4.17 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
84
85
86
87
88
89
<!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">
<link href ="assets/css/style.css" rel ="stylesheet" />
<script src="https://kit.fontawesome.com/aa0c2203e6.js" crossorigin="anonymous"></script>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<title>The Mustastic Location</title>
</head>
<body>
<header class="page-header">
<nav class="navbar">
<a class="home-icon navbar-icon" href="index.html"><i class="fas fa-home"></i></a>
<h1>The Mustastic Location</h1>
<i id="audio-toggler" class="fas fa-volume-up navbar-icon"></i>
</nav>
</header>
<!-- <a href="/index.html" class="btn">Back to landing page</a> -->
<main class="game-page">
<div class="game-container" id="background">
<div class="game-screen">
<div class="invisible-div" id="bongo-click-box"></div>
<div class="invisible-div" id="cello-click-box"></div>
<div class="invisible-div" id="child-sing-click-box"></div>
<div class="invisible-div" id="drum-click-box"></div>
<div class="invisible-div" id="flute-click-box"></div>
<div class="invisible-div" id="guitar-click-box"></div>
<div class="invisible-div" id="piano-click-box"></div>
<div class="invisible-div" id="trombone-click-box"></div>
<div class="invisible-div" id="violin-click-box"></div>
</div>
<div class="game-controls">
<h2>Timer</h2>
<p id="timer">1:00</p>
<div class="instrument-container">
<img src="./assets/images/bongo.png" alt="" id="bongo-img" class="invisible">
<img src="./assets/images/cello.png" alt="" id="cello-img" class="invisible">
<img src="./assets/images/child-sing.png" alt="" id="child-sing-img" class="invisible">
<img src="./assets/images/drum.png" alt="" id="drum-img" class="invisible">
<img src="./assets/images/flute.png" alt="" id="flute-img" class="invisible">
<img src="./assets/images/guitar.png" alt="" id="guitar-img" class="invisible">
<img src="./assets/images/piano.png" alt="" id="piano-img" class="invisible">
<img src="./assets/images/trombone.png" alt="" id="trombone-img" class="invisible">
<img src="./assets/images/violin.png" alt="" id="violin-img" class="invisible">
</div>
<div><i class="toggle-images fas fa-sort-down invisible" id="toggle-images-on"></i></div>
<div><i class="toggle-images fas fa-sort-up invisible" id="toggle-images-off"></i></div>
<div>
<button class="btn" id="start-btn">Start</button>
</div>
</div>
<!-- The Game Won Modal -->
<div id="myModalWon" class="modal">
<!-- Modal content -->
<div class="modal-content game-modal">
<h2>Congratulations!!!</h2>
<p>You managed to find all of the instruments in <span id="game-time">0</span> seconds!</p>
<p>Try again to see if you can beat your time!</p><br>
<a href="game.html" class="btn game-btn">Restart</a>
<a href="index.html" class="btn game-btn">Home</a>
</div>
</div>
<!-- The Game Lost Modal -->
<div id="myModalLost" class="modal">
<!-- Modal content -->
<div class="modal-content game-modal">
<h2>Unlucky!!!</h2>
<p>You only managed to find <strong><span id="game-score">0</span> out of 9</strong> of the instruments within the time.</p>
<p>Try again to see if you can find the remaining instruments!</p><br>
<a href="game.html" class="btn game-btn">Restart</a>
<a href="index.html" class="btn game-btn">Home</a>
</div>
</div>
</div>
</main>
<footer>Copyright ©ProGrammys 2022</footer>
<script type='text/javascript' src='./assets/js/game.js'></script>
</body>
</html>