├── .gitignore ├── README.md ├── img ├── hole.png └── mole.png ├── index.html ├── script.js └── style.css /.gitignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithUsman0/Game_mole/d5a324c7089ea4dafd90dd36bac8ca06bea4acae/.gitignore -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | this random game i built 2 | // hope you enjoy it 3 | to the play this game.. 4 | -------------------------------------------------------------------------------- /img/hole.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithUsman0/Game_mole/d5a324c7089ea4dafd90dd36bac8ca06bea4acae/img/hole.png -------------------------------------------------------------------------------- /img/mole.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeWithUsman0/Game_mole/d5a324c7089ea4dafd90dd36bac8ca06bea4acae/img/mole.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Hole and Mole Game 10 | 11 | 12 | 13 |

Catch me, If you can 0

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 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | // Selecting all the elements from the DOM 2 | const holes = document.querySelectorAll(".hole"); 3 | const scoreBoard = document.querySelector(".score"); 4 | const moles = document.querySelectorAll(".mole"); 5 | const startBtn = document.querySelector(".start-btn"); 6 | const levels = document.querySelector(".levels"); 7 | const game = document.querySelector(".game"); 8 | 9 | let lastHole; 10 | let timeUp = false; 11 | let score = 0; 12 | 13 | // Function to get the selected radio button value 14 | function difficultyLevel() { 15 | const ele = document.getElementsByName("level"); 16 | for (let i = 0; i < ele.length; i++) { 17 | if (ele[i].checked) { 18 | return ele[i].id; 19 | } 20 | } 21 | } 22 | 23 | // Function to get a random time between min and max 24 | function randomTime(min, max) { 25 | return Math.round(Math.random() * (max - min) + min); 26 | } 27 | 28 | // Function to get a random hole 29 | function randomHole(holes) { 30 | const idx = Math.floor(Math.random() * holes.length); 31 | const hole = holes[idx]; 32 | if (hole === lastHole) { 33 | return randomHole(holes); 34 | } 35 | lastHole = hole; 36 | return hole; 37 | } 38 | 39 | // Function to make the mole appear and disappear 40 | function peep(show, hide) { 41 | const time = randomTime(show, hide); 42 | const hole = randomHole(holes); 43 | hole.classList.add("up"); 44 | setTimeout(() => { 45 | hole.classList.remove("up"); 46 | if (!timeUp) { 47 | peep(show, hide); 48 | } 49 | }, time); 50 | } 51 | 52 | // Function to start the game 53 | function startGame() { 54 | let show, hide; 55 | const difficulty = difficultyLevel(); 56 | if (difficulty === "easy") { 57 | show = 500; 58 | hide = 1500; 59 | } else if (difficulty === "medium") { 60 | show = 200; 61 | hide = 1000; 62 | } else { 63 | show = 100; 64 | hide = 800; 65 | } 66 | 67 | // hiding start button during game running 68 | scoreBoard.textContent = 0; 69 | timeUp = false; 70 | startBtn.innerHTML = "running.."; 71 | startBtn.disabled = true; 72 | levels.style.visibility = "hidden"; 73 | score = 0; 74 | 75 | // Starting button after the game finish 76 | peep(show, hide); 77 | setTimeout(() => { 78 | timeUp = true; 79 | startBtn.innerHTML = "start!"; 80 | startBtn.disabled = false; 81 | levels.style.visibility = "visible"; 82 | }, 15000); 83 | } 84 | 85 | // Function to update the score on clicking the mole 86 | function hitTheMole(e) { 87 | if (!e.isTrusted) { 88 | return; 89 | } 90 | score++; 91 | this.parentNode.classList.remove("up"); 92 | scoreBoard.textContent = score; 93 | } 94 | 95 | // Adding the click event listener to all the moles 96 | moles.forEach((mole) => mole.addEventListener("click", hitTheMole)); 97 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0px; 3 | padding: 0px; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: cursive; 9 | background-color: #191919; 10 | color: #fff; 11 | } 12 | 13 | h1 { 14 | text-align: center; 15 | font-size: 5rem; 16 | line-height: 1; 17 | margin-top: 45px; 18 | } 19 | 20 | .score { 21 | color: #4caf50; 22 | background: #302f2fed; 23 | padding: 1rem; 24 | line-height: 1; 25 | border-radius: 1rem; 26 | display: inline-block; 27 | } 28 | 29 | .controls { 30 | margin: 5px; 31 | text-align: center; 32 | } 33 | 34 | .start-btn { 35 | padding: 10px 25px; 36 | outline: none; 37 | font-size: 24px; 38 | background: #c2185b; 39 | color: #fff; 40 | border: 0px; 41 | box-shadow: 1px 2px 4px #c2185bb0; 42 | cursor: pointer; 43 | } 44 | 45 | .start-btn:hover { 46 | background: #187bc2; 47 | box-shadow: 1px 2px 4px #185fc2b0; 48 | } 49 | 50 | .levels { 51 | font-size: 20px; 52 | display: flex; 53 | align-items: center; 54 | justify-content: center; 55 | } 56 | 57 | /* Style for each difficulty level */ 58 | .levels > div { 59 | margin: 20px; 60 | } 61 | 62 | .levels > div:nth-child(1) { 63 | color: #00ff00; 64 | } 65 | .levels > div:nth-child(2) { 66 | color: #ffd24e; 67 | } 68 | .levels > div:nth-child(3) { 69 | color: #ff0000; 70 | } 71 | 72 | /* Style for the game board */ 73 | .game { 74 | width: 600px; 75 | height: 400px; 76 | display: flex; 77 | flex-wrap: wrap; 78 | margin: 0 auto; 79 | } 80 | 81 | /* Style for each hole on the game board */ 82 | .hole { 83 | flex: 1 0 33.33%; 84 | overflow: hidden; 85 | position: relative; 86 | } 87 | 88 | /* Style for the mole inside each hole */ 89 | .hole:after { 90 | background: url("img/hole.png") bottom center no-repeat; 91 | background-size: contain; 92 | content: ""; 93 | width: 100%; 94 | height: 70px; 95 | position: absolute; 96 | z-index: 2; 97 | bottom: -30px; 98 | } 99 | 100 | /* Style for the mole when it pops up from a hole */ 101 | .mole { 102 | position: absolute; 103 | top: 100%; 104 | width: 100%; 105 | height: 100%; 106 | background: url("img/mole.png") bottom center no-repeat; 107 | background-size: 60%; 108 | transition: all 0.4s; 109 | cursor: pointer; 110 | } 111 | 112 | /* Style for the mole when it pops up from a hole and becomes visible */ 113 | .hole.up .mole { 114 | top: 0; 115 | } 116 | 117 | /* adjust for small screen size */ 118 | @media (max-width: 768px) { 119 | h1 { 120 | padding: 20px; 121 | font-size: 2rem; 122 | } 123 | 124 | .score { 125 | margin: 20px; 126 | } 127 | 128 | .hole::after { 129 | bottom: -22px; 130 | margin: 6px; 131 | } 132 | 133 | .start-btn { 134 | padding: 8px 20px; 135 | } 136 | 137 | .levels > div { 138 | margin: 10px; 139 | } 140 | 141 | .game { 142 | width: 90%; 143 | height: 300px; 144 | } 145 | } 146 | --------------------------------------------------------------------------------