Skip to content

Commit 8fc33ce

Browse files
Ayushparikh-codeAyushparikh-code
authored
Merge pull request #407 from singhvivekkumar/game-ping-pong
create game
2 parents 0b8a1dd + 72cd88c commit 8fc33ce

File tree

8 files changed

+218
-0
lines changed

8 files changed

+218
-0
lines changed

‎Game Ping Pong/README/Image1.png

11.9 KB
Loading

‎Game Ping Pong/README/Image2.png

13.1 KB
Loading

‎Game Ping Pong/README/Image3.gif

6.17 MB
Loading

‎Game Ping Pong/README/Project Game.png

106 KB
Loading

‎Game Ping Pong/README/ReadMe.txt

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
The game should look like this on starting -
2+
Image1
3+
4+
The game should look like this at the end of each round -
5+
Image2
6+
7+
A small video for this game is provided below -
8+
Image3

‎Game Ping Pong/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Ping Pong</title>
5+
</head>
6+
<body>
7+
8+
<div id="container">
9+
10+
<div id="ball"></div>
11+
<div id="rod1">Rod 1</div>
12+
<div id="rod2">Rod 2</div>
13+
14+
</div>
15+
16+
</body>
17+
</html>

‎Game Ping Pong/script.js

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
var ball = document.getElementById('ball');
2+
var rod1 = document.getElementById('rod1');
3+
var rod2 = document.getElementById('rod2');
4+
5+
6+
const storeName = "PPName";
7+
const storeScore = "PPMaxScore";
8+
const rod1Name = "Rod 1";
9+
const rod2Name = "Rod 2";
10+
11+
12+
let score,
13+
maxScore,
14+
movement,
15+
rod,
16+
ballSpeedX = 2,
17+
ballSpeedY = 2;
18+
19+
let gameOn = false;
20+
21+
let windowWidth = window.innerWidth,
22+
windowHeight = window.innerHeight;
23+
24+
25+
26+
(function () {
27+
rod = localStorage.getItem(storeName);
28+
maxScore = localStorage.getItem(storeScore);
29+
30+
if (rod === "null" || maxScore === "null") {
31+
alert("This is the first time you are playing this game. LET'S START");
32+
maxScore = 0;
33+
rod = "Rod1"
34+
} else {
35+
alert(rod + " has maximum score of " + maxScore * 100);
36+
}
37+
38+
resetBoard(rod);
39+
})();
40+
41+
42+
43+
function resetBoard(rodName) {
44+
45+
rod1.style.left = (window.innerWidth - rod1.offsetWidth) / 2 + 'px';
46+
rod2.style.left = (window.innerWidth - rod2.offsetWidth) / 2 + 'px';
47+
ball.style.left = (windowWidth - ball.offsetWidth) / 2 + 'px';
48+
49+
50+
// Lossing player gets the ball
51+
if (rodName === rod2Name) {
52+
ball.style.top = (rod1.offsetTop + rod1.offsetHeight) + 'px';
53+
ballSpeedY = 2;
54+
} else if (rodName === rod1Name) {
55+
ball.style.top = (rod2.offsetTop - rod2.offsetHeight) + 'px';
56+
ballSpeedY = -2;
57+
}
58+
59+
score = 0;
60+
gameOn = false;
61+
62+
}
63+
64+
65+
66+
function storeWin(rod, score) {
67+
68+
if (score > maxScore) {
69+
maxScore = score;
70+
localStorage.setItem(storeName, rod);
71+
localStorage.setItem(storeScore, maxScore);
72+
}
73+
74+
clearInterval(movement);
75+
resetBoard(rod);
76+
77+
alert(rod + " wins with a score of " + (score * 100) + ". Max score is: " + (maxScore * 100));
78+
79+
}
80+
81+
82+
83+
window.addEventListener('keypress', function () {
84+
let rodSpeed = 20;
85+
86+
let rodRect = rod1.getBoundingClientRect();
87+
88+
89+
if (event.code === "KeyD" && ((rodRect.x + rodRect.width) < window.innerWidth)) {
90+
rod1.style.left = (rodRect.x) + rodSpeed + 'px';
91+
rod2.style.left = rod1.style.left;
92+
} else if (event.code === "KeyA" && (rodRect.x > 0)) {
93+
rod1.style.left = (rodRect.x) - rodSpeed + 'px';
94+
rod2.style.left = rod1.style.left;
95+
}
96+
97+
98+
if (event.code === "Enter") {
99+
100+
if (!gameOn) {
101+
gameOn = true;
102+
let ballRect = ball.getBoundingClientRect();
103+
let ballX = ballRect.x;
104+
let ballY = ballRect.y;
105+
let ballDia = ballRect.width;
106+
107+
let rod1Height = rod1.offsetHeight;
108+
let rod2Height = rod2.offsetHeight;
109+
let rod1Width = rod1.offsetWidth;
110+
let rod2Width = rod2.offsetWidth;
111+
112+
113+
movement = setInterval(function () {
114+
// Move ball
115+
ballX += ballSpeedX;
116+
ballY += ballSpeedY;
117+
118+
rod1X = rod1.getBoundingClientRect().x;
119+
rod2X = rod2.getBoundingClientRect().x;
120+
121+
ball.style.left = ballX + 'px';
122+
ball.style.top = ballY + 'px';
123+
124+
125+
if ((ballX + ballDia) > windowWidth || ballX < 0) {
126+
ballSpeedX = -ballSpeedX; // Reverses the direction
127+
}
128+
129+
// It specifies the center of the ball on the viewport
130+
let ballPos = ballX + ballDia / 2;
131+
132+
// Check for Rod 1
133+
if (ballY <= rod1Height) {
134+
ballSpeedY = -ballSpeedY; // Reverses the direction
135+
score++;
136+
137+
// Check if the game ends
138+
if ((ballPos < rod1X) || (ballPos > (rod1X + rod1Width))) {
139+
storeWin(rod2Name, score);
140+
}
141+
}
142+
143+
// Check for Rod 2
144+
else if ((ballY + ballDia) >= (windowHeight - rod2Height)) {
145+
ballSpeedY = -ballSpeedY; // Reverses the direction
146+
score++;
147+
148+
// Check if the game ends
149+
if ((ballPos < rod2X) || (ballPos > (rod2X + rod2Width))) {
150+
storeWin(rod1Name, score);
151+
}
152+
}
153+
154+
}, 10);
155+
156+
}
157+
}
158+
159+
});

‎Game Ping Pong/style.css

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
#container {
2+
position: relative;
3+
}
4+
5+
#ball {
6+
width: 20px;
7+
height: 20px;
8+
background-color: red;
9+
position: fixed;
10+
top: 20px;
11+
left: 52.5%;
12+
border-radius: 50%;
13+
}
14+
15+
#rod1, #rod2 {
16+
width: 200px;
17+
height: 20px;
18+
position: fixed;
19+
left: 50%;
20+
border-radius: 25px;
21+
text-align: center;
22+
color: white;
23+
font-weight: bold;
24+
}
25+
26+
#rod1 {
27+
background-color: blue;
28+
top: 1px;
29+
}
30+
31+
#rod2 {
32+
background-color: blueviolet;
33+
bottom: 1px;
34+
}

0 commit comments

Comments
 (0)