Code Ping Pong Game Using JavaScript and HTML5

44
58



Table tennis, also known as ping pong, is a game in which two or four players hit a little, light ball back and forth across a table using a small paddle. A point is scored when a player fails to return the ball to the other player. Basically, you’re playing tiny tennis on a table.

Today you’re going to create the PING PONG game using JavaScript and HTML (or HTML5).

I will go step by step, and try to break down every line of code so everyone can understand the logic behind the game, after watching this tutorial, you will be able for sure to create the game on your own.

If you want to follow along with me when I type in the code, you’ll need to download the starter template from GitHub.
—————————————————————————————————–
| LINKS |
—————————————————————————————————–

DOWNLOAD SOURCE CODE + STARTER TEMPLATE:

—————————————————————————————————–
| RECOMMENDED TUTORIALS |
—————————————————————————————————–

Ping Pong Game Using JavaScript

Create a Multiple Choice Quiz Using JavaScript

Tetris Game Using JavaScript

Snake Game Using JavaScript

Flappy Bird Game Using JavaScript

—————————————————————————————————–
| SOCIAL MEDIA |
—————————————————————————————————–

Facebook:
Twitter:
Instagram:
Website:

—————————————————————————————————–
| HASH TAGS |
—————————————————————————————————–
#JavaScript #Html5Games #JavaScriptGames

Nguồn: https://ecotown-phumy.com/

Xem thêm bài viết khác: https://ecotown-phumy.com/game/

44 COMMENTS

  1. 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.

  2. 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

  3. 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?

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

  5. 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?

  6. 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

  7. 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….

  8. 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.

  9. 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()

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

  11. 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.

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here