Merge pull request #4455 from nandita27iitp/nandita

Added Bouncing ball Game
kunjgit · Jun 15, 2024 · 2926f32 · 2926f32
2 parents 1d4fea0 + c3bf21e
commit 2926f32
Show file tree

Hide file tree

Showing 6 changed files with 242 additions and 0 deletions.
diff --git a/Games/Bouncing_Ball_Game/ReAdMe.md b/Games/Bouncing_Ball_Game/ReAdMe.md
@@ -0,0 +1,31 @@
+# **Bouncing Ball Game** 
+
+---
+
+<br>
+
+## **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 🎮**
+<!-- add functionalities over here -->
+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.
+- 
+<br>
+
+## **How to play? 🕹️**
+<!-- add the steps how to play games -->
+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
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- CSS -->
+    <link rel="stylesheet" href="style.css">
+
+    <title>Bounce Ball Game</title>
+</head>
+
+<body>
+    <canvas id="mycanvas" width="650" height="450">
+        I'm sorry your browser version does not support canvas
+        <!--Fallback Content-->
+    </canvas>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Games/Bouncing_Ball_Game/script.js 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)
diff --git a/Games/Bouncing_Ball_Game/style.css 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;
+  }
diff --git 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