├── assets
    ├── audio
    │   └── pop.wav
    ├── images
    │   ├── mole.png
    │   ├── palu.png
    │   ├── ground.png
    │   ├── palu1.png
    │   ├── palu2.png
    │   ├── whack-a-mole.png
    │   ├── ♡ Anime pfp♡.jpeg
    │   ├── animal-158236_640.png
    │   └── full-m2i8i8d3i8m2A0Z5.png
    ├── css
    │   └── style.css
    └── js
    │   └── main.js
├── README.md
└── index.html


/assets/audio/pop.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raffneptune/game8/HEAD/assets/audio/pop.wav


--------------------------------------------------------------------------------
/assets/images/mole.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raffneptune/game8/HEAD/assets/images/mole.png


--------------------------------------------------------------------------------
/assets/images/palu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raffneptune/game8/HEAD/assets/images/palu.png


--------------------------------------------------------------------------------
/assets/images/ground.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raffneptune/game8/HEAD/assets/images/ground.png


--------------------------------------------------------------------------------
/assets/images/palu1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raffneptune/game8/HEAD/assets/images/palu1.png


--------------------------------------------------------------------------------
/assets/images/palu2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raffneptune/game8/HEAD/assets/images/palu2.png


--------------------------------------------------------------------------------
/assets/images/whack-a-mole.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raffneptune/game8/HEAD/assets/images/whack-a-mole.png


--------------------------------------------------------------------------------
/assets/images/♡ Anime pfp♡.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raffneptune/game8/HEAD/assets/images/♡ Anime pfp♡.jpeg


--------------------------------------------------------------------------------
/assets/images/animal-158236_640.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raffneptune/game8/HEAD/assets/images/animal-158236_640.png


--------------------------------------------------------------------------------
/assets/images/full-m2i8i8d3i8m2A0Z5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raffneptune/game8/HEAD/assets/images/full-m2i8i8d3i8m2A0Z5.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | <h1>game 8</h1>
2 | <a href="https://raffneptune-game8.vercel.app" style="color: black; text-decoration: none;">tap link</a>
3 | 


--------------------------------------------------------------------------------
/assets/css/style.css:
--------------------------------------------------------------------------------
 1 | .title,
 2 | .score {
 3 |   font-size: 5rem;
 4 |   text-align: center;
 5 |   font-family: Arial;
 6 |   margin: 10px;
 7 | }
 8 | 
 9 | button {
10 |   display: block;
11 |   margin: auto;
12 | }
13 | 
14 | .container {
15 |   width: 600px;
16 |   margin: auto;
17 |   cursor: url("../images/palu1.png"), auto;
18 | }
19 | 
20 | .container:active {
21 |   cursor: url("../images/palu2.png"), auto;
22 | }
23 | .tanah {
24 |   width: 200px;
25 |   height: 200px;
26 |   position: relative;
27 |   overflow: hidden;
28 |   float: left;
29 | }
30 | 
31 | .tanah::after {
32 |   content: "";
33 |   display: block;
34 |   width: 200px;
35 |   height: 100px;
36 |   background: url("../images/ground.png") bottom center no-repeat;
37 |   background-size: 80%;
38 |   position: absolute;
39 |   bottom: -25px;
40 | }
41 | 
42 | .tikus {
43 |   width: 100%;
44 |   height: 100%;
45 |   background: url("../images/animal-158236_640.png") bottom center no-repeat;
46 |   background-size: 60%;
47 |   position: absolute;
48 |   top: 100px;
49 |   transition: top 0.3s;
50 | }
51 | 
52 | .tanah.muncul .tikus {
53 |   top: -1rem;
54 | }
55 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <!--=============== FAVICON ===============-->
 7 |     <link rel="shortcut icon" href="./assets/images/♡ Anime pfp♡.jpeg" type="image/x-icon" />
 8 | 
 9 |     <!-- CSS -->
10 |     <link rel="stylesheet" href="assets/css/style.css" />
11 | 
12 |     <title>Raff | Hitting Mice</title>
13 |   </head>
14 |   <body>
15 |     <h1 class="title">Hitting Mice</h1>
16 | 
17 |     <h2 class="score">0</h2>
18 | 
19 |     <button class="play" onclick="startPlay()">Start !</button>
20 |     <div class="container">
21 |       <div class="tanah">
22 |         <div class="tikus"></div>
23 |       </div>
24 |       <div class="tanah">
25 |         <div class="tikus"></div>
26 |       </div>
27 |       <div class="tanah">
28 |         <div class="tikus"></div>
29 |       </div>
30 |       <div class="tanah">
31 |         <div class="tikus"></div>
32 |       </div>
33 |       <div class="tanah">
34 |         <div class="tikus"></div>
35 |       </div>
36 |       <div class="tanah">
37 |         <div class="tikus"></div>
38 |       </div>
39 |     </div>
40 |     <audio src="assets/audio/pop.wav" id="pop"></audio>
41 |     <!-- JS Manual -->
42 |     <script src="assets/js/main.js"></script>
43 |   </body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/assets/js/main.js:
--------------------------------------------------------------------------------
 1 | const ground = document.querySelectorAll(".tanah");
 2 | const mole = document.querySelectorAll(".tikus");
 3 | const start = document.querySelector(".start");
 4 | const scoreBoard = document.querySelector(".score");
 5 | const pop = document.querySelector("#pop");
 6 | 
 7 | let groundBefore;
 8 | let clear;
 9 | let score;
10 | 
11 | //fungsi utk tempat tikus muncul secara random
12 | function randomGround(ground) {
13 |   const g = Math.floor(Math.random() * ground.length);
14 |   const gRandom = ground[g];
15 |   if (gRandom == groundBefore) {
16 |     randomGround(ground);
17 |   }
18 |   groundBefore = gRandom;
19 |   return gRandom;
20 | }
21 | 
22 | //fungsi utk waktu kemunculan tikus dari dalam tanah
23 | function randomTime(min, max) {
24 |   return Math.round(Math.random() * (max - min) + min);
25 | }
26 | 
27 | //fungsi utk menampilkan tikus dari dalam tanah
28 | function appearMole() {
29 |   const gRandom = randomGround(ground);
30 |   const tRandom = randomTime(300, 1000);
31 |   gRandom.classList.add("muncul");
32 | 
33 |   setTimeout(() => {
34 |     gRandom.classList.remove("muncul");
35 |     if (!clear) {
36 |       appearMole();
37 |     }
38 |   }, tRandom);
39 | }
40 | 
41 | //fungsi utk tombol memulai permainan
42 | function startPlay() {
43 |   clear = false;
44 |   score = 0;
45 |   scoreBoard.textContent = 0;
46 |   appearMole();
47 |   setTimeout(() => {
48 |     clear = true;
49 |   }, 5000);
50 | }
51 | 
52 | //fungsi utk menambah skor ketika user memukul tikus
53 | function pow() {
54 |   score++;
55 |   this.parentNode.classList.remove("muncul");
56 |   pop.play();
57 |   scoreBoard.textContent = score;
58 | }
59 | 
60 | mole.forEach((m) => {
61 |   m.addEventListener("click", pow);
62 | });
63 | 


--------------------------------------------------------------------------------