generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathgame.html
104 lines (87 loc) · 3.09 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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!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">
<!--Game description-->
<meta name="description" content="Have fun with this free online Javascript game.
Whack as many moles within the time limit given">
<meta name="keywords" content="Whack-A-Mole, game, arcade-game, mole, javascript">
<!--Author information-->
<meta name="author" content="Chris Townsend">
<!--Link to CSS File-->
<link rel="stylesheet" href="assets/css/style.css">
<!--Fontawesome script to help load the icons faster-->
<link rel="preconnect" href="https://ka-f.fontawesome.com">
<!--Whack A Mole head title-->
<title>Whack A Mole</title>
<!--Favicon logo-->
<link rel="icon" type="image/x-icon" href="./assets/images/game-images/favicon-ico.png">
</head>
<body>
<!--Homepage icon to return to homepage -->
<a href="index.html" aria-label="A homepage icon link to take you back to the homepage" aria-hidden="false"
class=" home-btn fa fa-home"></a>
<!--Div to allow mallet cursor on game page-->
<div class="cursor-mallet">
<img src="./assets/images/game-images/mallet.webp" alt="mallet cursor">
</div>
<!--Whack A Mole title-->
<h2 id="game-title">Whack-A-Mole</h2>
<!--Scoretable to show score and time left-->
<div class="scoretable">
<h3 class="game-btn">Your Score:</h3>
<h3 id="score" class="game-btn">0</h3>
<h3 class=" game-btn"> Time Left:</h3>
<h3 id="timeRemain" class="game-btn">0</h3>
</div>
<!--Game grid-->
<!--Onclick to play mallet whack sound-->
<div class="game-grid" onclick="playSound()">
<!--12 divs to represent 12 individual holes within the game grid-->
<div class="hole" id="1">
<!--Soil div within every hole to allow soil image-->
<div class="soil-div"></div>
</div>
<div class="hole" id="2">
<div class="soil-div"></div>
</div>
<div class="hole" id="3">
<div class="soil-div"></div>
</div>
<div class="hole" id="4">
<div class="soil-div"></div>
</div>
<div class="hole" id="5">
<div class="soil-div"></div>
</div>
<div class="hole" id="6">
<div class="soil-div"></div>
</div>
<div class="hole" id="7">
<div class="soil-div"></div>
</div>
<div class="hole" id="8">
<div class="soil-div"></div>
</div>
<div class="hole" id="9">
<div class="soil-div"></div>
</div>
<div class="hole" id="10">
<div class="soil-div"></div>
</div>
<div class="hole" id="11">
<div class="soil-div"></div>
</div>
<div class="hole" id="12">
<div class="soil-div"></div>
</div>
</div>
<!--Font awesome script-->
<script src="https://kit.fontawesome.com/9932e8fab5.js" crossorigin="anonymous"></script>
<!--Javascript tags-->
<script src="assets/js/game.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>