-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
98 lines (93 loc) · 5.71 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/animate.css">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
<title>Word Guess Game - Hangman</title>
</head>
<body>
<div class="container-fluid mx-0 px-0 px-0">
<div class="row justify-content-center">
<div class="col-md-12 col-sm-12 mx-0 px-0 px-0">
<header>
<img class="site-img" src="assets/images/music.png" alt="icon">
<h1>HANGMAN</h1>
<h4>POP SINGERS </h4>
</header>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-12 col-sm-12 mx-0 px-0 px-0">
<section>
<div class="shadow-sm p-1 mb-3 bg-white rounded">Wins: <span id="wins">0</span></div>
<div class="shadow-sm p-1 mb-3 bg-white rounded">Losses: <span id="defeats">0</span></div>
<div class="shadow-sm p-1 mb-3 bg-white rounded">Remained: <span id="guessesRemained"></span></div>
</section>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-12 col-sm-12 text-center mx-0 px-0 px-0">
<p id="message" class="text-center">Press any key to get started!</p>
<aside id="word"></aside>
</div>
</div>
<div class="row justify-content-center">
<div class="text-center">
<div class="hangman" id="hangman">
<img src="assets/images/hangman-9.png" id="hm9" alt="hangman" z-index="0" class="animated zoomIn">
<img src="assets/images/hangman-8.png" id="hm8" alt="hangman" z-index="1" class="animated swing">
<img src="assets/images/hangman-7.png" id="hm7" alt="hangman" z-index="2" class="animated shake">
<img src="assets/images/hangman-6.png" id="hm6" alt="hangman" z-index="3" class="animated slideInDown">
<img src="assets/images/hangman-5.png" id="hm5" alt="hangman" z-index="4" class="animated slideInRight">
<img src="assets/images/hangman-4.png" id="hm4" alt="hangman" z-index="5" class="animated slideInLeft">
<img src="assets/images/hangman-3.png" id="hm3" alt="hangman" z-index="6" class="animated slideInUp">
<img src="assets/images/hangman-2.png" id="hm2" alt="hangman" z-index="7" class="animated slideInUp">
<img src="assets/images/hangman-1.png" id="hm1" alt="hangman" z-index="8" class="animated rubberBand">
<div id="singer">
<img id="singerNone" src="assets/images/none.png" class="singer animated rollIn shadow bg-white border rounded-circle">
<img id="wrongAnswer" src="assets/images/wronganswer.jpg" class="singer animated rollIn shadow bg-white border rounded-circle">
</div>
<div class="video shadow" id="videoFrame">
<iframe id="video" src="https://www.youtube.com/embed/TqnlZ79KYZ8?controls=0" height="100%" width="100%" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div id="wrapLettersGuessed" class="lettersGuessed shadow-sm p-1 mb-3 bg-white rounded">
Letters Guessed:
<span id="lettersGuessed"> </span>
</div>
</div>
</div>
<div class="row justify-content-center">
<div id="keyboard" class="col-md-12 col-sm-12 text-center">
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-12 col-sm-12 mx-0 px-0 px-0 text-center">
<footer>
<audio class="audio" controls id="bgsound" loop>
<source id="audioSource" src="assets/sounds/bgsound.mp3" type="audio/mpeg">
</audio>
<br>© Carolina Cavalcanti
</footer>
</div>
</div>
</div>
<audio controls class="audio" id="audioWin">
<source src="assets/sounds/win.mp3" type="audio/mpeg">
</audio>
<audio controls class="audio" id="audioLose">
<source src="assets/sounds/lose.mp3" type="audio/mpeg">
</audio>
<audio controls class="audio" id="audioEnd">
<source src="assets/sounds/theend.mp3" type="audio/mpeg">
</audio>
<script src="assets/javascript/game.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>