├── .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 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
41 |
44 |
47 |
50 |
53 |
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 |
--------------------------------------------------------------------------------