diff --git a/Games/Bouncing_Ball_Game/ReAdMe.md b/Games/Bouncing_Ball_Game/ReAdMe.md
new file mode 100644
index 0000000000..d4b8258c62
--- /dev/null
+++ b/Games/Bouncing_Ball_Game/ReAdMe.md
@@ -0,0 +1,31 @@
+# **Bouncing Ball Game**
+
+---
+
+
+
+## **Description đ**
+In the Bouncing game, you need to break all the bricks using a bouncing ball, a ball that you need to prevent from leaving the game area using the paddle.
+-
+
+## **functionalities đŽ**
+
+When the ball hit the paddle, the ball should go in a definite direction based on where the ball hit the paddle so the paddle won't act like a wall. which means you can determine where the ball goes when you hit it with the paddle.
+
+We have the bricks in the game, add a collision detection function, when the ball hit a brick, the brick must disappear and then increment the player's score.
+-
+
+
+## **How to play? đšī¸**
+
+We have draw the paddle and the ball, we will be able to control the paddle using the left and the right arrows on the keyboard, we will make the ball moves, and we will also implement the collision detection logic, so when the ball hits a wall it must change the direction.
+-
+
+
+
+
+
+
+
+
+
diff --git a/Games/Bouncing_Ball_Game/index.html b/Games/Bouncing_Ball_Game/index.html
new file mode 100644
index 0000000000..ea5e2e68c2
--- /dev/null
+++ b/Games/Bouncing_Ball_Game/index.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+
+
+ Bounce Ball Game
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Games/Bouncing_Ball_Game/script.js b/Games/Bouncing_Ball_Game/script.js
new file mode 100644
index 0000000000..883120bec9
--- /dev/null
+++ b/Games/Bouncing_Ball_Game/script.js
@@ -0,0 +1,176 @@
+//Create variables to reference and store canvas
+let canvas = document.getElementById('mycanvas');
+let ctx = canvas.getContext('2d');
+let ballRadius = 10;
+let x = canvas.width / 2;
+let y = canvas.height - 30;
+let dx = 2;
+let dy = -2;
+
+//create the paddle
+let paddleHeight = 12;
+let paddleWidth = 72;
+
+//specify starting point of paddle
+let paddleX = (canvas.width - paddleWidth) / 2;
+
+//holding variables for right and left arrows on keyboard
+let rightPressed = false;
+let leftPressed = false;
+
+//holding variables for bricks
+let brickRowCount = 4;
+let brickColumnCount = 7;
+let brickWidth = 72;
+let brickHeight = 24;
+let brickPadding = 12;
+let brickOffsetTop = 32;
+let brickOffsetLeft = 32;
+//Create variables to take score
+let score = 0;
+
+//Creating arrays for the bricks
+let bricks = [];
+for (c = 0; c < brickColumnCount; c++) {
+ bricks[c] = [];
+ for (r = 0; r < brickRowCount; r++) {
+ //set the x and y position of the bricks
+ bricks[c][r] = { x: 0, y: 0, status: 1 };
+ }
+}
+
+document.addEventListener('keydown', keyDownHandler, false);
+document.addEventListener('keyup', keyUpHandler, false);
+document.addEventListener("mousemove", mouseMoveHandler, false);
+
+//Anchor paddle movement to mouse movement
+function mouseMoveHandler(e) {
+ var relativeX = e.clientX - canvas.offsetLeft;
+ if (relativeX > 0 && relativeX < canvas.width) {
+ paddleX = relativeX - paddleWidth / 2;
+ }
+}
+
+function keyDownHandler(e) {
+ if (e.keyCode === 39) {
+ rightPressed = true;
+ }
+ else if (e.keyCode === 37) {
+ leftPressed = true;
+ }
+}
+function keyUpHandler(e) {
+ if (e.keyCode === 39) {
+ rightPressed = false;
+ }
+ else if (e.keyCode === 37) {
+ leftPressed = false;
+ }
+}
+
+function drawBall() {
+ ctx.beginPath();
+ ctx.arc(x, y, ballRadius, 0, Math.PI * 2); //centered at (x,y) position with radius r = ballRadius starting at 0 = startAngle, ending at Math.PI*2 = endAngle (in Radians)
+ ctx.fillStyle = 'white';
+ ctx.fill();
+ ctx.closePath();
+}
+//Create a function to create the paddle
+function drawPaddle() {
+ ctx.beginPath();
+ ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight); //centered at (x,y) position with radius r = ballRadius starting at 0 = startAngle, ending at Math.PI*2 = endAngle (in Radians)
+ ctx.fillStyle = 'white';
+ ctx.fill();
+ ctx.closePath();
+}
+//Create a function to draw the bricks
+function drawBricks() {
+ for (c = 0; c < brickColumnCount; c++) {
+ for (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 = 'yellow';
+ ctx.fill();
+ ctx.closePath();
+ }
+ }
+ }
+}
+//Create function to keep track of score
+function drawScore() {
+ ctx.font = '18px Arial';
+ ctx.fillStyle = 'white';
+ ctx.fillText('score: ' + score, 8, 20); //position score at 8,20 on the x,y axis of the canvas
+}
+
+//Collision dections for the bricks
+function collisionDetection() {
+ for (c = 0; c < brickColumnCount; c++) {
+ for (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('Congratulations!! You\'ve won!');
+ document.location.reload();
+ }
+ }
+ }
+ }
+ }
+}
+
+function draw() {
+ //clear each instance of the canvas so a new circle can be drawn
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ drawScore();
+ drawBricks();
+ drawBall();
+ drawPaddle();
+ collisionDetection();
+ //Calculate collision detections
+ //left and right walls
+ if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
+ dx = -dx;
+ }
+ //top walls
+ if (y + dy < ballRadius) {
+ dy = -dy;
+ }
+ else if (y + dy > canvas.height - ballRadius) {
+ //detect paddle hits
+ if (x > paddleX && x < paddleX + paddleWidth) {
+ dy = -dy;
+ }
+ //if no paddle hit, body of canvas is hit ==> game over
+ else {
+ alert('GAME OVER!!');
+ document.location.reload();
+ }
+ }
+
+ //bottom wall
+ if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
+ dy = -dy;
+ }
+ //Make paddle move
+ if (rightPressed && paddleX < canvas.width - paddleWidth) {
+ paddleX += 7;
+ }
+ else if (leftPressed && paddleX > 0) {
+ paddleX -= 7;
+ }
+ //Making the ball move
+ x += dx; //update x movement every frame
+ y += dy; //update y movement every frame
+}
+
+setInterval(draw, 10)
\ No newline at end of file
diff --git a/Games/Bouncing_Ball_Game/style.css b/Games/Bouncing_Ball_Game/style.css
new file mode 100644
index 0000000000..3f30ae3f54
--- /dev/null
+++ b/Games/Bouncing_Ball_Game/style.css
@@ -0,0 +1,11 @@
+body {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ #mycanvas {
+ background-color: black;
+ margin-top: 10rem;
+ }
\ No newline at end of file
diff --git a/README.md b/README.md
index d27287dd82..42a59684be 100644
--- a/README.md
+++ b/README.md
@@ -362,6 +362,7 @@ This repository also provides one such platforms where contributers come over an
| [Modulo_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Modulo_Game) |
|[Penguins Can't Fly](https://github.com/Will2Jacks/GameZoneForked/tree/Task/Games/Penguins_Can't_Fly)|
| [Block_Ninja] (https://github.com/kunjgit/GameZone/tree/main/Games/Block_Ninja) |
+| [Bouncing Ball Game](https://github.com/kunjgit/GameZone/tree/main/Games/Bouncing_Ball_Game) |
| [Disney_Trivia](https://github.com/manmita/GameZone/tree/Disney_Trivia/Games/Disney_Trivia)|
|[Harmony_Mixer](https://github.com/kunjgit/GameZone/tree/main/Games/Harmony_Mixer)|
|[Tower Defence Game](https://github.com/Will2Jacks/GameZoneForked/tree/Task/Games/Tower_Defence_Game)|
diff --git a/assets/images/Bouncing_Ball_Game.png b/assets/images/Bouncing_Ball_Game.png
new file mode 100644
index 0000000000..ecab1ee07c
Binary files /dev/null and b/assets/images/Bouncing_Ball_Game.png differ