Create Ping Pong Game Using JavaScript and HTML5 | JavaScript Project For Beginners

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:
www.codeexplain...
🌍 Social Media Links.
◾ Facebook : / code.explained.official
◾ Twitter : / code_explained
◾ Instagram : / code.explained.official
◾ GitHub : github.com/Cod...
💲 Suppport the Channel
Paypal : paypal.me/Code...
Buy Me a Coffee: www.buymeacoff...
-----------------------------------------------------------------------------------------------------
| HASH TAGS |
-----------------------------------------------------------------------------------------------------
#JavaScript #Html5Games #JavaScriptGames

[@lennoxsherwin5706]

This is one of the best tutorials that I have ever seen. The concepts were explained really clearly and I learnt so much from this. Keep up the good work!

[@CodeExplained]

Happy to hear that, thanks a lot 💖

[@cryptoballer3453]

The way you took the time to diagram the breakdown at the beginning and made it so LEGIBLE for us, was priceless. Best tutorial. Looking forward to watch more of your stuff! Thank U

[@CodeExplained]

Happy to hear that, thanks a lot 💖

[@kvaibz1147]

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

[@Maxtasy888]

Very nice! I really liked that you explained the logic in the beginning. It made it so much easier to follow the coding later on. Great turorial!

[@CodeExplained]

thank you Maxtasy for your positive comment.

[@CodeExplained]

🚨 Big Announcement! 🚨 Hey everyone! I've made a big decision for this channel-I've turned off ads on all my videos! That's right, you can now enjoy all my content ad-free! This means I'm earning $0 from ad revenue, but I believe this is the right move to make your viewing experience better. If you find my content valuable and want to support my work, there are several ways you can help: Like & Share: Simply liking the video and sharing it with friends helps a lot! Subscribe & Hit the Bell: Stay updated and never miss a new video. KZbin Thanks: Use the "Thanks" button below to send a one-time donation. Join the Channel Community: Get exclusive perks and behind-the-scenes content. Buy Me a Coffee: buymeacoffee.com/CodeExplained PayPal Donation: www.paypal.com/paypalme/CodeExplained Every little bit counts and goes directly to creating more high-quality content for you all. Thank you so much for your continued support! Let’s keep growing and learning together! 🌟

[@solomon_3748]

You are the best coding teacher i have ever seen. The concepts,the reason n the logic behind each move and step...you explained it fully ... I really loved it. N I learned alot from your video. Never stop teaching us. Earth needs teachers like you! ✌️

[@CodeExplained]

Thanks a lot for your comment 🙏

[@徐宏杰-i6w]

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

[@CodeExplained]

Thank you, I will

[@twosongs7396]

I looooove the way you teach. Thank you so much for your tutorials. You’re a natural Teacher.

[@shaf5169]

I have a semester-end assignment that requires me to make a website using only HTML CSS and javascript, but I don't like web development at all, I find it really boring because front-end is full of debugging and trying things until it looks right, on the other hand, I can call myself not a beginner in term of game development using game engines, so this is really fun to do for my assignment, thank you.

[@CodeExplained]

Happy to hear that, thanks 💖

[@rubenhappy100]

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

[@徐宏杰-i6w]

Ruben Montanez i agree

[@CodeExplained]

Happy to hear that, Thanks!

[@patrickmcauliffe7162]

GREAT tutorial and your explanation of the logic at the start is second to none! Watch 1.75xspeed and it is even better.

[@CodeExplained]

I'm so glad to hear this from you, thanks a lot 💖

[@karlee8608]

Thank you so much for the detail explanation. I have learned a lot. I really appreciate. I am hoping you would do more games please.:)

[@Billy_98]

holy...This is the best tutorial i ever saw in my life. I wonder how much time u spend on this clip.Big,big like!

[@CodeExplained]

I'm so glad to hear this from you, thanks a lot 💖

[@twosongs7396]

Ha! That’s nothing! Check out his Tetris Game tutorial! This guy’s a natural Teacher!

[@deepresearchersbynk]

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

[@CodeExplained]

Happy to hear that. a big Hi to Pakistan.

[@deepresearchersbynk]

@@CodeExplained thanks sir

[@johnatteo822]

Great tutorial awesome job explaining it in the beginning. Only issue I see 👀 is when the player or computer scores the ball don't reset right away. It's like a 3 second delay before the speed resets. Other than that great work 🍻 👏

[@thehommeyosh8605]

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.

[@CodeExplained]

Happy to hear that, Thanks!

[@federicofranciosi7180]

You are amazing !!! You shold be at university. You explain things in such a way that you CAN'T not understand. THANK YOU SO MUCH !!!!

[@CodeExplained]

You are welcome. and thank you aswell.

[@sophia8443]

Your tutorial must be one of the best I have ever seen on KZbin! Just curious which tools do you use to make your videos? I always want to do something similar but found it quite difficult to make illustrations..

[@microwavecoffee]

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

[@khansawidhani9899]

This is woww, what a tutorial. And you are the best explainer ever I have seen for this ping pong game.

[@CodeExplained]

Thanks, happy to help.

[@АнтиподсосНокитокадзе]

Liked before watching!

[@CodeExplained]

Thanks a lot.

[@yofi2614]

Great tutorial! subbedd! BTW in 22:09 isnt the ball.bottom should be lower than the player.top? cause only if the ball bottom is lower than the player top there is gonna be a collision

[@kazmon99]

10/10 great video, I learned alot

[@CodeExplained]

That's great

[@antarikshhandique2951]

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

[@cynthiamanor6565]

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

[@CodeExplained]

Thank you

[@CodingJourney]

Quality content! Thanks!!!

[@CodeExplained]

You're welcome

[@andersoncdz1]

Thanks for sharing this masterpiece!!!!

[@krishnavarma7395]

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

[@CodeExplained]

Happy to hear that. Thanks

[@fabian8638]

Very well explained, even for a layman

[@trueblue2714]

If you want a solid line change these: width: 5, height: 20,

[@coke1011]

Please do more. I've watched your tetris in JavaScript it was extremely helpful. thanks a lot

[@CodeExplained]

You're welcome, and sure more tutorials are coming in the way :)

[@zorozoro4055]

thank u so much, u are the best, keep going

[@revengerszone1206]

I completely understood due to his good explanation.

[@CodeExplained]

Happy to hear that, thanks 💖

[@kedarsatwik6938]

superb explanation

[@yukselbey913]

Thank you so much for all your quality work. You are explaining very well.

[@CodeExplained]

You're welcome yuksel :) Thanks for your support.

[@calvinmondele7395]

Thanks for your help. mine worked nicely

[@priyankabagoriya8483]

Excellent Explanation I Really Enjoyed it For doing this. Much more comes

[@CodeExplained]

I'm so glad to hear this from you, thanks a lot 💖

[@Ayoubased]

Very good explanation. I just some couple questions. I still don't understand how the colision logic was made. you made 4 expressions in the if statement that return if collision is true or not. what do they represent? in your visuals. you showed 4 different ball positions, how can they all happen in the same time? My second question is what happens when the ball touches the bottom or the top of the paddle? shouldn't it bounce up/down and keep going same X direction?

[@jamestangeres4875]

You're awesome sir. Thank you for educating us with your well explained JavaScript game tutorials. God bless!

[@CodeExplained]

Thank you

[@wandersongomes6733]

Voce tem uma didatica incrivel. Nao tenho palavras pra descrever minha gratidao por voce ta compartilhando esse conteudo maravilhoso. Tenha certeza que voce faz a diferenca na vida de muitos. Obrigado e que Deus te abencoe e um abraco aqui do Brasil.

[@CodeExplained]

Happy to hear that, thanks 💖

[@joeblow8394]

This is an extremely thorough explanation and tutorial, so thanks for that. I do see two issues though. First is that the ball upon being reset is not properly reset to its starting speed (though logging out its speed shows it has been reset, i dont know whats happening here!), and second is that if the ball is going fast enough there seems to be collision detecting issues where the ball will phase right through the paddle?

[@CodeExplained]

Yeah that's some of the bugs you will ecounter.

[@Martin958]

Try changing the framePerSecond value @15:23 to update the game more times than 50 times a second. Not sure what would cause the reset value to be wrong if it shows zero.

[@xiaoliuyu2033]

you are so good!!

[@gouravchouhan1790]

Dude, I just ❤️❤️❤️ u, You're the one I was seriously looking for. ❤️❤️❤️❤️❤️❤️❤️You 😂

[@CodeExplained]

Happy to hear that, thanks 💖

[@renderjourney]

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

[@ErrorDebug]

Yeah for me it sounds like "with it" xD

[@CodeExplained]

Yeah sorry. I didn't even realise that until people told me that.

[@cryptoballer3453]

@@ErrorDebug so what??? This guy has one of the best pong tutorials and you are finding problems with his pronunciation? For real dude!

[@cryptoballer3453]

@@CodeExplained man your accent is fine! I understood you CLEARLY!!!!

[@codeTonight]

Great Video After 54:55, I think that there is still some angle problem present. Because the ball seems to reflect at angles other than 0,45,-45. Or maybe I am wrong? Thanks

[@CodeExplained]

So what is the solution you suggest?

[@codeTonight]

@@CodeExplainedconsole log the value of collide point after normalizing it. I think that it would be other than -1,1,0. Use paranthesis in normalization line too

[@nahidemdad5887]

Very Good. We Want More and More.

[@CodeExplained]

I'm so glad to hear that from you, thanks a lot 💖

[@Relachi]

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

[@kushagra4586]

Relachi bro u can’t use constant to assign 2 values to the same variable try using var instead

[@kushagra4586]

I mean u can’t use const

[@orangegaming9562]

You need to use let/var instead of const The ball can’t be called twice Add image to one of the ball’s variables

[@cryptoballer3453]

I was thinking of putting a logo in the middle of the floor/net like they do on a basketball court. I will try!

[@zababy]

@@cryptoballer3453 use [let ball {code here}] instead of [const ball {}]

[@LLLearning1]

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.

[@CodeExplained]

JavaScript code in a page will be executed immediately while the page loads into the browser.

[@athertonsecretary4385]

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?

[@souptiknath4668]

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

[@deathnotehindidubbed1375]

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

[@CodeExplained]

There was no reason I guess. requestAnimationFrame will render the next frame only when your browser is ready to do so. per example if you leave the tab where you're game is loaded. the game well be paused until you get back to that tab. but that's not the case with setInterval.

[@malekarous1418]

thanks for the video its really well explained

[@samdonaghybell]

Works great thank you. Has there been a fix for the ball going through the paddle at higher speed?

[@samdonaghybell]

I actually worked around this by moving both paddles away from the left and right walls by 10px each.

[@CodeExplained]

I think I fixed the issue, by altering the position of the ball when there is a collision.

[@masterdatta5361]

Nice tutorial! It sounds cool!

[@CodeExplained]

Glad you think so!

[@williamwalker4494]

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

[@CodeExplained]

Yeah of course it's possible.

[@Dawnclause]

Best tutorials;)

[@CodeExplained]

Thanks

[@lakshaysharmasharma5754]

sir which softwer shall i use for making this game pls tell me

[@collisioN_]

very good video! thank you so much bro

[@CodeExplained]

Happy to hear that, Thanks!

[@markthepianist6577]

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

[@brainreapers5241]

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.

[@shivanshattri2530]

This Is Not A Beginner Question, You Are Not Even A Beginner!

[@Smitxt]

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?

[@Smitxt]

nevermind i found out that you had to put the resetBall function placement above other functions

[@amindhahri2542]

What should I do if the ball draw a line instead of stay a circle?

[@CodeExplained]

I think you need to clear the canvas. ctx.clearRect(0, 0, canvas.width, canvas.height);

[@amindhahri2542]

@@CodeExplained ah ok nice thanks I will try

[@amindhahri2542]

@@CodeExplained I fixed it but thanks for help

[@CodeExplained]

great

[@danielthapamagar2179]

what a explain MAN!!! thanks !

[@CodeExplained]

You're welcome

[@wandersongomes8405]

Eu amo seu canal.

[@CodeExplained]

Thanks a lot 👍

[@muzamal9881]

Hi, could you use an endgame function in this to give users a score? If yes, how so. Thanks

[@CodeExplained]

Did you figure out how to do it?

[@zanhaahanz7628]

Perfect explanation

[@CodeExplained]

Glad you enjoyed it!

[@cryptoballer3453]

I am new to Javascript so my challenge will be to add a game over at 21 points (like an old-school ping pong game).

[@CodeExplained]

Yeah cool

[@davidhernandez1699]

Got a glitch where the ball gets stuck in the paddle or sometimes along the bottom width of the board. Any hints? Excellent video, btw.

[@tommyplays5436]

review collision tunneling.

[@somebody-17546]

return p.left < b.right && p.top < b.bottom && p.right > b.left && p.bottom > b.top; 49:30 I can't understand .Can you explain it . What value it will return

[@CodeExplained]

It will return either TRUE or FALSE.

[@pweissge]

I have a problem in my thinking logic if there is a collision one of the 4 cases can happen but not all the 4 at the same time why do we use AND in the if clause and not OR. Thank you.

[@CodeExplained]

There won't be a collision if all the conditions weren't all true.

[@amatakchannel3735]

amazing!

[@wandersongomes8405]

Muito obrigado. Voce me ajudou bastante.

[@CodeExplained]

Happy to hear that, thanks 💖

[@ahsanazeem4079]

I wanted to make a two player ping pong but I cant detect the key presses if one player just spams the key the second press is not issued. Help me

[@CodeExplained]

READ this: stackoverflow.com/questions/5203407/how-to-detect-if-multiple-keys-are-pressed-at-once-using-javascript

[@TheBobstar89]

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

[@CodeExplained]

It depends on the width and the height I guess. if per example the width was = 5px, dividing by 5 will be better than dividing by 4.

[@trangnguyenthibaotrang6944]

Thank you so much

[@CodeExplained]

You're most welcome

[@javaexpertsa8947]

Awesome content!!!

[@CodeExplained]

Thank you.

[@Ayoubased]

I still cant understand the collison between the ball and player? I wish I can get a 1 on 1 explanation to see where I missed my logic

[@aravind_k28]

Awesome :)

[@angel-k5j5j]

How can I put a another mid line as an obstacle?:0 I mean, a little middle solid line as a little wall

[@CodeExplained]

YOu can simply draw a rectangle, but then you'll need to add some collision detection for it to work

[@leogansallo-sadiq2864]

Hi, love your work. But I've a problem @46:10. In my code i believe I've all the code correctly written but it wont show me my output canvas instead a blank page. What can i do to fix this problem. Thanks. Great work again.

[@CodeExplained]

Show me your code, or open the console and try to debug your code.

[@leogansallo-sadiq2864]

@@CodeExplained please how can i show you my code. I don't mind showing you my code. Thanks

[@CodeExplained]

paste here.

[@leogansallo-sadiq2864]

@@CodeExplained //select canvas const cvs = document.getElementById("pong"); const ctx = cvs.getContext("2d"); //create the user paddle (object) const user = { x : 0, y : cvs.height/2 - 100/2, width : 10, height : 100, color : "white", score = 0 } //create the computer paddle (object) const com = { x : cvs.width - 10, y : cvs.height/2 - 100/2, width : 10, height : 100, color : "white", score = 0 } //create the ball (object) const ball = { x : cvs.width/2, y : cvs.height/2, radius : 10, speed : 5, velocityX : 5, velocityY : 5, color : "white" } //draw rect function function drawRect(x, y, w, h, color){ ctx.fillStyle = color; ctx.fillRect(x, y, w, h); } //create the net (object) const net = { x : cvs.width/2 -1, y : 0, width : 2, height : 10, color : "white" } //draw net function drawNet(){ for(let i = 0; i

[@CodeExplained]

In your com and user objects you used an equal sign for the score property.

[@epixtille7069]

Is there any way we can create a menu screen to allow the user to select the difficulty

[@CodeExplained]

Yeah of course.

[@lavisworld5142]

Subscribed😃😃😃😄

[@devashanpillay1737]

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

[@CodeExplained]

can't tell if I don't see what's in the console log.

[@themagicaltv954]

can you pls tell that you make this game by which website

[@CodeExplained]

brackets.io

[@mariuswiborg8146]

How do you make the basic html template??

[@CodeExplained]

What ?

[@CodeExplained]

I'm using an extension called EMMET with brackets editor, it completes the code for you, per example I just need to type: " ! + TAB " to create the basic HTML code. and thanks.

[@mariuswiborg8146]

Code Explained ok thank you very much for the fast answer. Love your work

[@matto2041]

thanx i really like your teaching style and that you take ur time! :subs:

[@CodeExplained]

Happy to hear that, thanks 💖

[@AndrewErwin73]

Why not use RequestAnimationFrame?

[@Aayush-cd3dc]

In which software you have made

[@CodeExplained]

brackets.io

[@genttner]

cvs.getContext("2d"); {RETURNS BACK: script.js:2 Uncaught TypeError: Cannot read property 'getContext' of null at script.js:2}

[@genttner]

stupid errors like these are swift kicks in the nuts

[@CodeExplained]

Did you fix it? I think there is a problem with cvs, you didn't select right the canvas.

[@ARMADA-oz6we]

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

[@CodeExplained]

Happy to hear that. Thanks!

[@ARMADA-oz6we]

@@CodeExplained wasn't a compliment, but if it makes you feel better feel free to think of it as one

[@shubhampanchal7098]

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

[@CodeExplained]

Take a look on your console log. or show me your code.

[@theamoralfish530]

*Thanks You!*

[@CodeExplained]

You're welcome

[@4rtui1]

does this work on notepad?

[@CodeExplained]

??

[@4rtui1]

@@CodeExplained You know, some people use notepad for making websites and sometimes games

[@CodeExplained]

Yeah you can make the same thing with any text editor out there.

[@gsharma8781]

amazing, bro

[@CodeExplained]

Thanks

[@dearsb69]

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

[@CodeExplained]

In this video I used brackets.io

[@Ellen_Yuri]

thank you !!!

[@CodeExplained]

You're welcome!

[@vellacreator]

please decrease the frequency of the sound it as it hurts when we use earphones

[@pedroalbuquerque4519]

how do I make the user move with the keyboard instead of the mouse?

[@CodeExplained]

Use onkeydown event listener.

[@lefoudupinpon]

Have you understood how to use the onkeydown event listener ? If the answer is yes please let me know how you fixed it.

[@studywithlakshsurana]

how can we add a limit that after this point the game will get over

[@CodeExplained]

Did you figure out how to do it?

[@MinhLe-sl5vm]

I am figuring out a way to implement a gameover function to end the game if either player or computer reaches 10 score. Can anyone give me a hint on how to do it?

[@CodeExplained]

Did you figure out how to do it, or still need help?

[@MinhLe-sl5vm]

@@CodeExplained I have figured it out. Thank you so much!

[@MinhLe-sl5vm]

@@CodeExplained I have figured it out. Thank you so much!

[@CodeExplained]

Great