diff --git a/PingPongGame/ayan-joshi/README.md b/PingPongGame/ayan-joshi/README.md new file mode 100644 index 000000000..423c0ef16 --- /dev/null +++ b/PingPongGame/ayan-joshi/README.md @@ -0,0 +1,32 @@ +# **Ping_Pong** + +--- + +
+ +## **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 + + +
+ +## **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. + + +
+ +## **Screenshots 📸** + +
+ +![Alt text]() + +
\ No newline at end of file diff --git a/PingPongGame/ayan-joshi/Screenshot (188).png b/PingPongGame/ayan-joshi/Screenshot (188).png new file mode 100644 index 000000000..7820f470e Binary files /dev/null and b/PingPongGame/ayan-joshi/Screenshot (188).png differ diff --git a/PingPongGame/ayan-joshi/index.html b/PingPongGame/ayan-joshi/index.html new file mode 100644 index 000000000..1b265c5d4 --- /dev/null +++ b/PingPongGame/ayan-joshi/index.html @@ -0,0 +1,33 @@ + + + + + + Ping Pong Multiplayer + + + +
+
+
+ + W: Up / S: Down +
+

PING PONG

+
+ + ↑: Up / ↓: Down +
+
+
+ +
+
+ + + +
+
+ + + diff --git a/PingPongGame/ayan-joshi/script.js b/PingPongGame/ayan-joshi/script.js new file mode 100644 index 000000000..6752e1eed --- /dev/null +++ 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(); + }); + \ No newline at end of file diff --git a/PingPongGame/ayan-joshi/styles.css b/PingPongGame/ayan-joshi/styles.css new file mode 100644 index 000000000..a8a8f1f4e --- /dev/null +++ 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; +} + + \ No newline at end of file