diff --git a/README.md b/README.md
index 976f6bd1..8cd9f49b 100644
--- a/README.md
+++ b/README.md
@@ -263,6 +263,7 @@ ________________________________________________________________________________
| 205 | [Breakout_Game](.SinglePlayer%20-%20Games/Maze_Game) |
| 206 | [Bomber_Game](.SinglePlayer%20-%20Games/Bomber_Game) |
| 207 | [Shape_Clicker_Game](.SinglePlayer%20-%20Games/Shape_Clicker_Game) |
+| 208 | [Brick_Breaker_Game](.SinglePlayer%20-%20Games/Brick_Breaker_Game) |
diff --git a/SinglePlayer - Games/Banner - image/Brick_Breaker_Game.png b/SinglePlayer - Games/Banner - image/Brick_Breaker_Game.png
new file mode 100644
index 00000000..fbff41cb
Binary files /dev/null and b/SinglePlayer - Games/Banner - image/Brick_Breaker_Game.png differ
diff --git a/SinglePlayer - Games/Brick_Breaker_Game/README.md b/SinglePlayer - Games/Brick_Breaker_Game/README.md
new file mode 100644
index 00000000..e81a491c
--- /dev/null
+++ 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
new file mode 100644
index 00000000..97204e84
--- /dev/null
+++ b/SinglePlayer - Games/Brick_Breaker_Game/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+ Brick Breaker Game
+
+
+
+
+
+
+
diff --git a/SinglePlayer - Games/Brick_Breaker_Game/script.js b/SinglePlayer - Games/Brick_Breaker_Game/script.js
new file mode 100644
index 00000000..c461c986
--- /dev/null
+++ 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
new file mode 100644
index 00000000..99dc08de
--- /dev/null
+++ 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
index a01fb94c..e4c92d76 100644
--- a/additionalpage/game.html
+++ b/additionalpage/game.html
@@ -7779,6 +7779,67 @@ Shape_Clicker_Game
+
+
+
+
+
+
+
+ 45
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Brick_Breaker_Game
+
Brick_Breaker_Game
+
+
+
+
+
+
+
Release Date:
+
20.06.2023
+
+
+
Updated:
+
Action | Desktop
+
+
+
+
+
+
+ 
+