kunjgit · kunjgit · Jul 9, 2024 · Jul 3, 2024 · Jul 3, 2024 · Jul 3, 2024
diff --git a/Games/Beat_a_mole/README.md b/Games/Beat_a_mole/README.md
@@ -0,0 +1,35 @@
+# **Beat_a_Mole** 
+
+---
+
+<br>
+
+## **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
+<br>
+
+## **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
+<br>
+
+## **Screenshots 📸**
+<br>
+
+![image](../../assets/Beat_a_mole.png)
+
+<br>
diff --git a/Games/Beat_a_mole/assets/Beat_a_mole.png b/Games/Beat_a_mole/assets/Beat_a_mole.png
diff --git a/Games/Beat_a_mole/assets/mario-bg.jpg b/Games/Beat_a_mole/assets/mario-bg.jpg
diff --git a/Games/Beat_a_mole/assets/monty-mole.png b/Games/Beat_a_mole/assets/monty-mole.png
diff --git a/Games/Beat_a_mole/assets/pipe.png b/Games/Beat_a_mole/assets/pipe.png
diff --git a/Games/Beat_a_mole/assets/piranha-plant.png b/Games/Beat_a_mole/assets/piranha-plant.png
diff --git a/Games/Beat_a_mole/assets/soil.png b/Games/Beat_a_mole/assets/soil.png
diff --git a/Games/Beat_a_mole/assets/start-bg.png b/Games/Beat_a_mole/assets/start-bg.png
diff --git a/Games/Beat_a_mole/game.html b/Games/Beat_a_mole/game.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Beat a Mole</title>
+    <link rel="stylesheet" href="mole.css">
+    <script src="mole.js"></script>
+</head>
+<body>
+    <h1 class="beat">Beat a Mole</h1>
+    <h2 id="score">0</h2>
+    <!-- 3x3 -->
+    <div id="board">
+    </div>
+</body>
+</html>
diff --git a/Games/Beat_a_mole/index.html b/Games/Beat_a_mole/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Whack a Mole</title>
+    <link rel="stylesheet" href="start.css">
+</head>
+<body>
+    <div class="main">
+        <div class="form-box">
+            <h1 class="text">Beat a Mole</h1>
+            <br>
+            <br>
+            <br>
+            <div class="start-btn">
+                <a href="game.html">Start</a>
+              </div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/Games/Beat_a_mole/mole.css 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
@@ -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
+        //<div id="0-8"></div>
+        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;
+    }
+}
diff --git a/Games/Beat_a_mole/start.css 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;
+    }
+}