practice-for-prepwork-css-whack-a-mole/mole.html at main · Katreenaaa/practice-for-prepwork-css-whack-a-mole · GitHub

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Whack-a-Mole!</title>
    <link rel="stylesheet" type="text/css" href="mole.css" />
    <script type="text/javascript" src="mole.js"></script>
  </head>
  <body>
    <!-- Your code here -->

    <!-- Background music controls -->
    <div class="audio-controls">
      <button id="toggle-audio">🔊</button>
      <audio id="bg-audio" loop autoplay>
        <source src="New chills - bed.mp3" type="audio/mpeg" />
      </audio>
    </div>

    <h1 class="title">Whack-a-Mole!</h1>

    <div class="wgs">
      <div class="wgs__grass">
        <!-- First mole/hill -->
        <img
          class="wgs__mole-head wgs__mole-head--0 wgs__mole-head--hidden"
          src="mole-head.png"
          alt="mole head"
        />
        <img
          class="wgs__dirt-pile wgs__dirt-pile--0"
          src="mole-hill.png"
          alt="mole hill"
        />
      </div>

      <div class="wgs__grass">
        <!-- Second mole/hill -->
        <img
          class="wgs__mole-head wgs__mole-head--1 wgs__mole-head--hidden"
          src="mole-head.png"
          alt="mole head"
        />
        <img
          class="wgs__dirt-pile wgs__dirt-pile--1"
          src="mole-hill.png"
          alt="mole hill"
        />
      </div>

      <div class="wgs__grass">
        <!-- Third mole/hill -->
        <img
          class="wgs__mole-head wgs__mole-head--2 wgs__mole-head--hidden"
          src="mole-head.png"
          alt="mole head"
        />
        <img
          class="wgs__dirt-pile wgs__dirt-pile--2"
          src="mole-hill.png"
          alt="mole hill"
        />
      </div>

      <div class="wgs__grass">
        <!-- Fourth mole/hill -->
        <img
          class="wgs__mole-head wgs__mole-head--3 wgs__mole-head--hidden"
          src="mole-head.png"
          alt="mole head"
        />
        <img
          class="wgs__dirt-pile wgs__dirt-pile--3"
          src="mole-hill.png"
          alt="mole hill"
        />
      </div>

      <div class="wgs__grass">
        <!-- Fifth mole/hill -->
        <img
          class="wgs__mole-head wgs__mole-head--4 wgs__mole-head--hidden"
          src="mole-head.png"
          alt="mole head"
        />
        <img
          class="wgs__dirt-pile wgs__dirt-pile--4"
          src="mole-hill.png"
          alt="mole hill"
        />
      </div>

      <div class="wgs__grass">
        <!-- Sixth mole/hill -->
        <img
          class="wgs__mole-head wgs__mole-head--5 wgs__mole-head--hidden"
          src="mole-head.png"
          alt="mole head"
        />
        <img
          class="wgs__dirt-pile wgs__dirt-pile--5"
          src="mole-hill.png"
          alt="mole hill"
        />
      </div>

      <div class="wgs__grass">
        <!-- Seventh mole/hill -->
        <img
          class="wgs__mole-head wgs__mole-head--6 wgs__mole-head--hidden"
          src="mole-head.png"
          alt="mole head"
        />
        <img
          class="wgs__dirt-pile wgs__dirt-pile--6"
          src="mole-hill.png"
          alt="mole hill"
        />
      </div>

      <div class="wgs__grass">
        <!-- Eighth mole/hill -->
        <img
          class="wgs__mole-head wgs__mole-head--7 wgs__mole-head--hidden"
          src="mole-head.png"
          alt="mole head"
        />
        <img
          class="wgs__dirt-pile wgs__dirt-pile--7"
          src="mole-hill.png"
          alt="mole hill"
        />
      </div>
    </div>

    <!-- UNCOMMENT THE CODE BELOW WHEN DIRECTED -->
    <div class="sb">
      <div class="sb__score-holder">
        SCORE: <span class="sb__score">0</span>
      </div>
      <div class="sb__game-over sb__game-over--hidden">GAME OVER!!!</div>
      <div class="sb__mole-counter">
        MOLES: <span class="sb__moles">30</span>
      </div>
    </div>
  </body>
</html>