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] 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