diff --git a/Games/Ball-And-Paddle-Game/README.md b/Games/Ball-And-Paddle-Game/README.md new file mode 100644 index 0000000000..e328991217 --- /dev/null +++ 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 new file mode 100644 index 0000000000..52f4cb124a --- /dev/null +++ b/Games/Ball-And-Paddle-Game/index.html @@ -0,0 +1,16 @@ + + + + + + Ball and Paddle Game + + + +

Ball and Paddle Game

+
+ +
+ + + diff --git a/Games/Ball-And-Paddle-Game/script.js b/Games/Ball-And-Paddle-Game/script.js new file mode 100644 index 0000000000..f395a0dc2d --- /dev/null +++ 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 new file mode 100644 index 0000000000..b843761a05 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/README.md b/README.md index 220d3827b3..10bbeb642f 100644 --- 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)| +
diff --git a/assets/images/Ball-And-Paddle-game.md b/assets/images/Ball-And-Paddle-game.md new file mode 100644 index 0000000000..369a4ea78c --- /dev/null +++ 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)