PingPong/Table Tennis in Javascript-#2nd Project-with explanation

save the following code as index.html.

u should not worry about the code above. because it is kind of a template code, that you can use anywhere in game development through javscript.

now paste the following code and save it as pong.js.

it’s lengthy and it’s hard..but it is simple when you understand what you are doing there.

its output will be coming as below

i am a bad tennis player(u can see it above!).

now, let’s explain the whole code scenario.

it will be hard to grasp all concepts at once BUT when I am teaching, nothing is hard.

as i have already discussed the methods to draw rectangle and circle, i will prefer not to repeat it again…go and watch the previous tutorials.

but also, simply i want to say that we take use of fillstyle, beginpath() etc and draw them…

at the beginning, we had done this

const ctx = canvas.getContext(‘2d’);

and furthur we went on accessing the other features by the help of ctx variable.

note that speed and velocity are 2 different things.

then, let’s see about making of paddles.

the above coe shows how, we made the paddle for user.

then, we will see,how to make paddle for computer.

now, lets move forward towards creating a net…i will describe it as well; with the help of a figure…

(the height of net object is 10 i.e of each | )

then, you can see that we created rectangles and circles with the basic way of creating them.

it is like a forumula….you have remembered so much formulas till now, so if you can’t understand that till now; you better memorize it.

but, if you want to learn it, you can visit my past tutorials, or send me a message.

NOW we have to listen to the mouse, so for that, we will prefer the following code. i will explain this through figure.

we have done something right there, I want to say why we had to do that through the stack overflow quote

“It is because getBoundingClientRect() gets values with respect to the window(only the current visible portion of the page), not the document(whole page).

Hence, it also takes scrolling into account when calculating its values
Basically, document = window + scroll

So, to get the distance between myElement and the Y-coordinate=0 (top of document), you would have add the value of vertical-scroll also:

myElement.getBoundingClientRect().top + window.scrollY; ”

stackoverflow link of it

For more visit the mozilla developer’s website

Mozilla developers website

so, for now, just remember that, though it is true that

Mouse position=Paddle Position but there are some factors that affect the posiotion

the getBoundingClientRect() returns top,bottom,left,right,height and width in READ ONLY.

then, while scrolling down, the top of the page will change.i.e we need to do as shown in figure

next, we will be creating a text message to display the score

Now, let’s see how the function is drawing the text.

now, we need to move the ball.

we actually can’t move something directly.

so, we need an indirect approach.

first we draw something->then clear canvas then again draw something at new place i.e if we want to move it in x direction, then we will need new x.

then, we again clear canvas….and finally we show it at the place we want to show it…..HOPE you get this process.

actually this is the actual phenomena of film industry and photograph industry.

I actually did this in paint and made an rotation…. since i couldn’t do that in few nano second…you will spot it out….but the computer can do what i did in a fraction of seconds that’s why you are not going to feel that phenomena….

so, using the concept as discussed above we will design the moving ball.

so, let create a variable named rectX=0;

now, we will enter into the render() function.

so, let’s see what goes inside it.

so basically what the render function does is to render the game in the first, it clears the canvas, then draw computer and user score, then net, then user paddle and then computer paddle. and finally the ball at the center.

After that, we will go and create a function named game(), where we will call the render() function. and after that we will call the game 50 times per second as said by setInterval function.

then, we will be calling the update() function,

we have already created paddles of use and computer. likewise, we have already, also created a ball.

inside that update() function, we can see that, we have done the following things.

the above figure wants to show us that, if the ball hits the lower part of the canvas i.e the bottom, then it will get a reflection and it will head towards another part.

but as soon as it again get hit in that part, what will happen? we will discuss it below.

Then, we can see that, we compared if

ball.y+ball.radius > canvas.height i.e if the ball is in the bottom…..we will have to revere its Y component of velocity. ie


now, what if the ball touches the top of the canvas. i.e if the bally-ball.radius<0 i.e if it touches the upper part of the canvas then we will also do the same thing, that is to reverse the velocity’s Y component.

Now, we will be discussing about collision detection

firstly lets see the few lines of codes of collision visual representation.

now the same thing will hold true for the ball i.e

on the top of ball subtract b.radius and in bottom, add b.radius. likewise, in left,subtract b.radius and add b.radius in right.

then we write a “collision detection code”. for time, remember it as a formula because it will be used in many upcoming game projects also…

the below code shows why we need to change the x and y component of velocity inside update function. now, how we get that angle a. it is the problem.


then, let’s see the other lines of code.

the above code is simply a collision detection code to show that ball is not beyond y<0 and not above y>canvas.height; and if that condition becomes true, we need to reverse the velocity.

for fulfilling the collision function, we needed a player.

so, we have done as-:

let player= and choosed whether the player is the user or computer.

when the ball hits the paddle, it will change its direction by 45 degrees.

so,all we are going to do is multiply the collidepoint by pi/4.

and each time ball is hit by paddle, we should increase its speed by +0.1.

when the user hits, the ball goes to right-> velocity x is positive and opposite for computer.

so, we created a variable direction.

and multiplied the velocity by direction(positive and negative)

now inside the update function, again, we check if ball is beyond x<0, and then reset the ball.

inside resetball, we know what is there inside because i explained about that above.

so, it is how a game is created from scratch….i hope this helped somehow…..i will be adding 10 projects as said and this is project no.2. so wait for another 8 projects.

i don’t think it will be possible to post 1 project/week. so, i may upload 1 project per month instead….or like that…because you know…that it is not easy to code a project….

after that, we will see a function that helps to reset the ball position once someone gets 1 point.





Be the first to comment

Leave a Reply

Your email address will not be published.