Merge pull request #5036 from AaryanManghnani/Ping_Pong

Added New Game: Ping pong
kunjgit · Aug 1, 2024 · 46e3354 · 46e3354
2 parents 0eb69e9 + 3f4dc92
commit 46e3354
Show file tree

Hide file tree

Showing 6 changed files with 181 additions and 1 deletion.
diff --git a/Games/Ping_Pong/README.md b/Games/Ping_Pong/README.md
@@ -0,0 +1,34 @@
+# **Ping_Pong**
+
+---
+
+<br>
+
+## **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.
+
+<br>
+
+## **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.
+
+
+<br>
+
+## **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
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Ping Pong Game</title>
+    <link rel="stylesheet" type="text/css" href="./style.css">
+</head>
+
+<body>
+    <div id="game">
+        <div id="board">
+            <div class="divider"></div>
+        </div>
+        <div id="paddle-left"></div>
+        <div id="paddle-right"></div>
+        <div id="ball"></div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+
+</html>
diff --git a/Games/Ping_Pong/script.js 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
@@ -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%;
+  }
diff --git 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