diff --git a/Games/Ping_Pong/README.md b/Games/Ping_Pong/README.md new file mode 100644 index 0000000000..fdf3f789f8 --- /dev/null +++ b/Games/Ping_Pong/README.md @@ -0,0 +1,34 @@ +# **Ping_Pong** + +--- + +
+ +## **Description 📃** + +- Dive into the classic game of Ping Pong with our interactive web-based version, designed using HTML, CSS, and JavaScript. This game features a straightforward and intuitive interface where players can enjoy a fast-paced, two-player experience. + + + +## **Functionalities 🎮** + +The game simulates a realistic ping pong match with smooth paddle and ball physics, offering an engaging experience that mimics the feel of playing on a physical table. + +
+ +## **How to play? 🕹ī¸** + +1. Start the game. +2. Player1 uses the AWSD keys to control is paddle while Player2 uses up,down,left,right keys to control his paddle +3. Both players need to defend their goals and score in other's goal. +4. The player with the most points wins. + + +
+ +## **Screenshots 📸** + +![image](https://github.com/AaryanManghnani/GameZone/blob/Ping_Pong/assets/images/Ping_Pong.png) + + + diff --git a/Games/Ping_Pong/index.html b/Games/Ping_Pong/index.html new file mode 100644 index 0000000000..523bcec9e3 --- /dev/null +++ b/Games/Ping_Pong/index.html @@ -0,0 +1,21 @@ + + + + + Ping Pong Game + + + + +
+
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/Games/Ping_Pong/script.js b/Games/Ping_Pong/script.js new file mode 100644 index 0000000000..f5646b3982 --- /dev/null +++ b/Games/Ping_Pong/script.js @@ -0,0 +1,78 @@ +var ball = document.getElementById("ball"); +var paddleLeft = document.getElementById("paddle-left"); +var paddleRight = document.getElementById("paddle-right"); +var game = document.getElementById("game"); +var ballX = 250; +var ballY = 150; +var xSpeed = 2; +var ySpeed = 2; +var ballSpeed = 10; +var paddleSpeed = 20; +var paddleTopBoundary = 0; +var paddleBottomBoundary = game.clientHeight - paddleLeft.clientHeight; +var paddleLeftInitialX = 0; +var paddleLeftInitialY = (game.clientHeight - paddleLeft.clientHeight) / 2; +var paddleRightInitialX = game.clientWidth - paddleRight.clientWidth; +var paddleRightInitialY = (game.clientHeight - paddleRight.clientHeight) / 2; + + +paddleLeft.style.left = paddleLeftInitialX + "px"; +paddleLeft.style.top = paddleLeftInitialY + "px"; +paddleRight.style.left = paddleRightInitialX + "px"; +paddleRight.style.top = paddleRightInitialY + "px"; + + + +document.addEventListener("keydown", function (e) { + if (e.keyCode === 38) { + var top = paddleRight.offsetTop; + if (top > paddleTopBoundary) { + paddleRight.style.top = top - paddleSpeed + "px"; + } + } else if (e.keyCode === 40) { + var top = paddleRight.offsetTop; + if (top < paddleBottomBoundary) { + paddleRight.style.top = top + paddleSpeed + "px"; + } + } else if (e.keyCode === 87) { + var top = paddleLeft.offsetTop; + if (top > paddleTopBoundary) { + paddleLeft.style.top = top - paddleSpeed + "px"; + } + } else if (e.keyCode === 83) { + var top = paddleLeft.offsetTop; + if (top < paddleBottomBoundary) { + paddleLeft.style.top = top + paddleSpeed + "px"; + } + } +}); + + +function moveBall() { + ballX += xSpeed; + ballY += ySpeed; + + if (ballX + 10 > game.clientWidth || ballX < 0) { + xSpeed = -xSpeed; + } + + if (ballY + 10 > game.clientHeight || ballY < 0) { + ySpeed = -ySpeed; + } + + if (ballX < paddleLeft.clientWidth && ballY > paddleLeft.offsetTop && ballY < paddleLeft.offsetTop + paddleLeft.clientHeight) { + xSpeed = -xSpeed; + } + + if (ballX + 10 > game.clientWidth - paddleRight.clientWidth && ballY > paddleRight.offsetTop && ballY < paddleRight.offsetTop + paddleRight.clientHeight) { + xSpeed = -xSpeed; + } + + ball.style.left = ballX + "px"; + ball.style.top = ballY + "px"; + + setTimeout(moveBall, ballSpeed); +} + +moveBall(); + diff --git a/Games/Ping_Pong/style.css b/Games/Ping_Pong/style.css new file mode 100644 index 0000000000..821126c4b0 --- /dev/null +++ b/Games/Ping_Pong/style.css @@ -0,0 +1,47 @@ +#game { + width: 500px; + height: 300px; + margin: 50px auto; + border: 1px solid black; + position: relative; + } + + .divider { + width: 2px; + height: 100%; + position: absolute; + left: 50%; + background: black; + transform: translateX(-50%); + } + + + #board { + width: 100%; + height: 100%; + background: white; + } + + #paddle-left, #paddle-right { + width: 10px; + height: 50px; + position: absolute; + background: black; + } + + #paddle-left { + left: 0; + } + + #paddle-right { + right: 0; + } + + + #ball { + width: 10px; + height: 10px; + position: absolute; + background: red; + border-radius: 50%; + } \ No newline at end of file diff --git a/README.md b/README.md index f5ea8158ac..ef93715e40 100644 --- a/README.md +++ b/README.md @@ -823,7 +823,7 @@ This repository also provides one such platforms where contributers come over an | [Cosmic_Blast](https://github.com/kunjgit/GameZone/tree/main/Games/Cosmic_Blast) | |[Mole](https://github.com/taneeshaa15/GameZone/tree/main/Games/Mole)| |[Pottery-Game](https://github.com/kunjgit/GameZone/tree/main/Games/Pottery-Game)| - +|[Ping_Pong](https://github.com/kunjgit/GameZone/tree/main/Games/Ping_Pong) | [Typing_Test](https://github.com/kunjgit/GameZone/tree/main/Games/Typing_Test) | |[Wheel_of_Fortunes](https://github.com/Saipradyumnagoud/GameZone/tree/main/Games/Wheel_of_Fortunes)| diff --git a/assets/images/Ping_Pong.png b/assets/images/Ping_Pong.png new file mode 100644 index 0000000000..d14564ffdd Binary files /dev/null and b/assets/images/Ping_Pong.png differ