diff --git a/Games/Beat_a_mole/README.md b/Games/Beat_a_mole/README.md new file mode 100644 index 0000000000..8e61994d35 --- /dev/null +++ b/Games/Beat_a_mole/README.md @@ -0,0 +1,35 @@ +# **Beat_a_Mole** + +--- + +
+ +## **Description 📃** +- The Beat-a-Mole game is a classic arcade game implemented using HTML, CSS, and JavaScript. Players must hit moles that randomly pop up on the screen but if you hit the plant the game will be over. The game features a simple and intuitive user interface with responsive design elements. + +## **functionalities 🎮** +- Hit moles that randomly pop up from holes on the screen +- Score points for successfully hitting moles +- Track your score as you play +- Game ends if you hit the plant +- Responsive design for easy play on different devices +- Start a new round to play again +
+ +## **How to play? 🕹ī¸** + +- Start the game by clicking on the "Start" button +- Moles will randomly appear from different holes on the screen +- Use your mouse or touch screen to click on the moles as quickly as possible +- Each successful hit on a mole will earn you points +- Aim to achieve the highest score. +- The game ends when you hit the plant +- Your final score will be displayed on the screen +
+ +## **Screenshots 📸** +
+ +![image](../../assets/Beat_a_mole.png) + +
diff --git a/Games/Beat_a_mole/assets/Beat_a_mole.png b/Games/Beat_a_mole/assets/Beat_a_mole.png new file mode 100644 index 0000000000..ba3c6c84bd Binary files /dev/null and b/Games/Beat_a_mole/assets/Beat_a_mole.png differ diff --git a/Games/Beat_a_mole/assets/mario-bg.jpg b/Games/Beat_a_mole/assets/mario-bg.jpg new file mode 100644 index 0000000000..d2e4aa344f Binary files /dev/null and b/Games/Beat_a_mole/assets/mario-bg.jpg differ diff --git a/Games/Beat_a_mole/assets/monty-mole.png b/Games/Beat_a_mole/assets/monty-mole.png new file mode 100644 index 0000000000..523a515233 Binary files /dev/null and b/Games/Beat_a_mole/assets/monty-mole.png differ diff --git a/Games/Beat_a_mole/assets/pipe.png b/Games/Beat_a_mole/assets/pipe.png new file mode 100644 index 0000000000..fb1d6be633 Binary files /dev/null and b/Games/Beat_a_mole/assets/pipe.png differ diff --git a/Games/Beat_a_mole/assets/piranha-plant.png b/Games/Beat_a_mole/assets/piranha-plant.png new file mode 100644 index 0000000000..ad5fb991b9 Binary files /dev/null and b/Games/Beat_a_mole/assets/piranha-plant.png differ diff --git a/Games/Beat_a_mole/assets/soil.png b/Games/Beat_a_mole/assets/soil.png new file mode 100644 index 0000000000..94e3b38d2c Binary files /dev/null and b/Games/Beat_a_mole/assets/soil.png differ diff --git a/Games/Beat_a_mole/assets/start-bg.png b/Games/Beat_a_mole/assets/start-bg.png new file mode 100644 index 0000000000..d90aff74ee Binary files /dev/null and b/Games/Beat_a_mole/assets/start-bg.png differ diff --git a/Games/Beat_a_mole/game.html b/Games/Beat_a_mole/game.html new file mode 100644 index 0000000000..ecb31c988d --- /dev/null +++ b/Games/Beat_a_mole/game.html @@ -0,0 +1,17 @@ + + + + + + Beat a Mole + + + + +

Beat a Mole

+

0

+ +
+
+ + diff --git a/Games/Beat_a_mole/index.html b/Games/Beat_a_mole/index.html new file mode 100644 index 0000000000..e39b66cede --- /dev/null +++ b/Games/Beat_a_mole/index.html @@ -0,0 +1,22 @@ + + + + + + Whack a Mole + + + +
+
+

Beat a Mole

+
+
+
+
+ Start +
+
+
+ + \ No newline at end of file diff --git a/Games/Beat_a_mole/mole.css b/Games/Beat_a_mole/mole.css new file mode 100644 index 0000000000..7f05841809 --- /dev/null +++ b/Games/Beat_a_mole/mole.css @@ -0,0 +1,52 @@ +body { + font-family: Arial, Helvetica, sans-serif; + text-align: center; + background: url("assets/mario-bg.jpg"); + background-size: cover; +} + +#board { + max-width: 540px; /* Set maximum width */ + width: 90%; /* Set width to a percentage */ + aspect-ratio: 1; /* Maintain aspect ratio */ + margin: 0 auto; + display: flex; + flex-wrap: wrap; + background: url("assets/soil.png"); + background-size: cover; + border: 3px solid white; + border-radius: 25px; +} + +#board div { + width: 33.33%; /* Set width to 1/3 of the parent */ + padding-bottom: 33.33%; /* Maintain a square aspect ratio */ + background-image: url("assets/pipe.png"); + background-size: cover; + position: relative; +} + +#board div img { + width: 60%; /* Adjust size of mole image */ + height: auto; /* Maintain aspect ratio */ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.beat{ + margin-left: 10px; +} + +@media (max-width: 600px) { + #board { + max-width: 400px; + } +} + +@media (max-width: 400px) { + #board { + max-width: 300px; + } +} diff --git a/Games/Beat_a_mole/mole.js b/Games/Beat_a_mole/mole.js new file mode 100644 index 0000000000..2cde9e2e0c --- /dev/null +++ b/Games/Beat_a_mole/mole.js @@ -0,0 +1,77 @@ +let currMoleTile; +let currPlantTile; +let score = 0; +let gameOver = false; + +window.onload = function() { + setGame(); +} + +function setGame() { + //set up the grid in html + for (let i = 0; i < 9; i++) { //i goes from 0 to 8, stops at 9 + //
+ let tile = document.createElement("div"); + tile.id = i.toString(); + tile.addEventListener("click", selectTile); + document.getElementById("board").appendChild(tile); + } + setInterval(setMole, 1000); // 1000 miliseconds = 1 second, every 1 second call setMole + setInterval(setPlant, 2000); // 2000 miliseconds = 2 seconds, every 2 second call setPlant +} + +function getRandomTile() { + //math.random --> 0-1 --> (0-1) * 9 = (0-9) --> round down to (0-8) integers + let num = Math.floor(Math.random() * 9); + return num.toString(); +} + +function setMole() { + if (gameOver) { + return; + } + if (currMoleTile) { + currMoleTile.innerHTML = ""; + } + let mole = document.createElement("img"); + mole.src = "assets/monty-mole.png"; + + let num = getRandomTile(); + if (currPlantTile && currPlantTile.id == num) { + return; + } + currMoleTile = document.getElementById(num); + currMoleTile.appendChild(mole); +} + +function setPlant() { + if (gameOver) { + return; + } + if (currPlantTile) { + currPlantTile.innerHTML = ""; + } + let plant = document.createElement("img"); + plant.src = "assets/piranha-plant.png"; + + let num = getRandomTile(); + if (currMoleTile && currMoleTile.id == num) { + return; + } + currPlantTile = document.getElementById(num); + currPlantTile.appendChild(plant); +} + +function selectTile() { + if (gameOver) { + return; + } + if (this == currMoleTile) { + score += 10; + document.getElementById("score").innerText = score.toString(); //update score html + } + else if (this == currPlantTile) { + document.getElementById("score").innerText = "GAME OVER: " + score.toString(); //update score html + gameOver = true; + } +} \ No newline at end of file diff --git a/Games/Beat_a_mole/start.css b/Games/Beat_a_mole/start.css new file mode 100644 index 0000000000..d92f3d6e27 --- /dev/null +++ b/Games/Beat_a_mole/start.css @@ -0,0 +1,64 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Times New Roman', Times, serif; +} + +html, body { + height: 100%; +} + +.main { + height: 100vh; + width: 100%; + background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(assets/start-bg.png); + background-position: center; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; +} + +.form-box { + width: 80%; + max-width: 600px; + padding: 20px; + background-color: rgb(196, 125, 31); + text-align: center; + border-radius: 8px; +} + +.text { + font-size: 2.5rem; + margin-bottom: 40px; + font-family: 'Courier New', Courier, monospace; +} + +.start-btn a { + text-decoration: none; + color: white; + padding: 10px 20px; + font-size: 1.25rem; + border: 2px solid rgba(0, 0, 0, 0.265); + border-radius: 8px; + background-color: rgb(204, 7, 14); + display: inline-block; + transition: background-color 0.2s linear, border 0.2s linear; +} + +.start-btn a:hover { + background-color: rgba(134, 4, 4, 0.943); + border: 2px solid rgb(19, 18, 18); +} + +@media (max-width: 600px) { + .text { + font-size: 2rem; + } + + .start-btn a { + font-size: 1rem; + padding: 8px 16px; + } +} diff --git a/README.md b/README.md index 9ab59ff0c0..812a96534a 100644 --- a/README.md +++ b/README.md @@ -366,6 +366,8 @@ This repository also provides one such platforms where contributers come over an |[Town-Rise](https://github.com/kunjgit/GameZone/tree/main/Games/Town_Rise_Game)| | [IKnowYou-Mind-Reading-Game](https://github.com/kunjgit/GameZone/tree/main/Games/IKnowYou-Mind-Reading-Game) | |[Rock_Paper_Scissors_Neon](https://github.com/kunjgit/GameZone/tree/main/Games/Rock_Paper_Scissors_Neon)| +|[Beat_a_mole](https://github.com/kunjgit/GameZone/tree/main/Games/Beat_a_mole)| +