Skip to content

Commit 16176c2

Browse files
Abhishek2nayakAbhishek2nayak
committed
enhanced the ping-pong game UI and also added sounds in game
1 parent 7b05683 commit 16176c2

9 files changed

Lines changed: 414 additions & 273 deletions

File tree

‎Projects/Ping-Png/700.css‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,16 @@
1-
html{
2-
font-size: 6px;
3-
}
1+
#header div:not(.middle) {
2+
display: none;
3+
}
4+
#header {
5+
display: flex;
6+
justify-content: center;
7+
}
8+
#result-box {
9+
width: 80%;
10+
}
11+
#player-score, #computer-score {
12+
font-size:6rem;
13+
}
14+
#set-time {
15+
width: 50%;
16+
}

‎Projects/Ping-Png/Paddle.js‎

Lines changed: 29 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,30 @@
1-
const speed=0.02;
2-
export default class Paddle {
3-
constructor(paddle_element)
4-
{
5-
this.paddle_element=paddle_element;
6-
this.reset()
1+
const speed = 0.02;
2+
export default class Paddle {
3+
constructor(paddle_element) {
4+
this.paddle_element = paddle_element;
5+
this.reset();
6+
}
7+
//Get and setter function for position of paddle
8+
get position() {
9+
return parseFloat(
10+
getComputedStyle(this.paddle_element).getPropertyValue("--position")
11+
);
12+
}
13+
set position(value) {
14+
this.paddle_element.style.setProperty("--position", value);
15+
}
16+
//This function will tell the current position of paddle
17+
rect() {
18+
return this.paddle_element.getBoundingClientRect();
19+
}
20+
//Wll be responsible for movement of paddle
21+
update(diff, ballheight) {
22+
if (ballheight > 9 && ballheight < 93) {
23+
this.position += speed * diff * (ballheight - this.position);
724
}
8-
//Get and setter function for position of paddle
9-
get position()
10-
{
11-
return parseFloat(getComputedStyle(this.paddle_element).getPropertyValue("--position"));
12-
}
13-
set position(value)
14-
{
15-
this.paddle_element.style.setProperty("--position",value);
16-
}
17-
//This function will tell the current position of paddle
18-
rect()
19-
{
20-
return this.paddle_element.getBoundingClientRect();
21-
}
22-
//Wll be responsible for movement of paddle
23-
update(diff,ballheight)
24-
{
25-
this.position+=speed*diff*(ballheight-this.position)
26-
}
27-
// to reset the state of paddle
28-
reset()
29-
{
30-
this.position=50
31-
}
32-
}
33-
34-
25+
}
26+
// to reset the state of paddle
27+
reset() {
28+
this.position = 50;
29+
}
30+
}

‎Projects/Ping-Png/app.js‎

Lines changed: 111 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,130 @@
11
import Ball from "./ball.js";
2-
import Paddle from "./Paddle.js"
3-
// define variable for diffent elements of web page
4-
const ball=new Ball(document.getElementById("ball"));
5-
const player_paddle=new Paddle(document.getElementById("player-paddle"))
6-
const computer_paddle=new Paddle(document.getElementById("computer-paddle"))
7-
const score_of_player=document.getElementById("player-score")
8-
const score_of_computer=document.getElementById("computer-score");
9-
const set_time=document.getElementById("set-time");
10-
const start=document.getElementById("start");
11-
let last_time;
12-
let timespent=0;
2+
import Paddle from "./Paddle.js";
3+
import { playSound } from "./ball.js";
4+
// define variable for diffrent elements of web page
5+
const ball = new Ball(document.getElementById("ball"));
6+
const player_paddle = new Paddle(document.getElementById("player-paddle"));
7+
const computer_paddle = new Paddle(document.getElementById("computer-paddle"));
8+
const score_of_player = document.getElementById("player-score");
9+
const score_of_computer = document.getElementById("computer-score");
10+
const set_time = document.getElementById("set-time");
11+
const start = document.getElementById("start");
12+
const result_box = document.getElementById("result-box");
13+
const close_result_box_btn = result_box.firstElementChild;
1314

14-
//Function to start the game
15-
function update(time)
16-
{
17-
if(last_time!=null)
18-
{
19-
const diff=time-last_time;
20-
timespent+=parseInt(diff)/1000;
21-
document.getElementById("clock").innerText=Math.floor(timespent);
22-
ball.update(diff,[player_paddle.rect(),computer_paddle.rect()]);
23-
computer_paddle.update(diff,ball.y);
15+
let last_time;
16+
let timespent = 0;
2417

25-
if(isloose())
26-
{
27-
handlelose();
28-
}
18+
//Function to start the game
19+
function update(time) {
20+
if (last_time != null) {
21+
const diff = time - last_time;
22+
timespent += parseInt(diff) / 1000;
23+
document.getElementById("clock").innerText = Math.floor(timespent);
24+
ball.update(diff, [player_paddle.rect(), computer_paddle.rect()]);
25+
26+
computer_paddle.update(diff, ball.y);
27+
28+
if (isloose()) {
29+
handlelose();
30+
}
2931
}
30-
last_time=time;
31-
if(timespent>=parseInt(set_time.value))
32-
{
33-
declare_winner()
34-
return;
32+
last_time = time;
33+
if (timespent >= parseInt(set_time.value)) {
34+
declare_winner();
35+
return;
3536
}
36-
window.requestAnimationFrame(update)
37-
}
37+
window.requestAnimationFrame(update);
38+
}
3839
//Function to increment score
39-
function handlelose()
40-
{
41-
const rect=ball.rect();
42-
if(rect.right>=window.innerWidth)
43-
score_of_player.innerText=parseInt(score_of_player.innerText)+1;
44-
if(rect.left<=0)
45-
score_of_computer.innerText=parseInt(score_of_computer.innerText)+1;
46-
ball.reset()
47-
computer_paddle.reset()
40+
function handlelose() {
41+
const rect = ball.rect();
42+
if (rect.right >= window.innerWidth) {
43+
playSound("sounds/gainpoint.mp3");
44+
score_of_player.innerText = parseInt(score_of_player.innerText) + 1;
45+
}
46+
47+
if (rect.left <= 0) {
48+
playSound("sounds/losspoint.mp3");
49+
score_of_computer.innerText = parseInt(score_of_computer.innerText) + 1;
50+
}
51+
52+
ball.reset();
53+
computer_paddle.reset();
4854
}
49-
//Check whether ball is in between twoo paddles
50-
function isloose()
51-
{
52-
const rect=ball.rect();
53-
return rect.right>=window.innerWidth||rect.left<=0
55+
//Check whether ball is in between two paddles
56+
function isloose() {
57+
const rect = ball.rect();
58+
return rect.right >= window.innerWidth || rect.left <= 0;
5459
}
5560

56-
5761
//Function to move player_paddle
58-
window.onkeydown=function(e)
59-
{
60-
if(e.keyCode==38)//Up arrow key
61-
player_paddle.position=player_paddle.position-2
62-
63-
if(e.keyCode==40)//Down Arrow key
64-
player_paddle.position=player_paddle.position+2;
62+
window.onkeydown = function (e) {
63+
if (e.keyCode == 38 && player_paddle.position >= 12)
64+
player_paddle.position = player_paddle.position - 2;
6565

66-
}
66+
if (e.keyCode == 40 && player_paddle.position <= 88)
67+
player_paddle.position = player_paddle.position + 2;
68+
};
6769

6870
//Adding on click to start button
69-
start.addEventListener("click",()=>{
70-
if(set_time.value==="")
71-
alert("Enter Duration of game")
72-
else
73-
{
74-
document.getElementById("set-time").disabled=true;
75-
document.getElementById("start").disabled=true;
76-
document.getElementById("refresh").disabled=true;
77-
window.requestAnimationFrame(update)
71+
start.addEventListener("click", () => {
72+
if (set_time.value === "") alert("Enter Duration of game");
73+
else {
74+
document.getElementById("set-time").style.display = "none";
75+
document.getElementById("start").disabled = true;
76+
document.getElementById("refresh").disabled = true;
77+
document.getElementById("clock").style.display = "block";
78+
window.requestAnimationFrame(update);
7879
}
79-
})
80+
});
8081

8182
// Function to find winner
82-
function declare_winner()
83-
{
84-
if(parseInt(score_of_player.innerText)>parseInt(score_of_computer.innerText))
85-
{
86-
document.getElementById("clock").innerText="You won"
87-
document.getElementById("clock").style.color="Green"
88-
}
89-
else if(parseInt(score_of_player.innerText)===parseInt(score_of_computer.innerText))
90-
{
91-
document.getElementById("clock").innerText="Match Tied"
92-
document.getElementById("clock").style.color="Blue"
93-
}
94-
else
95-
{
96-
document.getElementById("clock").innerText="You lost"
97-
document.getElementById("clock").style.color="Red"
83+
function declare_winner() {
84+
result_box.style.display = "block";
85+
if (
86+
parseInt(score_of_player.innerText) > parseInt(score_of_computer.innerText)
87+
) {
88+
document.getElementById("result").innerText = "You won";
89+
document.getElementById("result").style.color = "Green";
90+
} else if (
91+
parseInt(score_of_player.innerText) ===
92+
parseInt(score_of_computer.innerText)
93+
) {
94+
document.getElementById("result").innerText = "Match Tied";
95+
document.getElementById("result").style.color = "Blue";
96+
} else {
97+
document.getElementById("result").innerText = "You lost";
98+
document.getElementById("result").style.color = "Red";
9899
}
99-
document.getElementById("refresh").disabled=false;
100+
document.getElementById("refresh").disabled = false;
100101
}
101102

102-
//Reset everything
103-
document.getElementById("refresh").addEventListener("click",()=>{
104-
ball.x=50;
105-
ball.y=50;
106-
computer_paddle.position=50;
107-
player_paddle.position=50;
108-
last_time=null;
109-
timespent=0;
110-
document.getElementById("clock").innerText=0;
111-
document.getElementById("clock").style.color="black"
112-
set_time.value=""
113-
document.getElementById("set-time").disabled=false;
114-
document.getElementById("start").disabled=false;
115-
document.getElementById("refresh").disabled=false;
116-
score_of_player.innerText="0"
117-
score_of_computer.innerText="0"
118-
})
103+
//Reset everything
104+
document.getElementById("refresh").addEventListener("click", () => {
105+
ball.x = 50;
106+
ball.y = 50;
107+
computer_paddle.position = 50;
108+
player_paddle.position = 50;
109+
last_time = null;
110+
timespent = 0;
111+
document.getElementById("clock").style.display = "none";
112+
document.getElementById("clock").innerText = 0;
113+
set_time.value = "";
114+
115+
document.getElementById("set-time").style.display = "block";
116+
document.getElementById("set-time").disabled = false;
117+
document.getElementById("start").disabled = false;
118+
document.getElementById("refresh").disabled = false;
119+
score_of_player.innerText = "0";
120+
score_of_computer.innerText = "0";
121+
});
122+
123+
//to close the result box
124+
close_result_box_btn.addEventListener("click", () => {
125+
if (result_box.style.display == "block") {
126+
result_box.style.display = "none";
127+
} else {
128+
result_box.style.display = "block";
129+
}
130+
});

0 commit comments

Comments
 (0)