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. diff --git a/Games/Mole Bash Mania/assets_smash.mp3 b/Games/Mole Bash Mania/assets_smash.mp3 new file mode 100644 index 0000000000..5bbbd68d67 Binary files /dev/null and b/Games/Mole Bash Mania/assets_smash.mp3 differ 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