ChromeGaming · Durgesh4993 · Aug 9, 2024 · Aug 8, 2024 · Aug 8, 2024 · Aug 8, 2024
diff --git a/README.md b/README.md
@@ -264,6 +264,9 @@ ________________________________________________________________________________
 |  206  | [Bomber_Game](.SinglePlayer%20-%20Games/Bomber_Game) |
 |  207  | [Shape_Clicker_Game](.SinglePlayer%20-%20Games/Shape_Clicker_Game) |
 |  208  | [Arkanoid_Game](.SinglePlayer%20-%20Games/Arkanoid_Game) |
+|  209  | [Brick_Breaker_Game](.SinglePlayer%20-%20Games/Brick_Breaker_Game) |
+|  210  | [Bash_Mole_Game](.SinglePlayer%20-%20Games/Bash_Mole_Game) |
+
 
 </div>
 

diff --git a/SinglePlayer - Games/Banner - image/Bash_Mole_Game.png b/SinglePlayer - Games/Banner - image/Bash_Mole_Game.png
diff --git a/SinglePlayer - Games/Banner - image/Brick_Breaker_Game.png b/SinglePlayer - Games/Banner - image/Brick_Breaker_Game.png
diff --git a/SinglePlayer - Games/Bash_Mole_Game/README.md b/SinglePlayer - Games/Bash_Mole_Game/README.md
@@ -0,0 +1,31 @@
+# Bash Mole Game
+
+This is a simple **Bash Mole Game** built using HTML, CSS, and JavaScript. The objective of the game is to click (bash) on the moles that pop up from the holes to earn points.
+
+## How to Play
+
+- The game lasts for 10 seconds.
+- Moles will randomly pop up from the holes.
+- Click on the moles to increase your score.
+- Your score is displayed at the top of the page.
+
+## Files
+
+- `index.html`: The main HTML file that sets up the game structure.
+- `style.css`: The CSS file for styling the game interface.
+- `script.js`: The JavaScript file containing the game logic.
+
+## How to Run
+
+1. Clone or download this repository.
+2. Open `index.html` in your web browser.
+
+## Future Enhancements
+
+- Add different levels with increasing difficulty.
+- Implement a high-score tracking system.
+- Add sound effects and animations for better gameplay experience.
+
+## License
+
+This project is open-source and available under the MIT License.
diff --git a/SinglePlayer - Games/Bash_Mole_Game/index.html b/SinglePlayer - Games/Bash_Mole_Game/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bash Mole Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>Bash Mole Game</h1>
+    <p id="score">Score: 0</p>
+    <div class="grid">
+        <div class="hole" id="hole1"></div>
+        <div class="hole" id="hole2"></div>
+        <div class="hole" id="hole3"></div>
+        <div class="hole" id="hole4"></div>
+        <div class="hole" id="hole5"></div>
+        <div class="hole" id="hole6"></div>
+        <div class="hole" id="hole7"></div>
+        <div class="hole" id="hole8"></div>
+        <div class="hole" id="hole9"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/SinglePlayer - Games/Bash_Mole_Game/script.js b/SinglePlayer - Games/Bash_Mole_Game/script.js
@@ -0,0 +1,49 @@
+const holes = document.querySelectorAll('.hole');
+const scoreDisplay = document.getElementById('score');
+let score = 0;
+let lastHole;
+let timeUp = false;
+
+function randomTime(min, max) {
+    return Math.round(Math.random() * (max - min) + min);
+}
+
+function randomHole(holes) {
+    const index = Math.floor(Math.random() * holes.length);
+    const hole = holes[index];
+    if (hole === lastHole) {
+        return randomHole(holes);
+    }
+    lastHole = hole;
+    return hole;
+}
+
+function peep() {
+    const time = randomTime(200, 1000);
+    const hole = randomHole(holes);
+    hole.classList.add('mole');
+    setTimeout(() => {
+        hole.classList.remove('mole');
+        if (!timeUp) peep();
+    }, time);
+}
+
+function startGame() {
+    scoreDisplay.textContent = 'Score: 0';
+    score = 0;
+    timeUp = false;
+    peep();
+    setTimeout(() => timeUp = true, 10000); // 10 seconds game
+}
+
+function whack(e) {
+    if (!e.isTrusted) return; // Prevent cheating
+    if (e.target.classList.contains('mole')) {
+        score++;
+        e.target.classList.remove('mole');
+        scoreDisplay.textContent = 'Score: ' + score;
+    }
+}
+
+holes.forEach(hole => hole.addEventListener('click', whack));
+startGame();
diff --git a/SinglePlayer - Games/Bash_Mole_Game/style.css b/SinglePlayer - Games/Bash_Mole_Game/style.css
@@ -0,0 +1,38 @@
+body {
+    text-align: center;
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+    margin: 0;
+    padding: 0;
+}
+
+h1 {
+    margin-top: 20px;
+    font-size: 2.5rem;
+    color: #333;
+}
+
+#score {
+    font-size: 1.5rem;
+    margin: 10px 0;
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: repeat(3, 150px);
+    grid-gap: 10px;
+    justify-content: center;
+    margin-top: 20px;
+}
+
+.hole {
+    width: 150px;
+    height: 150px;
+    background-color: #8c8c8c;
+    border-radius: 10px;
+    position: relative;
+}
+
+.hole.mole {
+    background-color: #ff6347;
+}
diff --git a/SinglePlayer - Games/Brick_Breaker_Game/README.md b/SinglePlayer - Games/Brick_Breaker_Game/README.md
@@ -0,0 +1,31 @@
+# Brick Breaker Game
+
+This is a simple Brick Breaker game built using HTML, CSS, and JavaScript. The game involves a paddle that the player moves left and right to bounce a ball against bricks, breaking them.
+
+## How to Play
+
+- Use the left and right arrow keys to move the paddle.
+- The objective is to break all the bricks without letting the ball fall off the screen.
+- You have 3 lives. If you lose all lives, the game is over.
+
+## Files
+
+- `index.html`: The main HTML file that sets up the game canvas.
+- `style.css`: The CSS file for styling the game canvas and background.
+- `script.js`: The JavaScript file containing the game logic and rendering.
+
+## How to Run
+
+1. Clone or download this repository.
+2. Open `index.html` in your web browser.
+
+## Future Enhancements
+
+- Add more levels with increasing difficulty.
+- Implement power-ups like larger paddles, extra balls, etc.
+- Add sound effects and background music.
+
+## License
+
+This project is open-source and available under the MIT License.
+
diff --git a/SinglePlayer - Games/Brick_Breaker_Game/index.html b/SinglePlayer - Games/Brick_Breaker_Game/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Brick Breaker Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <canvas id="gameCanvas"></canvas>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/SinglePlayer - Games/Brick_Breaker_Game/script.js b/SinglePlayer - Games/Brick_Breaker_Game/script.js
@@ -0,0 +1,171 @@
+const canvas = document.getElementById("gameCanvas");
+const ctx = canvas.getContext("2d");
+
+canvas.width = 480;
+canvas.height = 320;
+
+const paddleHeight = 10;
+const paddleWidth = 75;
+let paddleX = (canvas.width - paddleWidth) / 2;
+
+let rightPressed = false;
+let leftPressed = false;
+
+const ballRadius = 10;
+let x = canvas.width / 2;
+let y = canvas.height - 30;
+let dx = 2;
+let dy = -2;
+
+const brickRowCount = 3;
+const brickColumnCount = 5;
+const brickWidth = 75;
+const brickHeight = 20;
+const brickPadding = 10;
+const brickOffsetTop = 30;
+const brickOffsetLeft = 30;
+
+let bricks = [];
+for (let c = 0; c < brickColumnCount; c++) {
+    bricks[c] = [];
+    for (let r = 0; r < brickRowCount; r++) {
+        bricks[c][r] = { x: 0, y: 0, status: 1 };
+    }
+}
+
+let score = 0;
+let lives = 3;
+
+document.addEventListener("keydown", keyDownHandler);
+document.addEventListener("keyup", keyUpHandler);
+
+function keyDownHandler(e) {
+    if (e.key === "Right" || e.key === "ArrowRight") {
+        rightPressed = true;
+    } else if (e.key === "Left" || e.key === "ArrowLeft") {
+        leftPressed = true;
+    }
+}
+
+function keyUpHandler(e) {
+    if (e.key === "Right" || e.key === "ArrowRight") {
+        rightPressed = false;
+    } else if (e.key === "Left" || e.key === "ArrowLeft") {
+        leftPressed = false;
+    }
+}
+
+function collisionDetection() {
+    for (let c = 0; c < brickColumnCount; c++) {
+        for (let r = 0; r < brickRowCount; r++) {
+            let b = bricks[c][r];
+            if (b.status === 1) {
+                if (
+                    x > b.x &&
+                    x < b.x + brickWidth &&
+                    y > b.y &&
+                    y < b.y + brickHeight
+                ) {
+                    dy = -dy;
+                    b.status = 0;
+                    score++;
+                    if (score === brickRowCount * brickColumnCount) {
+                        alert("YOU WIN, CONGRATS!");
+                        document.location.reload();
+                    }
+                }
+            }
+        }
+    }
+}
+
+function drawBall() {
+    ctx.beginPath();
+    ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
+    ctx.fillStyle = "#00ff00";
+    ctx.fill();
+    ctx.closePath();
+}
+
+function drawPaddle() {
+    ctx.beginPath();
+    ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
+    ctx.fillStyle = "#00ff00";
+    ctx.fill();
+    ctx.closePath();
+}
+
+function drawBricks() {
+    for (let c = 0; c < brickColumnCount; c++) {
+        for (let r = 0; r < brickRowCount; r++) {
+            if (bricks[c][r].status === 1) {
+                let brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
+                let brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
+                bricks[c][r].x = brickX;
+                bricks[c][r].y = brickY;
+                ctx.beginPath();
+                ctx.rect(brickX, brickY, brickWidth, brickHeight);
+                ctx.fillStyle = "#ff0000";
+                ctx.fill();
+                ctx.closePath();
+            }
+        }
+    }
+}
+
+function drawScore() {
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#00ff00";
+    ctx.fillText("Score: " + score, 8, 20);
+}
+
+function drawLives() {
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#00ff00";
+    ctx.fillText("Lives: " + lives, canvas.width - 65, 20);
+}
+
+function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawBricks();
+    drawBall();
+    drawPaddle();
+    drawScore();
+    drawLives();
+    collisionDetection();
+
+    if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
+        dx = -dx;
+    }
+    if (y + dy < ballRadius) {
+        dy = -dy;
+    } else if (y + dy > canvas.height - ballRadius) {
+        if (x > paddleX && x < paddleX + paddleWidth) {
+            dy = -dy;
+        } else {
+            lives--;
+            if (!lives) {
+                alert("GAME OVER");
+                document.location.reload();
+            } else {
+                x = canvas.width / 2;
+                y = canvas.height - 30;
+                dx = 3;
+                dy = -3;
+                paddleX = (canvas.width - paddleWidth) / 2;
+            }
+        }
+    }
+
+    if (rightPressed && paddleX < canvas.width - paddleWidth) {
+        paddleX += 7;
+    } else if (leftPressed && paddleX > 0) {
+        paddleX -= 7;
+    }
+
+    x += dx;
+    y += dy;
+    requestAnimationFrame(draw);
+}
+
+draw();
diff --git a/SinglePlayer - Games/Brick_Breaker_Game/style.css b/SinglePlayer - Games/Brick_Breaker_Game/style.css
@@ -0,0 +1,14 @@
+body {
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #222;
+}
+
+#gameCanvas {
+    background: #000;
+    display: block;
+    border: 1px solid #fff;
+}