Skip to content

Commit b288ec6

Browse files
PBJIPBJI
authored
Merge pull request #763 from ayan-joshi/Ping-Pong
Ping pong
2 parents c2b04ff + f4f1058 commit b288ec6

File tree

5 files changed

+307
-0
lines changed

5 files changed

+307
-0
lines changed

‎PingPongGame/ayan-joshi/README.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# **Ping_Pong**
2+
3+
---
4+
5+
<br>
6+
7+
## **Description 📃**
8+
- 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.
9+
- They must prevent the ball from touching the surface of the table on their side
10+
11+
12+
<br>
13+
14+
## **How to play? 🕹️**
15+
- Controls:
16+
- `W`: Up / `S`: Down (Player 1)
17+
- `↑`: Up / `↓`: Down (Player 2)
18+
- 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.
19+
- 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.
20+
- This is a endless game, so both players can play as much as they want
21+
- Also added the Pause , Resume and Reset button below to make it more interesting.
22+
23+
24+
<br>
25+
26+
## **Screenshots 📸**
27+
28+
<br>
29+
30+
![Alt text](<Screenshot (188).png>)
31+
32+
<br>

‎PingPongGame/ayan-joshi/Screenshot (188).png‎

85.1 KB
Loading

‎PingPongGame/ayan-joshi/index.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Ping Pong Multiplayer</title>
7+
<link rel="stylesheet" href="./styles.css">
8+
</head>
9+
<body>
10+
<div>
11+
<header>
12+
<div class="player">
13+
<span class="player__score" data-player="1"></span>
14+
<span class="player__keys">W: Up / S: Down</span>
15+
</div>
16+
<h1>PING PONG</h1>
17+
<div class="player">
18+
<span class="player__score" data-player="2"></span>
19+
<span class="player__keys">↑: Up / ↓: Down</span>
20+
</div>
21+
</header>
22+
<main>
23+
<canvas id="game" width="600" height="480"></canvas>
24+
</main>
25+
<div class="controls">
26+
<button id="pause">Pause</button>
27+
<button id="resume">Resume</button>
28+
<button id="reset">Reset</button>
29+
</div>
30+
</div>
31+
<script src="./script.js"></script>
32+
</body>
33+
</html>

‎PingPongGame/ayan-joshi/script.js‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
// Wait for the HTML document to load before running the script
2+
document.addEventListener("DOMContentLoaded", function() {
3+
// Get the canvas element
4+
const canvas = document.getElementById("game");
5+
const context = canvas.getContext("2d");
6+
7+
// Set up initial game state
8+
let player1Score = 0;
9+
let player2Score = 0;
10+
let gamePaused = false;
11+
let requestId;
12+
13+
// Set up player positions and paddle dimensions
14+
const player1 = {
15+
x: 10,
16+
y: canvas.height / 2 - 50,
17+
width: 10,
18+
height: 100,
19+
dy: 0
20+
};
21+
22+
const player2 = {
23+
x: canvas.width - 20,
24+
y: canvas.height / 2 - 50,
25+
width: 10,
26+
height: 100,
27+
dy: 0
28+
};
29+
30+
// Set up ball properties
31+
const ball = {
32+
x: canvas.width / 2,
33+
y: canvas.height / 2,
34+
radius: 10,
35+
dx: 5,
36+
dy: 5
37+
};
38+
39+
// Draw the game elements
40+
function draw() {
41+
// Clear the canvas
42+
context.clearRect(0, 0, canvas.width, canvas.height);
43+
44+
// Draw the player scores
45+
context.font = "48px Arial";
46+
context.fillStyle = "#fff";
47+
context.fillText(player1Score, canvas.width / 2 - 50, 50);
48+
context.fillText(player2Score, canvas.width / 2 + 25, 50);
49+
50+
// Draw the players' paddles
51+
context.fillStyle = "#fff";
52+
context.fillRect(player1.x, player1.y, player1.width, player1.height);
53+
context.fillRect(player2.x, player2.y, player2.width, player2.height);
54+
55+
// Draw the ball
56+
context.beginPath();
57+
context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
58+
context.fillStyle = "#fff";
59+
context.fill();
60+
context.closePath();
61+
}
62+
63+
// Update game logic
64+
function update() {
65+
if (gamePaused) {
66+
return;
67+
}
68+
69+
// Move the players' paddles
70+
player1.y += player1.dy;
71+
player2.y += player2.dy;
72+
73+
// Move the ball
74+
ball.x += ball.dx;
75+
ball.y += ball.dy;
76+
77+
// Check for collisions with the top and bottom walls
78+
if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
79+
ball.dy *= -1;
80+
}
81+
82+
// Check for collisions with the players' paddles
83+
if (
84+
ball.x - ball.radius < player1.x + player1.width &&
85+
ball.y > player1.y &&
86+
ball.y < player1.y + player1.height
87+
) {
88+
ball.dx *= -1;
89+
} else if (
90+
ball.x + ball.radius > player2.x &&
91+
ball.y > player2.y &&
92+
ball.y < player2.y + player2.height
93+
) {
94+
ball.dx *= -1;
95+
}
96+
97+
// Check for scoring
98+
if (ball.x + ball.radius > canvas.width) {
99+
player1Score++;
100+
resetBall();
101+
} else if (ball.x - ball.radius < 0) {
102+
player2Score++;
103+
resetBall();
104+
}
105+
106+
// Call the draw function to update the canvas
107+
draw();
108+
}
109+
110+
// Reset the ball to the center of the canvas
111+
function resetBall() {
112+
ball.x = canvas.width / 2;
113+
ball.y = canvas.height / 2;
114+
ball.dx = Math.sign(ball.dx) * 5;
115+
ball.dy = Math.sign(ball.dy) * 5;
116+
}
117+
118+
// Set up event listeners for player movement
119+
document.addEventListener("keydown", function(event) {
120+
if (event.key === "w") {
121+
player1.dy = -5;
122+
} else if (event.key === "s") {
123+
player1.dy = 5;
124+
} else if (event.key === "ArrowUp") {
125+
player2.dy = -5;
126+
} else if (event.key === "ArrowDown") {
127+
player2.dy = 5;
128+
}
129+
});
130+
131+
document.addEventListener("keyup", function(event) {
132+
if (event.key === "w" || event.key === "s") {
133+
player1.dy = 0;
134+
} else if (event.key === "ArrowUp" || event.key === "ArrowDown") {
135+
player2.dy = 0;
136+
}
137+
});
138+
139+
// Set up event listeners for buttons
140+
const pauseButton = document.getElementById("pause");
141+
pauseButton.addEventListener("click", function() {
142+
gamePaused = true;
143+
cancelAnimationFrame(requestId);
144+
});
145+
146+
const resumeButton = document.getElementById("resume");
147+
resumeButton.addEventListener("click", function() {
148+
gamePaused = false;
149+
requestId = requestAnimationFrame(gameLoop);
150+
});
151+
152+
const resetButton = document.getElementById("reset");
153+
resetButton.addEventListener("click", function() {
154+
player1Score = 0;
155+
player2Score = 0;
156+
resetBall();
157+
cancelAnimationFrame(requestId);
158+
requestId = requestAnimationFrame(gameLoop);
159+
});
160+
161+
// Game loop
162+
function gameLoop() {
163+
update();
164+
requestId = requestAnimationFrame(gameLoop);
165+
}
166+
167+
// Start the game loop
168+
gameLoop();
169+
});
170+

‎PingPongGame/ayan-joshi/styles.css‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
body,
2+
html {
3+
margin: 0;
4+
padding: 0;
5+
height: 100%;
6+
}
7+
8+
body {
9+
flex-direction: column;
10+
justify-content: center;
11+
background-color: #000;
12+
color: #fff;
13+
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
14+
}
15+
16+
body,
17+
header {
18+
display: flex;
19+
align-items: center;
20+
}
21+
22+
header {
23+
justify-content: space-around;
24+
width: 100%;
25+
}
26+
27+
.player {
28+
display: flex;
29+
flex-direction: column;
30+
align-items: center;
31+
justify-content: center;
32+
line-height: 1.25;
33+
}
34+
35+
.player .player__score {
36+
display: block;
37+
font-weight: 700;
38+
font-size: 2rem;
39+
}
40+
41+
.player .player__keys {
42+
font-size: 1.25rem;
43+
color: grey;
44+
}
45+
46+
canvas {
47+
margin-top: 1rem;
48+
border: 1px solid grey;
49+
}
50+
51+
.controls {
52+
display: flex;
53+
justify-content: center;
54+
margin-top: 1rem;
55+
}
56+
57+
button {
58+
margin: 0 0.5rem;
59+
padding: 0.5rem 1rem;
60+
font-size: 1rem;
61+
background-color: #fff;
62+
color: #000;
63+
border: none;
64+
border-radius: 4px;
65+
cursor: pointer;
66+
}
67+
68+
button:hover {
69+
background-color: #ccc;
70+
}
71+
72+

0 commit comments

Comments
 (0)