Merge pull request #5150 from debangi29/main

Added ball and Paddle game with dynamic scoring!
kunjgit · Aug 10, 2024 · 2b1d1e2 · 2b1d1e2
2 parents 216471b + 416a240
commit 2b1d1e2
Show file tree

Hide file tree

Showing 6 changed files with 170 additions and 0 deletions.
diff --git a/Games/Ball-And-Paddle-Game/README.md b/Games/Ball-And-Paddle-Game/README.md
@@ -0,0 +1,20 @@
+# Ball and Paddle Game
+
+This is a simple implementation of a Ball and Paddle game using HTML, CSS, and JavaScript. The game is a classic arcade-style game where the player controls a paddle to keep the ball in play.
+
+## Features
+- A visual representation of the ball, paddle, and game area.
+- Interactive paddle control using keyboard inputs.
+- Basic game logic for ball movement, collision detection, and scoring.
+- Simple and intuitive UI with real-time score updates.
+
+## Usage
+- The game interface will appear, and you can start playing by using the arrow keys to control the paddle.
+- Keep the ball in play by bouncing it off the paddle to score points.
+- The game ends when the ball misses the paddle and falls out of play.
+
+## Gameplay
+- The game starts with the ball moving in a random direction.
+- Use the left and right arrow keys to move the paddle and keep the ball in play.
+- The ball bounces off the walls and the paddle; if it misses the paddle, the game is over.
+- The objective is to score as many points as possible by keeping the ball in play.
diff --git a/Games/Ball-And-Paddle-Game/index.html b/Games/Ball-And-Paddle-Game/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ball and Paddle Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1 class="game-heading">Ball and Paddle Game</h1>
+    <div class="game-container">
+        <canvas id="gameCanvas" width="800" height="600"></canvas>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Ball-And-Paddle-Game/script.js b/Games/Ball-And-Paddle-Game/script.js
@@ -0,0 +1,100 @@
+const canvas = document.getElementById("gameCanvas");
+const ctx = canvas.getContext("2d");
+
+let x = canvas.width / 2;
+let y = canvas.height - 30;
+let dx = 2;
+let dy = -2;
+const ballRadius = 10;
+const paddleHeight = 10;
+const paddleWidth = 75;
+let paddleX = (canvas.width - paddleWidth) / 2;
+let rightPressed = false;
+let leftPressed = false;
+let score = 0;
+let gameOver = false;
+
+document.addEventListener("keydown", keyDownHandler, false);
+document.addEventListener("keyup", keyUpHandler, false);
+
+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 drawBall() {
+    ctx.beginPath();
+    ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}
+
+function drawPaddle() {
+    ctx.beginPath();
+    ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}
+
+function drawScore() {
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#0095DD";
+    ctx.fillText("Score: " + score, canvas.width - 80, 20);
+}
+
+function drawGameOver() {
+    ctx.font = "24px Arial";
+    ctx.fillStyle = "#FF0000";
+    ctx.fillText("Game Over! Try Again", canvas.width / 2 - 100, canvas.height / 2);
+}
+
+function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawBall();
+    drawPaddle();
+    drawScore();
+
+    if (gameOver) {
+        drawGameOver();
+        return;
+    }
+
+    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;
+            score++;
+        } else {
+            gameOver = true;
+        }
+    }
+
+    if (rightPressed && paddleX < canvas.width - paddleWidth) {
+        paddleX += 7;
+    } else if (leftPressed && paddleX > 0) {
+        paddleX -= 7;
+    }
+
+    x += dx;
+    y += dy;
+}
+
+setInterval(draw, 10);
diff --git a/Games/Ball-And-Paddle-Game/style.css b/Games/Ball-And-Paddle-Game/style.css
@@ -0,0 +1,27 @@
+body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-color: #000;
+}
+
+.game-heading {
+    color: yellow;
+    margin-bottom: 20px;
+}
+
+.game-container {
+    border: 5px solid #fff;
+    padding: 10px;
+    background-color: #000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+canvas {
+    background-color: #000;
+}
diff --git a/README.md b/README.md
@@ -362,8 +362,12 @@ This repository also provides one such platforms where contributers come over an
 | [Am_I_the_number](https://github.com/kunjgit/GameZone/tree/main/Games/Am_I_the_number)   |
 
 |[Gem_Cruncher](https://github.com/kunjgit/GameZone/tree/main/Games/Gem_Cruncher)|
+
+| [Ball and Paddle game](https://github.com/kunjgit/GameZone/tree/main/Games/Ball-And-Paddle-Game) |
+
 |[Harry Potter Wizards Quiz](https://github.com/kunjgit/GameZone/tree/main/Games/Harry_Potter_Wizards_Quiz)|
 
+
  </center>
 
 <br>

diff --git a/assets/images/Ball-And-Paddle-game.md b/assets/images/Ball-And-Paddle-game.md
@@ -0,0 +1,3 @@
+![image](https://github.com/user-attachments/assets/4177d469-857b-4714-8004-1ac03203fac3)
+
+![image](https://github.com/user-attachments/assets/6d04c538-7592-4f38-912d-e46d0a8d487f)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		![image](https://github.com/user-attachments/assets/4177d469-857b-4714-8004-1ac03203fac3)

		![image](https://github.com/user-attachments/assets/6d04c538-7592-4f38-912d-e46d0a8d487f)