kunjgit · ananyag309 · Jul 12, 2024 · Jul 12, 2024 · Jul 12, 2024
diff --git a/Games/Brick_Blaster/README.md b/Games/Brick_Blaster/README.md
@@ -0,0 +1,13 @@
+# Brick Blaster
+
+**Brick Blaster** is an engaging arcade game where players control a paddle to keep a ball in play, aiming to break all the bricks arranged in rows and columns at the top of the canvas.
+
+## Features
+
+- **Canvas Setup**: The game is played on a canvas element with a dynamic gradient background.
+- **Ball Movement**: The ball moves with a specified speed and bounces off walls, the paddle, and bricks.
+- **Paddle Control**: Move the paddle left and right using arrow keys or mouse movements to keep the ball in play.
+- **Brick Layout**: Bricks disappear when hit by the ball, incrementing the score.
+- **Collision Detection**: Detects collisions between the ball, bricks, paddle, and canvas edges.
+- **Popup Messages**: Displays "Game Over" and "Play Again" functionality using popup messages.
+
diff --git a/Games/Brick_Blaster/index.html b/Games/Brick_Blaster/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Brick Blaster</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <canvas id="canvas1" width="730" height="600"></canvas>
+    <div id="popup" class="popup">
+        <div class="popup-content">
+            <p id="popup-message"></p>
+            <button id="play-again">Play Again</button>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Brick_Blaster/script.js b/Games/Brick_Blaster/script.js
@@ -0,0 +1,183 @@
+var canvas = document.getElementById("canvas1");
+var ctx = canvas.getContext("2d");
+
+var x = canvas.width / 2;
+var y = canvas.height - 30;
+var dx = 2;
+var dy = -2;
+var ballRadius = 10;
+var paddleHeight = 10;
+var paddleWidth = 75;
+var paddleX = (canvas.width - paddleWidth) / 2;
+var rightPressed = false;
+var leftPressed = false;
+var brickRowCount = 6;
+var brickColumnCount = 8;
+var brickWidth = 75;
+var brickHeight = 20;
+var brickPadding = 10;
+var brickOffSetTop = 30;
+var brickOffSetLeft = 30;
+var score = 0;
+var lives = 3;
+
+var popup = document.getElementById("popup");
+var popupMessage = document.getElementById("popup-message");
+var playAgainButton = document.getElementById("play-again");
+
+var brickColors = ["#ff9999", "#66b3ff", "#99ff99", "#ffcc99", "#c2c2f0", "#ffb3e6"];
+var 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, color: brickColors[r % brickColors.length] };
+    }
+}
+
+document.addEventListener("keydown", keyDownHandler);
+document.addEventListener("keyup", keyUpHandler);
+document.addEventListener("mousemove", mouseMoveHandler);
+playAgainButton.addEventListener("click", function () {
+    document.location.reload();
+});
+
+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 mouseMoveHandler(e) {
+    var relativeX = e.clientX - canvas.offsetLeft;
+    if (relativeX > 0 + paddleWidth / 2 && relativeX < canvas.width - paddleWidth / 2) {
+        paddleX = relativeX - paddleWidth / 2;
+    }
+}
+
+function drawBall() {
+    ctx.beginPath();
+    ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
+    var gradient = ctx.createRadialGradient(x, y, ballRadius / 2, x, y, ballRadius);
+    gradient.addColorStop(0, "#ff6f61");
+    gradient.addColorStop(1, "#de1b1b");
+    ctx.fillStyle = gradient;
+    ctx.fill();
+    ctx.closePath();
+}
+
+function drawPaddle() {
+    ctx.beginPath();
+    ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
+    ctx.fillStyle = "#0095DD";
+    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) {
+                var brickX = c * (brickWidth + brickPadding) + brickOffSetLeft;
+                var 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 = bricks[c][r].color;
+                ctx.fill();
+                ctx.closePath();
+            }
+        }
+    }
+}
+
+function collisionDetection() {
+    for (var c = 0; c < brickColumnCount; c++) {
+        for (var r = 0; r < brickRowCount; r++) {
+            var 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) {
+                        showPopup("YOU WIN!");
+                    }
+                }
+            }
+        }
+    }
+}
+
+function drawScore() {
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#0095DD";
+    ctx.fillText("Score: " + score, 8, 20);
+}
+
+function drawLives() {
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#0095DD";
+    ctx.fillText("Lives: " + lives, canvas.width - 65, 20);
+}
+
+function showPopup(message) {
+    popupMessage.textContent = message;
+    popup.style.display = "flex";
+}
+
+function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawBricks();
+    drawBall();
+    drawPaddle();
+    drawScore();
+    drawLives();
+    collisionDetection();
+
+    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) {
+                showPopup("GAME OVER");
+            } else {
+                x = canvas.width / 2;
+                y = canvas.height - 30;
+                dx = 2;
+                dy = -2;
+                paddleX = (canvas.width - paddleWidth) / 2;
+            }
+        }
+    }
+
+    if (x + dx < ballRadius || x + dx > canvas.width - ballRadius) {
+        dx = -dx;
+    }
+
+    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/Games/Brick_Blaster/styles.css b/Games/Brick_Blaster/styles.css
@@ -0,0 +1,59 @@
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background: #bd0d0d;
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+#canvas1 {
+    background: black;
+    display: block;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+}
+
+.popup {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    justify-content: center;
+    align-items: center;
+}
+
+.popup-content {
+    background: #fff;
+    padding: 20px;
+    border-radius: 10px;
+    text-align: center;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+}
+
+.popup-content p {
+    font-size: 20px;
+    margin-bottom: 20px;
+}
+
+#play-again {
+    padding: 10px 20px;
+    font-size: 16px;
+    background-color: #0095DD;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+#play-again:hover {
+    background-color: #007bb5;
+}
diff --git a/README.md b/README.md
@@ -867,7 +867,7 @@ This repository also provides one such platforms where contributers come over an
 | [Tic_Tac_Toe_Neon](https://github.com/kunjgit/GameZone/tree/main/Games/Tic_Tac_Toe_Neon) | [Magic_8_ball_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Magic_8_ball) |
 | [Catch_Craze](https://github.com/kunjgit/GameZone/tree/main/Games/Catch_Craze) |
 |[Dice_Rolling_Simulator](https://github.com/priyashuu/GameZone/tree/main/Games/Dice_rolling_simulator)|
-|[Space_Dominators](https://github.com/kunjgit/GameZone/tree/main/Games/Space_Dominators)|
+|[Brick_Blaster](https://github.com/kunjgit/GameZone/tree/main/Games/Brick_Blaster)|
  </center>
 
 <br>

diff --git a/assets/images/brick_blaster.PNG b/assets/images/brick_blaster.PNG