Code Ping Pong Game Using JavaScript and HTML5

Very Good. We Want More and More.

Best tutorial ever.Just love it!!
But one question
Why in ball.velocityX we have to multiply an angle?

Awesome 🙂

Sir I've got a question a beginner question, When i tried to run the program nothing pop up and i check the console and said Syntax error: Unexpected identifier.

Edit:
I need yo know how to fix it.

i seriously thought it was gonna be easy. great tutorial tho.

I like the way you explain all the things.
Thx anf keep it up

hi is it possible to substitute the ball with an image instead?
What code can I use?

I wrote this in JS:

const ball = {
x : canvas.width/2,
y : canvas.height/2,
radius : 10,
speed : 5,
velocityX : 5,
velocityY : 5,
speed : 7,
}

const ball = new Image();
img.src = "img/trump.png";

the game wont start anymore tho

Your account is sooo underrated !!! This is the best js acc I've seen so farr

Enjoyed the project and got it running eventually! However, I can't stop it!!! What is the code for ending the game when a certain score is reached – say 10 by either player?

Hello! Nice tutorial. But I had a little issue:
When the ball hits user or com paddle it decreases its speed.

50 FPS on PC, take that PS5 !!! is video you have contex in source you have ctx, but that's okay

Am i the only one who is confused about why his voice turned high

so i have a weird problem in which that the ball doesnt reset upon hitting the edges of the screen unless the paddle touches it
i changed the value in the "update score" segment and anything above 10 requires that the paddle be in front for the computer to score
same problem for the computer paddle
how do i fix this?

Are you swedish??

Why not use RequestAnimationFrame?

I'm a beginner Sir and I cannot find a software on which I can write and edit my code please help me Sir and lots of love from India

Please keep continuing your great work man! Learned a lot from your videos as a beginner. 😀

Best explaination,but why didn't we use requestAnimationFrams?
Like in the flappy bird?

can you send me the actual codes
pls

Thanks so much. Would be good with a 'Start Game' button, or restart button and great with a first to 10 points, then 'Gave Over'. Possible to add the code? I can do the HTML but get lost in the JS….

very good video! thank you so much bro

Hi Thank you for your video, it is very detailed. I just have one question about the program. Which line starts it. I get the objects and functions to a degree, but the code that starts the programming running is what is stumping me.

import pygame
import sys
pygame.init()
White=(255,255,255)
width=800
Score=0
SpriteGroup=pygame.sprite.Group()
SpriteGroupTwo=pygame.sprite.Group()
height=600
Black=(0,0,0)
window=pygame.display.set_mode((width,height))
SpriteReturnValueX=1
SpriteGroupThree=pygame.sprite.Group()
SpriteXSpeed=5
SpriteYSpeed=3
Clock=pygame.time.Clock()
SpriteReturnValueY=1
class CreateSprite(pygame.sprite.Sprite):
global Black
global White
def __init__(self):
super().__init__()
self.image=pygame.Surface((25,25))
self.image.fill(White)
self.rect=self.image.get_rect()
self.rect.x=400
self.rect.y=300
def Move(self):
if self.rect.x<25:
print("Game Over")
sys.exit()
if self.rect.y<25:
global SpriteReturnValueY
SpriteReturnValueY*=-1
if self.rect.x>775:
print("Game Over")
sys.exit()
if self.rect.y>575:
SpriteReturnValueY*=-1
global SpriteReturnValueX
self.rect.x+=-SpriteXSpeed*SpriteReturnValueX
self.rect.y+=-SpriteYSpeed*SpriteReturnValueY
class CreateSpriteTwo(pygame.sprite.Sprite):
def __init__(self):
super().__init__()
self.image=pygame.Surface((25,75))
self.image.fill(White)
self.rect=self.image.get_rect()
self.rect.x=50
self.rect.y=300
if self.rect.y==600:
self.rect.y=0
if self.rect.y==0:
self.rect.y=600
def SpriteMoveYPlus(self):
self.rect.y-=5
def SpriteMoveYMinus(self):
self.rect.y+=5
class CreatSpriteThree(pygame.sprite.Sprite):
def __init__(self):
super().__init__()
self.image=pygame.Surface((25,75))
self.image.fill(White)
self.rect=self.image.get_rect()
self.rect.x=750
self.rect.y=300
if self.rect.y==50 or self.rect.y==750:
self.rect.y=300
SpriteThree=CreatSpriteThree()
Sprite=CreateSprite()
SpriteTwo=CreateSpriteTwo()
SpriteGroup.add(Sprite,SpriteTwo,SpriteThree)
SpriteGroupTwo.add(SpriteTwo)
SpriteGroupThree.add(SpriteThree)
KeyValue2=pygame.key.get_pressed()
while True:
SpriteThree.rect.y=Sprite.rect.y-50
for event in pygame.event.get():
if event.type==pygame.QUIT:
sys.exit()
SpriteGroup.draw(window)
Sprite.Move()
Clock.tick(70)
KeyValue=pygame.key.get_pressed()
if KeyValue[pygame.K_s]:
SpriteTwo.SpriteMoveYMinus()
if KeyValue[pygame.K_w]:
SpriteTwo.SpriteMoveYPlus()
true=pygame.sprite.spritecollide(Sprite,SpriteGroupTwo,False)
truetwo=pygame.sprite.spritecollide(Sprite,SpriteGroupThree,False)
if true:
SpriteReturnValueX*=-1
Score+=10
if truetwo:
SpriteReturnValueX*=-1
pygame.display.update()
window.fill(Black)
if Score==2500:
print("Winner")
sys.exit()

thank you !!!

if you have tutorial on udemy，i will buy

best tutorial in Youtube，you explain every detail clearly.really hope you can create a series of JavaScript tutorial

you know a tutorial is amazing if it becomes unclear within the first 2 minutes of the 55

what a explain MAN!!!
thanks !

You did an AWESOME job of explaining the logic behind your code!

Love the video, however I am curious how you decided to divide the width by 1/4ths and height by 1/5ths

Thanks You!

how to save score for user?

I am doing my final project for school and I chose "PONG" I viewed a ton of videos and |I would have to say I enjoyed how you broke it down before you open the editor
I learned a lot and yes I did subscribed.

This is the best tutorial video of canvas that I see on youtube. Great job!

This is the best tutorial video of canvas that I see on youtube. Great job!

Disappointed, doesn't work com doesn't appear and net doesn't appear

LOTS OF LOVE FROM PAKISTANI…………..I REALLY LEARN TOO MUCH

Thanks a lot. I finnaly understand javascript

Best tutorials;)

its not possible to winn….

Perfect explanation

Thanks for sharing this code 😇
But I‘m confused of your pronunciation of „width“. You pronounced it like „withid“ the whole time.😅

The Ball is not moving ,nor the com paddle , where can the error possibly be ??

after a while th com paddle disappears and the score keep incrementing. Any idea why?