ChromeGaming · pallasivasai · Aug 8, 2024 · Aug 10, 2024
diff --git a/README.md b/README.md
@@ -264,6 +264,8 @@ ________________________________________________________________________________
 |  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) |
+
 
 </div>
 

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/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;
+}
diff --git a/additionalpage/game.html b/additionalpage/game.html
@@ -2562,6 +2562,67 @@ <h4 class = "text-white uppercase game-card-title">Shape_Clicker_Game</h4>
 
 
 
+
+<!--Card start-->
+                <div class = "game-card">
+                    <div class = "game-card-top img-fit-cover">
+                     <video src="https://drive.google.com/file/d/1Yv5Wb1IhcOXD3Fsxv3KS-LJmw6LA7kdu/view?usp=drive_link" link " type="video/mp4" muted loop class="clip"  ></video>
+                        <img src = "../SinglePlayer - Games/Banner - images/Brick_Breaker_Game.png" alt = "">
+                        <div class = "ratings-count">
+                            45
+                            <img src = "../SinglePlayer - Games/Banner - images/Brick_Breaker_Game.png" alt = "" class = "ms-2">
+                        </div>
+                    </div>
+                    <div class = "game-card-bottom">
+                    <div class="share-icon text-2xl" onclick="copyLink(this)">
+                            <i class="fas fa-share-alt"></i>
+                            <input type="hidden"
+                                value="https://gamesphere-multiplayer.github.io/GameSphere/SinglePlayer%20-%20Games/Brick_Breaker_Game/index.html" /> 
+                                <!--If there are spaces in your naming of folder, put %20 in between, ex:
+                                link%20to%20the%html%file%20for%your&game-->
+
+                                <!--The share link will be active only when it is deployed over website-->
+                        </div>
+
+                        <div class = "flex flex-col sm:flex-row justify-between items-start flex-wrap">
+                            <div class = "py-1">
+                                <h4 class = "text-white uppercase game-card-title">Brick_Breaker_Game</h4>
+                                <p class = "para-text">Brick_Breaker_Game</p>
+                            </div>
+                            <div class = "star-rating mt-2 sm:mt-0 py-1">
+                                <img src = "../assets/icons/star-green.svg">
+                                <img src = "../assets/icons/star-green.svg">
+                                <img src = "../assets/icons/star-green.svg">
+                                <img src = "../assets/icons/star-green.svg">
+                                <img src = "../assets/icons/star-green-half.svg">
+                            </div>
+                        </div>
+                        <div class = "block-wrap flex justify-between items-end">
+                            <div class = "details-group">
+                                <div class = "flex items-center">
+                                    <p class = "font-semibold">Release Date: &nbsp;</p>
+                                    <p>20.06.2023</p>
+                                </div>
+                                <div class = "flex items-center">
+                                    <p class = "font-semibold">Updated: &nbsp;</p>
+                                    <p>Action | Desktop</p>
+                                </div>
+                            </div>
+                            <div class = "flex flex-col items-end justify-between">
+                                <a target="_blank" href = "../SinglePlayer - Games/Brick_Breaker_Game/index.html" class = "btn-primary uppercase">Play Now</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+<!--Card end-->
+
+
+
+
+
+
+
+
                 <!--Card start-->
                 <div class="game-card">
                     <div class="game-card-top img-fit-cover">