Merge pull request kunjgit#4235 from Harleen-786/main

new game brick buster added
manmita · Jun 6, 2024 · e7d86a3 · e7d86a3
2 parents b755096 + 910a9cf
commit e7d86a3
Show file tree

Hide file tree

Showing 7 changed files with 233 additions and 3 deletions.
diff --git a/Games/Brick Buster/README.md b/Games/Brick Buster/README.md
@@ -0,0 +1,21 @@
+# Brick Buster
+
+## Description
+Brick Buster is a classic arcade game where players control a paddle at the bottom of the screen, bouncing a ball to destroy bricks at the top of the screen. The goal is to clear all the bricks by hitting them with the ball while preventing the ball from falling off the bottom of the screen.
+
+## Features
+- *Paddle Control*: Players control the paddle using the left and right arrow keys.
+- *Ball Physics*: The ball moves around the screen, bouncing off walls, the paddle, and bricks.
+- *Brick Destruction*: Bricks are destroyed when hit by the ball, and the player scores points.
+- *Level Completion*: The game progresses to the next level when all bricks are destroyed.
+- *Game Over*: The game ends if the ball falls off the bottom of the screen.
+- *Score Tracking*: Displays the player's score.
+- *Winning Condition*: The player wins if all bricks are destroyed.
+
+## How to Play
+1. Use the left and right arrow keys to move the paddle.
+2. Bounce the ball off the paddle to hit and destroy the bricks.
+3. Prevent the ball from falling off the bottom of the screen.
+4. Clear all the bricks to win the game.
+
+Enjoy playing Brick Buster!
diff --git a/Games/Brick Buster/index.html b/Games/Brick Buster/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Brick Buster</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="score" id="score">Score: 0</div>
+        <div class="game-area" id="game-area">
+            <div class="paddle" id="paddle"></div>
+            <div class="ball" id="ball"></div>
+            <div class="bricks" id="bricks"></div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Brick Buster/script.js b/Games/Brick Buster/script.js
@@ -0,0 +1,117 @@
+const paddle = document.getElementById('paddle');
+const ball = document.getElementById('ball');
+const bricksContainer = document.getElementById('bricks');
+const scoreElement = document.getElementById('score');
+
+const gameArea = document.getElementById('game-area');
+const gameAreaRect = gameArea.getBoundingClientRect();
+
+const paddleWidth = paddle.clientWidth;
+const paddleHeight = paddle.clientHeight;
+const ballSize = ball.clientWidth;
+
+let score = 0;
+let ballX = gameAreaRect.width / 2;
+let ballY = gameAreaRect.height / 2;
+let ballSpeedX = 3;
+let ballSpeedY = 3;
+let paddleX = (gameAreaRect.width - paddleWidth) / 2;
+
+const rows = 5;
+const cols = 10;
+const brickWidth = 80;
+const brickHeight = 20;
+const brickMargin = 10;
+
+let bricks = [];
+
+function createBricks() {
+    for (let row = 0; row < rows; row++) {
+        for (let col = 0; col < cols; col++) {
+            const brick = document.createElement('div');
+            brick.classList.add('brick');
+            brick.style.left = `${col * (brickWidth + brickMargin)}px`;
+            brick.style.top = `${row * (brickHeight + brickMargin)}px`;
+            bricksContainer.appendChild(brick);
+            bricks.push(brick);
+        }
+    }
+}
+
+function movePaddle(event) {
+    const step = 20;
+    if (event.key === 'ArrowLeft' && paddleX > 0) {
+        paddleX -= step;
+    } else if (event.key === 'ArrowRight' && paddleX < gameAreaRect.width - paddleWidth) {
+        paddleX += step;
+    }
+
+    updatePaddlePosition();
+}
+
+function updatePaddlePosition() {
+    paddle.style.left = `${paddleX}px`;
+}
+
+function resetBall() {
+    ballX = gameAreaRect.width / 2;
+    ballY = gameAreaRect.height / 2;
+    ballSpeedX = 3;
+    ballSpeedY = -3;
+}
+
+function updateBall() {
+    ballX += ballSpeedX;
+    ballY += ballSpeedY;
+
+    if (ballX <= 0 || ballX >= gameAreaRect.width - ballSize) {
+        ballSpeedX = -ballSpeedX;
+    }
+
+    if (ballY <= 0) {
+        ballSpeedY = -ballSpeedY;
+    }
+
+    if (ballY >= gameAreaRect.height - ballSize) {
+        alert('Game Over');
+        resetBall();
+    }
+
+    const paddleRect = paddle.getBoundingClientRect();
+    const ballRect = ball.getBoundingClientRect();
+
+    if (ballRect.bottom >= paddleRect.top && ballRect.right >= paddleRect.left && ballRect.left <= paddleRect.right) {
+        ballSpeedY = -ballSpeedY;
+    }
+
+    bricks.forEach((brick, index) => {
+        const brickRect = brick.getBoundingClientRect();
+        if (ballRect.right >= brickRect.left && ballRect.left <= brickRect.right && ballRect.bottom >= brickRect.top && ballRect.top <= brickRect.bottom) {
+            ballSpeedY = -ballSpeedY;
+            bricksContainer.removeChild(brick);
+            bricks.splice(index, 1);
+            score++;
+            scoreElement.textContent = `Score: ${score}`;
+        }
+    });
+
+    ball.style.left = `${ballX}px`;
+    ball.style.top = `${ballY}px`;
+
+    if (bricks.length === 0) {
+        alert('You Win!');
+        resetBall();
+        createBricks();
+    }
+}
+
+function gameLoop() {
+    updateBall();
+    requestAnimationFrame(gameLoop);
+}
+
+document.addEventListener('keydown', movePaddle);
+
+createBricks();
+resetBall();
+gameLoop();
diff --git a/Games/Brick Buster/style.css b/Games/Brick Buster/style.css
@@ -0,0 +1,68 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background: linear-gradient(45deg, #ff0000, #ff8000);
+    font-family: Arial, sans-serif;
+}
+
+.container {
+    position: relative;
+    width: 800px;
+    height: 600px;
+    border: 2px solid #fff;
+    background: #000;
+    overflow: hidden;
+}
+
+.score {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    font-size: 1.5rem;
+    color: #fff;
+}
+
+.game-area {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.paddle {
+    position: absolute;
+    bottom: 30px;
+    width: 100px;
+    height: 20px;
+    background-color: #fff;
+    border-radius: 10px;
+}
+
+.ball {
+    position: absolute;
+    width: 15px;
+    height: 15px;
+    background-color: #fff;
+    border-radius: 50%;
+}
+
+.bricks {
+    position: relative;
+    width: 100%;
+    height: 200px;
+}
+
+.brick {
+    position: absolute;
+    width: 80px;
+    height: 20px;
+    background-color: #ff8000;
+    border-radius: 5px;
+}
diff --git a/README.md b/README.md
@@ -324,12 +324,12 @@ This repository also provides one such platforms where contributers come over an
 |[AquaSort_Game](https://github.com/kunjgit/GameZone/tree/main/Games/AquaSort_Game)   |
 |[Turn_on_the_light](https://github.com/kunjgit/GameZone/tree/main/Games/Turn_on_the_light)   |
 | [Tic-Tac-Toe Game](https://github.com/kunjgit/GameZone/tree/main/Games/Tic-Tac-Toe) |
+| [Rapid_click_frenzy](https://github.com/kunjgit/GameZone/tree/main/Games/Rapid_click_frenzy)                  
+| [Brick Buster Game](https://github.com/kunjgit/GameZone/tree/main/Games/Brick Buster) |
 | [Rapid_click_frenzy](https://github.com/kunjgit/GameZone/tree/main/Games/Rapid_click_frenzy) 
 |[Penguins Can't Fly](https://github.com/Will2Jacks/GameZoneForked/tree/Task/Games/Penguins_Can't_Fly)|
 
 
-
-
  </center>
 
 <br>

diff --git a/assets/images/brick.png b/assets/images/brick.png
diff --git a/assets/js/gamesData.json b/assets/js/gamesData.json
@@ -2102,7 +2102,11 @@
  "gameTitle": "Guess_The_Song",
   "gameUrl": "Guess_The_Song",
   "thumbnailUrl": "Guess_The_Song.png"
-}
+},"417":{
+  "gameTitle": "Brick Buster",
+   "gameUrl": "Brick Buster",
+   "thumbnailUrl": "Brick.png"
+ }
 
 }