From 409e0142b36e635156e144f3992c92b89bfeee1a Mon Sep 17 00:00:00 2001 From: JRao2108 <104818952+JRao2108@users.noreply.github.com> Date: Wed, 11 Oct 2023 22:33:13 +0530 Subject: [PATCH 1/7] Create index.html --- Mole_Bash_Mania/index.html | 42 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 Mole_Bash_Mania/index.html diff --git a/Mole_Bash_Mania/index.html b/Mole_Bash_Mania/index.html new file mode 100644 index 0000000000..afa698edc8 --- /dev/null +++ b/Mole_Bash_Mania/index.html @@ -0,0 +1,42 @@ + + + + + + + Whack-A-Mole + + + +
+

Mole Bash Mania

+

Game Instructions!!

+

| Click on the moles as they appear in the holes to score points |

+

| You have 20 seconds to whack as many moles as possible |

+

| Each mole whacked gives you 10 points |

+

| Good luck!! |

+
+ +
+

Score: 0

+

Time Remaining: 20 Sec

+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + From d77d019df936142dbfacff1fba6472a7b76e4dcc Mon Sep 17 00:00:00 2001 From: JRao2108 <104818952+JRao2108@users.noreply.github.com> Date: Wed, 11 Oct 2023 22:37:23 +0530 Subject: [PATCH 2/7] Add files via upload --- Mole_Bash_Mania/assets_smash.mp3 | Bin 0 -> 5817 bytes Mole_Bash_Mania/index.css | 113 +++++++++++++++++++++++++++++++ Mole_Bash_Mania/index.js | 60 ++++++++++++++++ 3 files changed, 173 insertions(+) create mode 100644 Mole_Bash_Mania/assets_smash.mp3 create mode 100644 Mole_Bash_Mania/index.css create mode 100644 Mole_Bash_Mania/index.js diff --git a/Mole_Bash_Mania/assets_smash.mp3 b/Mole_Bash_Mania/assets_smash.mp3 new file mode 100644 index 0000000000000000000000000000000000000000..5bbbd68d67414e0afd249a6f4a876989ae6f4357 GIT binary patch literal 5817 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 z zFJ6lG(ig_Q4nnT-JjG{HNakt1kS1SL5+5JET4+m%77vQGhH)vLPkq6hPWKBRp0^pe zx%w@*JHoWY#oExh@Ydn|_88h;vS%G%QRT;N}^R5p)* VAMWL)K%;;iK-=sM>fctve*tWei#z}T literal 0 HcmV?d00001 diff --git a/Mole_Bash_Mania/index.css b/Mole_Bash_Mania/index.css new file mode 100644 index 0000000000..ecc4890d87 --- /dev/null +++ b/Mole_Bash_Mania/index.css @@ -0,0 +1,113 @@ +* { + font-family: Arial, Helvetica, sans-serif; + /* background-color: rgb(113, 143, 224); */ +} +#disp { + /* border: 1px solid blue; */ + text-align: center; + font-size: 25px; + line-height: 10px; + font-weight: 500; + color: black; +} +#score { + color: rgb(8, 147, 55); + font-weight: bold; +} +#time { + color: rgb(255, 0, 0); + font-weight: bold; +} +#container { + height: 450px; + width: 450px; + margin: auto; + margin-top: 50px; + padding: 20px 20px; + /* border: 1px solid red; */ + /* background-color: grey; */ + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 1fr); + gap: 60px; +} +#container > div { + /* border: 1px solid black; */ + background-color: #dfd1d1; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: flex-end; + overflow: hidden; + cursor: pointer; +} +#container > div > img { + width: 70%; + background-color: #dfd1d1; +} +button { + /* border: 1px solid red; */ + position: absolute; + left: 50%; + transform: translate(-50%, -50%); + margin-top: 40px; + background-color: white; + border-radius: 5px; + padding: 10px 20px; + cursor: pointer; +} +@media screen and (min-width: 300px) and (max-width: 700px) { + #disp { + /* background-color: pink; */ + width: 100%; + } + #container { + width: 250px; + height: 250px; + gap: 20px; + } +} +#instructions { + background-color: rgba(255, 255, 255, 0.9); + padding: 20px; + border-radius: 10px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); + margin-right: 20px; + text-align: center; + font-size: 22px; + line-height: 1.5; + color: #333; +} + +#instructions h2 { + font-size: 30px; + font-weight: bold; + margin-bottom: 10px; +} +#instructions { + background-image: url('https://media.giphy.com/media/OPb0ujC8EZWHi3e1rW/giphy.gif'); + background-size: cover; + background-repeat: no-repeat; + background-attachment: fixed; + animation: backgroundAnimation 10s linear infinite; + color: white; +} + +@keyframes backgroundAnimation { + 0% { + background-position: 0% 0%; + } + 100% { + background-position: 100% 0%; + } +} + +body { + background-image: url('https://cdn.marketjs.net/games/whack-a-mole/localization/en/media/graphics/game/horizont.jpg'); + background-size: cover; + background-repeat: no-repeat; + background-attachment: fixed; + +} + + diff --git a/Mole_Bash_Mania/index.js b/Mole_Bash_Mania/index.js new file mode 100644 index 0000000000..75508d8244 --- /dev/null +++ b/Mole_Bash_Mania/index.js @@ -0,0 +1,60 @@ +// to set the time +let time = document.querySelector("#time"); +// audio sound for every hit +let sound = new Audio("assets_smash.mp3"); +// holes list to place mole randomly; +let holes = document.querySelectorAll("#container>div"); +// score variable +let s = document.querySelector("#score"); +// Total time is 20sec +let i = 20; +let score = 0; +let moveMole = null; +let start_time = () => { +// start will be disabled for duration of gameplay + document.querySelector("button").disabled = true; + s.innerText = score; + run(); + + // setinterval for changing timer on screen + let time_rem = setInterval(() => { + time.innerText = i + " Sec"; + i--; + if (i == -1) { + stopGame(time_rem); + } + }, 1000); +}; +document.querySelector("button").addEventListener("click", start_time); + +let stopGame = (time_rem) => { + clearInterval(time_rem); + // time reset to total time and start button enabled + i = 20; + document.querySelector("button").disabled = false; + clearInterval(moveMole); + score = 0; + // for each to clear last mole element as position is not known so all holes are cleared + holes.forEach(function (el) { + el.innerHTML = null; + }); +}; + +function run() { + let position = Math.floor(Math.random() * 9); + let mole = holes[position]; + let i = document.createElement("img"); + i.src = "https://cdn-icons-png.flaticon.com/512/5050/5050857.png"; + i.addEventListener("click", hitMole); + mole.append(i); + moveMole = setTimeout(() => { + mole.innerHTML = null; + run(); + }, 750); +} +//score is incremented and sound is played +function hitMole() { + score = score + 10; + sound.play(); + s.innerText = score; +} \ No newline at end of file From 33fb9dd87cf42f2e8ede6b3df287d1d536cc73c7 Mon Sep 17 00:00:00 2001 From: JRao2108 <104818952+JRao2108@users.noreply.github.com> Date: Wed, 11 Oct 2023 22:39:42 +0530 Subject: [PATCH 3/7] Create ReadMe --- ReadMe | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 ReadMe diff --git a/ReadMe b/ReadMe new file mode 100644 index 0000000000..7c6c9c10ce --- /dev/null +++ b/ReadMe @@ -0,0 +1,17 @@ +Mole Bash Mania +Mole Bash Mania is an arcade game, in which the player uses a small rubber mallet to hit robotic toy moles that pop up randomly in holes laid out across the surface of the machine. +The objective of the game is to hit the mole to get more points. +The game runs for 15 seconds with the mole moving randomly across 3 x 3 matrix. + +Tech Stack +HTML +CSS +Javascript + +Functionalities +Random selection of a hole to place the Mole. +Start button triggers the timer and movement of Mole across the grid. +Start button gets disabled untill 20 seconds are over. +To score 10 points you have to hit the mole by clicking on it before it disappers. +Counting of total score. +Responsive Layout. From 9ec38a2a7f01b7be57bb1723d9508585261a152e Mon Sep 17 00:00:00 2001 From: JRao2108 <104818952+JRao2108@users.noreply.github.com> Date: Wed, 11 Oct 2023 22:41:37 +0530 Subject: [PATCH 4/7] Rename ReadMe to Mole_Bash_Mania/ReadMe --- ReadMe => Mole_Bash_Mania/ReadMe | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename ReadMe => Mole_Bash_Mania/ReadMe (100%) diff --git a/ReadMe b/Mole_Bash_Mania/ReadMe similarity index 100% rename from ReadMe rename to Mole_Bash_Mania/ReadMe From 16ef8ecb1ab297e2bd7deb171e4f1e1f3617dd29 Mon Sep 17 00:00:00 2001 From: JRao2108 <104818952+JRao2108@users.noreply.github.com> Date: Wed, 11 Oct 2023 22:46:15 +0530 Subject: [PATCH 5/7] Create ReadMe --- Games/Mole Bash Mania/ReadMe | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 Games/Mole Bash Mania/ReadMe diff --git a/Games/Mole Bash Mania/ReadMe b/Games/Mole Bash Mania/ReadMe new file mode 100644 index 0000000000..212d36eb9c --- /dev/null +++ b/Games/Mole Bash Mania/ReadMe @@ -0,0 +1,17 @@ +Mole Bash Mania +Mole Bash Mania is an arcade game, in which the player uses a small rubber mallet to hit robotic toy moles that pop up randomly in holes laid out across the surface of the machine. +The objective of the game is to hit the mole to get more points. +The game runs for 20 seconds with the mole moving randomly across 3 x 3 matrix. + +Tech Stack +HTML +CSS +Javascript + +Functionalities +Random selection of a hole to place the Mole. +Start button triggers the timer and movement of Mole across the grid. +Start button gets disabled untill 20 seconds are over. +To score 10 points you have to hit the mole by clicking on it before it disappers. +Counting of total score. +Responsive Layout. From b1130ce50330238d45fb5918230fa88a4bf6a8c4 Mon Sep 17 00:00:00 2001 From: JRao2108 <104818952+JRao2108@users.noreply.github.com> Date: Wed, 11 Oct 2023 22:47:49 +0530 Subject: [PATCH 6/7] Add files via upload --- Games/Mole Bash Mania/assets_smash.mp3 | Bin 0 -> 5817 bytes Games/Mole Bash Mania/index.css | 113 +++++++++++++++++++++++++ Games/Mole Bash Mania/index.html | 42 +++++++++ Games/Mole Bash Mania/index.js | 60 +++++++++++++ 4 files changed, 215 insertions(+) create mode 100644 Games/Mole Bash Mania/assets_smash.mp3 create mode 100644 Games/Mole Bash Mania/index.css create mode 100644 Games/Mole Bash Mania/index.html create mode 100644 Games/Mole Bash Mania/index.js diff --git a/Games/Mole Bash Mania/assets_smash.mp3 b/Games/Mole Bash Mania/assets_smash.mp3 new file mode 100644 index 0000000000000000000000000000000000000000..5bbbd68d67414e0afd249a6f4a876989ae6f4357 GIT binary patch literal 5817 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 z zFJ6lG(ig_Q4nnT-JjG{HNakt1kS1SL5+5JET4+m%77vQGhH)vLPkq6hPWKBRp0^pe zx%w@*JHoWY#oExh@Ydn|_88h;vS%G%QRT;N}^R5p)* VAMWL)K%;;iK-=sM>fctve*tWei#z}T literal 0 HcmV?d00001 diff --git a/Games/Mole Bash Mania/index.css b/Games/Mole Bash Mania/index.css new file mode 100644 index 0000000000..ecc4890d87 --- /dev/null +++ b/Games/Mole Bash Mania/index.css @@ -0,0 +1,113 @@ +* { + font-family: Arial, Helvetica, sans-serif; + /* background-color: rgb(113, 143, 224); */ +} +#disp { + /* border: 1px solid blue; */ + text-align: center; + font-size: 25px; + line-height: 10px; + font-weight: 500; + color: black; +} +#score { + color: rgb(8, 147, 55); + font-weight: bold; +} +#time { + color: rgb(255, 0, 0); + font-weight: bold; +} +#container { + height: 450px; + width: 450px; + margin: auto; + margin-top: 50px; + padding: 20px 20px; + /* border: 1px solid red; */ + /* background-color: grey; */ + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 1fr); + gap: 60px; +} +#container > div { + /* border: 1px solid black; */ + background-color: #dfd1d1; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: flex-end; + overflow: hidden; + cursor: pointer; +} +#container > div > img { + width: 70%; + background-color: #dfd1d1; +} +button { + /* border: 1px solid red; */ + position: absolute; + left: 50%; + transform: translate(-50%, -50%); + margin-top: 40px; + background-color: white; + border-radius: 5px; + padding: 10px 20px; + cursor: pointer; +} +@media screen and (min-width: 300px) and (max-width: 700px) { + #disp { + /* background-color: pink; */ + width: 100%; + } + #container { + width: 250px; + height: 250px; + gap: 20px; + } +} +#instructions { + background-color: rgba(255, 255, 255, 0.9); + padding: 20px; + border-radius: 10px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); + margin-right: 20px; + text-align: center; + font-size: 22px; + line-height: 1.5; + color: #333; +} + +#instructions h2 { + font-size: 30px; + font-weight: bold; + margin-bottom: 10px; +} +#instructions { + background-image: url('https://media.giphy.com/media/OPb0ujC8EZWHi3e1rW/giphy.gif'); + background-size: cover; + background-repeat: no-repeat; + background-attachment: fixed; + animation: backgroundAnimation 10s linear infinite; + color: white; +} + +@keyframes backgroundAnimation { + 0% { + background-position: 0% 0%; + } + 100% { + background-position: 100% 0%; + } +} + +body { + background-image: url('https://cdn.marketjs.net/games/whack-a-mole/localization/en/media/graphics/game/horizont.jpg'); + background-size: cover; + background-repeat: no-repeat; + background-attachment: fixed; + +} + + diff --git a/Games/Mole Bash Mania/index.html b/Games/Mole Bash Mania/index.html new file mode 100644 index 0000000000..afa698edc8 --- /dev/null +++ b/Games/Mole Bash Mania/index.html @@ -0,0 +1,42 @@ + + + + + + + Whack-A-Mole + + + +
+

Mole Bash Mania

+

Game Instructions!!

+

| Click on the moles as they appear in the holes to score points |

+

| You have 20 seconds to whack as many moles as possible |

+

| Each mole whacked gives you 10 points |

+

| Good luck!! |

+
+ +
+

Score: 0

+

Time Remaining: 20 Sec

+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + diff --git a/Games/Mole Bash Mania/index.js b/Games/Mole Bash Mania/index.js new file mode 100644 index 0000000000..75508d8244 --- /dev/null +++ b/Games/Mole Bash Mania/index.js @@ -0,0 +1,60 @@ +// to set the time +let time = document.querySelector("#time"); +// audio sound for every hit +let sound = new Audio("assets_smash.mp3"); +// holes list to place mole randomly; +let holes = document.querySelectorAll("#container>div"); +// score variable +let s = document.querySelector("#score"); +// Total time is 20sec +let i = 20; +let score = 0; +let moveMole = null; +let start_time = () => { +// start will be disabled for duration of gameplay + document.querySelector("button").disabled = true; + s.innerText = score; + run(); + + // setinterval for changing timer on screen + let time_rem = setInterval(() => { + time.innerText = i + " Sec"; + i--; + if (i == -1) { + stopGame(time_rem); + } + }, 1000); +}; +document.querySelector("button").addEventListener("click", start_time); + +let stopGame = (time_rem) => { + clearInterval(time_rem); + // time reset to total time and start button enabled + i = 20; + document.querySelector("button").disabled = false; + clearInterval(moveMole); + score = 0; + // for each to clear last mole element as position is not known so all holes are cleared + holes.forEach(function (el) { + el.innerHTML = null; + }); +}; + +function run() { + let position = Math.floor(Math.random() * 9); + let mole = holes[position]; + let i = document.createElement("img"); + i.src = "https://cdn-icons-png.flaticon.com/512/5050/5050857.png"; + i.addEventListener("click", hitMole); + mole.append(i); + moveMole = setTimeout(() => { + mole.innerHTML = null; + run(); + }, 750); +} +//score is incremented and sound is played +function hitMole() { + score = score + 10; + sound.play(); + s.innerText = score; +} \ No newline at end of file From 7a4faab835246343db5142a99bab1c50e2a8b783 Mon Sep 17 00:00:00 2001 From: JRao2108 <104818952+JRao2108@users.noreply.github.com> Date: Wed, 11 Oct 2023 22:48:40 +0530 Subject: [PATCH 7/7] Delete Mole_Bash_Mania directory --- Mole_Bash_Mania/ReadMe | 17 ----- Mole_Bash_Mania/assets_smash.mp3 | Bin 5817 -> 0 bytes Mole_Bash_Mania/index.css | 113 ------------------------------- Mole_Bash_Mania/index.html | 42 ------------ Mole_Bash_Mania/index.js | 60 ---------------- 5 files changed, 232 deletions(-) delete mode 100644 Mole_Bash_Mania/ReadMe delete mode 100644 Mole_Bash_Mania/assets_smash.mp3 delete mode 100644 Mole_Bash_Mania/index.css delete mode 100644 Mole_Bash_Mania/index.html delete mode 100644 Mole_Bash_Mania/index.js diff --git a/Mole_Bash_Mania/ReadMe b/Mole_Bash_Mania/ReadMe deleted file mode 100644 index 7c6c9c10ce..0000000000 --- a/Mole_Bash_Mania/ReadMe +++ /dev/null @@ -1,17 +0,0 @@ -Mole Bash Mania -Mole Bash Mania is an arcade game, in which the player uses a small rubber mallet to hit robotic toy moles that pop up randomly in holes laid out across the surface of the machine. -The objective of the game is to hit the mole to get more points. -The game runs for 15 seconds with the mole moving randomly across 3 x 3 matrix. - -Tech Stack -HTML -CSS -Javascript - -Functionalities -Random selection of a hole to place the Mole. -Start button triggers the timer and movement of Mole across the grid. -Start button gets disabled untill 20 seconds are over. -To score 10 points you have to hit the mole by clicking on it before it disappers. -Counting of total score. -Responsive Layout. diff --git a/Mole_Bash_Mania/assets_smash.mp3 b/Mole_Bash_Mania/assets_smash.mp3 deleted file mode 100644 index 5bbbd68d67414e0afd249a6f4a876989ae6f4357..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 5817 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 z zFJ6lG(ig_Q4nnT-JjG{HNakt1kS1SL5+5JET4+m%77vQGhH)vLPkq6hPWKBRp0^pe zx%w@*JHoWY#oExh@Ydn|_88h;vS%G%QRT;N}^R5p)* VAMWL)K%;;iK-=sM>fctve*tWei#z}T diff --git a/Mole_Bash_Mania/index.css b/Mole_Bash_Mania/index.css deleted file mode 100644 index ecc4890d87..0000000000 --- a/Mole_Bash_Mania/index.css +++ /dev/null @@ -1,113 +0,0 @@ -* { - font-family: Arial, Helvetica, sans-serif; - /* background-color: rgb(113, 143, 224); */ -} -#disp { - /* border: 1px solid blue; */ - text-align: center; - font-size: 25px; - line-height: 10px; - font-weight: 500; - color: black; -} -#score { - color: rgb(8, 147, 55); - font-weight: bold; -} -#time { - color: rgb(255, 0, 0); - font-weight: bold; -} -#container { - height: 450px; - width: 450px; - margin: auto; - margin-top: 50px; - padding: 20px 20px; - /* border: 1px solid red; */ - /* background-color: grey; */ - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-template-rows: repeat(3, 1fr); - gap: 60px; -} -#container > div { - /* border: 1px solid black; */ - background-color: #dfd1d1; - border-radius: 50%; - display: flex; - justify-content: center; - align-items: flex-end; - overflow: hidden; - cursor: pointer; -} -#container > div > img { - width: 70%; - background-color: #dfd1d1; -} -button { - /* border: 1px solid red; */ - position: absolute; - left: 50%; - transform: translate(-50%, -50%); - margin-top: 40px; - background-color: white; - border-radius: 5px; - padding: 10px 20px; - cursor: pointer; -} -@media screen and (min-width: 300px) and (max-width: 700px) { - #disp { - /* background-color: pink; */ - width: 100%; - } - #container { - width: 250px; - height: 250px; - gap: 20px; - } -} -#instructions { - background-color: rgba(255, 255, 255, 0.9); - padding: 20px; - border-radius: 10px; - box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); - margin-right: 20px; - text-align: center; - font-size: 22px; - line-height: 1.5; - color: #333; -} - -#instructions h2 { - font-size: 30px; - font-weight: bold; - margin-bottom: 10px; -} -#instructions { - background-image: url('https://media.giphy.com/media/OPb0ujC8EZWHi3e1rW/giphy.gif'); - background-size: cover; - background-repeat: no-repeat; - background-attachment: fixed; - animation: backgroundAnimation 10s linear infinite; - color: white; -} - -@keyframes backgroundAnimation { - 0% { - background-position: 0% 0%; - } - 100% { - background-position: 100% 0%; - } -} - -body { - background-image: url('https://cdn.marketjs.net/games/whack-a-mole/localization/en/media/graphics/game/horizont.jpg'); - background-size: cover; - background-repeat: no-repeat; - background-attachment: fixed; - -} - - diff --git a/Mole_Bash_Mania/index.html b/Mole_Bash_Mania/index.html deleted file mode 100644 index afa698edc8..0000000000 --- a/Mole_Bash_Mania/index.html +++ /dev/null @@ -1,42 +0,0 @@ - - - - - - - Whack-A-Mole - - - -
-

Mole Bash Mania

-

Game Instructions!!

-

| Click on the moles as they appear in the holes to score points |

-

| You have 20 seconds to whack as many moles as possible |

-

| Each mole whacked gives you 10 points |

-

| Good luck!! |

-
- -
-

Score: 0

-

Time Remaining: 20 Sec

-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - - - - diff --git a/Mole_Bash_Mania/index.js b/Mole_Bash_Mania/index.js deleted file mode 100644 index 75508d8244..0000000000 --- a/Mole_Bash_Mania/index.js +++ /dev/null @@ -1,60 +0,0 @@ -// to set the time -let time = document.querySelector("#time"); -// audio sound for every hit -let sound = new Audio("assets_smash.mp3"); -// holes list to place mole randomly; -let holes = document.querySelectorAll("#container>div"); -// score variable -let s = document.querySelector("#score"); -// Total time is 20sec -let i = 20; -let score = 0; -let moveMole = null; -let start_time = () => { -// start will be disabled for duration of gameplay - document.querySelector("button").disabled = true; - s.innerText = score; - run(); - - // setinterval for changing timer on screen - let time_rem = setInterval(() => { - time.innerText = i + " Sec"; - i--; - if (i == -1) { - stopGame(time_rem); - } - }, 1000); -}; -document.querySelector("button").addEventListener("click", start_time); - -let stopGame = (time_rem) => { - clearInterval(time_rem); - // time reset to total time and start button enabled - i = 20; - document.querySelector("button").disabled = false; - clearInterval(moveMole); - score = 0; - // for each to clear last mole element as position is not known so all holes are cleared - holes.forEach(function (el) { - el.innerHTML = null; - }); -}; - -function run() { - let position = Math.floor(Math.random() * 9); - let mole = holes[position]; - let i = document.createElement("img"); - i.src = "https://cdn-icons-png.flaticon.com/512/5050/5050857.png"; - i.addEventListener("click", hitMole); - mole.append(i); - moveMole = setTimeout(() => { - mole.innerHTML = null; - run(); - }, 750); -} -//score is incremented and sound is played -function hitMole() { - score = score + 10; - sound.play(); - s.innerText = score; -} \ No newline at end of file