thinkswell · PBJI · Oct 11, 2023 · Oct 8, 2023 · Oct 8, 2023 · Oct 9, 2023
diff --git a/PingPongGame/ayan-joshi/README.md b/PingPongGame/ayan-joshi/README.md
@@ -0,0 +1,32 @@
+# **Ping_Pong** 
+
+---
+
+<br>
+
+## **Description 📃**
+- Ping pong, also known as table tennis, is a sport in which two or four players hit a lightweight ball back and forth across a table using small solid rackets. 
+- They must prevent the ball from touching the surface of the table on their side
+
+
+<br>
+
+## **How to play? 🕹️**
+- Controls:
+    - `W`: Up / `S`: Down (Player 1)
+    - `↑`: Up / `↓`: Down (Player 2)
+- Players must allow a ball played towards them to bounce once on their side of the table and must return it so that it bounces on the opposite side. 
+- A point is scored when a player fails to return the ball within the rules. A player or team wins a game by scoring 11 points with a two-point margin. 
+- This is a endless game, so both players can play as much as they want
+- Also added the Pause , Resume and Reset button below to make it more interesting.
+
+
+<br>
+
+## **Screenshots 📸**
+
+<br>
+
+![Alt text](<Screenshot (188).png>)
+
+<br>
diff --git a/PingPongGame/ayan-joshi/Screenshot (188).png b/PingPongGame/ayan-joshi/Screenshot (188).png
diff --git a/PingPongGame/ayan-joshi/index.html b/PingPongGame/ayan-joshi/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ping Pong Multiplayer</title>
+    <link rel="stylesheet" href="./styles.css">
+</head>
+<body>
+    <div>
+        <header>
+            <div class="player">
+                <span class="player__score" data-player="1"></span>
+                <span class="player__keys">W: Up / S: Down</span>
+            </div>
+            <h1>PING PONG</h1>
+            <div class="player">
+                <span class="player__score" data-player="2"></span>
+                <span class="player__keys">↑: Up / ↓: Down</span>
+            </div>
+        </header>
+        <main>
+            <canvas id="game" width="600" height="480"></canvas>
+        </main>
+        <div class="controls">
+            <button id="pause">Pause</button>
+            <button id="resume">Resume</button>
+            <button id="reset">Reset</button>
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
diff --git a/PingPongGame/ayan-joshi/script.js b/PingPongGame/ayan-joshi/script.js
@@ -0,0 +1,170 @@
+// Wait for the HTML document to load before running the script
+document.addEventListener("DOMContentLoaded", function() {
+    // Get the canvas element
+    const canvas = document.getElementById("game");
+    const context = canvas.getContext("2d");
+
+    // Set up initial game state
+    let player1Score = 0;
+    let player2Score = 0;
+    let gamePaused = false;
+    let requestId;
+
+    // Set up player positions and paddle dimensions
+    const player1 = {
+      x: 10,
+      y: canvas.height / 2 - 50,
+      width: 10,
+      height: 100,
+      dy: 0
+    };
+
+    const player2 = {
+      x: canvas.width - 20,
+      y: canvas.height / 2 - 50,
+      width: 10,
+      height: 100,
+      dy: 0
+    };
+
+    // Set up ball properties
+    const ball = {
+      x: canvas.width / 2,
+      y: canvas.height / 2,
+      radius: 10,
+      dx: 5,
+      dy: 5
+    };
+
+    // Draw the game elements
+    function draw() {
+      // Clear the canvas
+      context.clearRect(0, 0, canvas.width, canvas.height);
+
+      // Draw the player scores
+      context.font = "48px Arial";
+      context.fillStyle = "#fff";
+      context.fillText(player1Score, canvas.width / 2 - 50, 50);
+      context.fillText(player2Score, canvas.width / 2 + 25, 50);
+
+      // Draw the players' paddles
+      context.fillStyle = "#fff";
+      context.fillRect(player1.x, player1.y, player1.width, player1.height);
+      context.fillRect(player2.x, player2.y, player2.width, player2.height);
+
+      // Draw the ball
+      context.beginPath();
+      context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
+      context.fillStyle = "#fff";
+      context.fill();
+      context.closePath();
+    }
+
+    // Update game logic
+    function update() {
+      if (gamePaused) {
+        return;
+      }
+
+      // Move the players' paddles
+      player1.y += player1.dy;
+      player2.y += player2.dy;
+
+      // Move the ball
+      ball.x += ball.dx;
+      ball.y += ball.dy;
+
+      // Check for collisions with the top and bottom walls
+      if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
+        ball.dy *= -1;
+      }
+
+      // Check for collisions with the players' paddles
+      if (
+        ball.x - ball.radius < player1.x + player1.width &&
+        ball.y > player1.y &&
+        ball.y < player1.y + player1.height
+      ) {
+        ball.dx *= -1;
+      } else if (
+        ball.x + ball.radius > player2.x &&
+        ball.y > player2.y &&
+        ball.y < player2.y + player2.height
+      ) {
+        ball.dx *= -1;
+      }
+
+      // Check for scoring
+      if (ball.x + ball.radius > canvas.width) {
+        player1Score++;
+        resetBall();
+      } else if (ball.x - ball.radius < 0) {
+        player2Score++;
+        resetBall();
+      }
+
+      // Call the draw function to update the canvas
+      draw();
+    }
+
+    // Reset the ball to the center of the canvas
+    function resetBall() {
+      ball.x = canvas.width / 2;
+      ball.y = canvas.height / 2;
+      ball.dx = Math.sign(ball.dx) * 5;
+      ball.dy = Math.sign(ball.dy) * 5;
+    }
+
+    // Set up event listeners for player movement
+    document.addEventListener("keydown", function(event) {
+      if (event.key === "w") {
+        player1.dy = -5;
+      } else if (event.key === "s") {
+        player1.dy = 5;
+      } else if (event.key === "ArrowUp") {
+        player2.dy = -5;
+      } else if (event.key === "ArrowDown") {
+        player2.dy = 5;
+      }
+    });
+
+    document.addEventListener("keyup", function(event) {
+      if (event.key === "w" || event.key === "s") {
+        player1.dy = 0;
+      } else if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+        player2.dy = 0;
+      }
+    });
+
+    // Set up event listeners for buttons
+    const pauseButton = document.getElementById("pause");
+    pauseButton.addEventListener("click", function() {
+      gamePaused = true;
+      cancelAnimationFrame(requestId);
+    });
+
+    const resumeButton = document.getElementById("resume");
+    resumeButton.addEventListener("click", function() {
+      gamePaused = false;
+      requestId = requestAnimationFrame(gameLoop);
+    });
+
+    const resetButton = document.getElementById("reset");
+    resetButton.addEventListener("click", function() {
+      player1Score = 0;
+      player2Score = 0;
+      resetBall();
+      cancelAnimationFrame(requestId);
+      requestId = requestAnimationFrame(gameLoop);
+    });
+
+    // Game loop
+    function gameLoop() {
+      update();
+      requestId = requestAnimationFrame(gameLoop);
+    }
+
+    // Start the game loop
+    gameLoop();
+  });
+
diff --git a/PingPongGame/ayan-joshi/styles.css b/PingPongGame/ayan-joshi/styles.css
@@ -0,0 +1,72 @@
+body,
+html {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+body {
+  flex-direction: column;
+  justify-content: center;
+  background-color: #000;
+  color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+body,
+header {
+  display: flex;
+  align-items: center;
+}
+
+header {
+  justify-content: space-around;
+  width: 100%;
+}
+
+.player {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  line-height: 1.25;
+}
+
+.player .player__score {
+  display: block;
+  font-weight: 700;
+  font-size: 2rem;
+}
+
+.player .player__keys {
+  font-size: 1.25rem;
+  color: grey;
+}
+
+canvas {
+  margin-top: 1rem;
+  border: 1px solid grey;
+}
+
+.controls {
+  display: flex;
+  justify-content: center;
+  margin-top: 1rem;
+}
+
+button {
+  margin: 0 0.5rem;
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  background-color: #fff;
+  color: #000;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #ccc;
+}
+
+