Scribd
Upload
19 views

Create A Ping Pong Game Using JavaScript

Uploaded by

ankithaanku1406
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
19 views

Create A Ping Pong Game Using JavaScript

Uploaded by

ankithaanku1406
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

Ping Game using JavaScript

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Table Of Content
● Create HTML Page

● Select elements

● Draw Shapes

● Required Objects

● Create Functions

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
HTML CODE

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
<!DOCTYPE html>
<html>

<head>
<title>Ping Pong Game</title>
</head>

<body style="background-color:gray">
<canvas id="table" width="600" height="400"></canvas>
<script src="p_p.js"></script>
</body>

</html>

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Just HTML

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
JavaScript CODE

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Selecting the Canvas

let can = document.getElementById("table");

let draw_ = canvas.getContext('2d');

Drawing Shapes

draw_.fillStyle = color; // Rectangle


draw_.fillRect(x, y, w, h);

draw_.fillStyle = color;
draw_.beginPath();
draw_.arc(x,y,r,0,Math.PI*2,false); // 0-start angle & false- clockwise direction
draw_.closePath();
draw_ .fill();
Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Output

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Creating Object

● User
● Computer
● Ball
● Separator
● Score card

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
User Object

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
CPU Object

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Required Functions:

● Two vertical bars


● One ball
● Separator
● Score card
● Helper
● CallBack

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Output:

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Update Function

● How to move our bar (Movements)

● How to detect collisions

● How to update our scores

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
IT’S DONE!

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
Thank You

Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.

You might also like