Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
12 views

Create A Ping Pong Game Using JavaScript

Uploaded by

ankithaanku1406
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

Create A Ping Pong Game Using JavaScript

Uploaded by

ankithaanku1406
Copyright
© © All Rights Reserved
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