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 @@ + + +
+ + + +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
+