Pong in JavaScript (using ES6)

In this episode I write a Pong game in JavaScript from scratch.

Some key technologies we will look at are
* Object Oriented Programming
* ES6 class with getter and setter
* Canvas
* requestAnimationFrame()
* Handling user input

Since we are writing ES6 this code might not run on all browsers yet. I was running Chrome 52 when I wrote this and if you wish to follow I recommend you do too.

The initial HTML file can be found here:

Try it:

Source code:

Music:
Demoscene Time Machine

[sebabernardotti]

finally someone that writes elegant javascript code

[ellimacssfx]

This will take off I'm sure. Great job!

[mrclaytron]

GREAT!!! It seems so crazy that the most complex part of the code was generating and rendering the score digits! Great video!

[ConquerJS]

This channel is amazing! Please continue!!

[chetanjiva]

You make it look so simple and I didn't fall asleep :) Thank you so much for creating these videos.

[SchettiniAndre]

I can't explain how much I enjoy watching this dude coding. Elegant and didactic. Sir, thank you!🙋‍♂️

[manualvarado]

I had i hard time understanding where on earth were the time-related values coming from.

The thing is that requestAnimationFrame handles the ellapsed time for us, but if we pass that one parameter "milliseconds", then we can do nice things with that time, but we do not control it. Notice how we do not pass any parameter to the callback when we pass the callback as parameter for requestAnimationFrame.

Crazy stuff.

Awesome tutorial, by the way! Funny because a few months ago i did not understand pretty much anything of what you did here, so, stay motivated you all! Effort does pay off : D

[jeenaparadies]

I didn't think I'd watch the whole thing but especially going all the way and doing the score numbers right and not with a font made me stay, thanks!

[thomasgravdal]

love it dude! like the pace. You could explain some key things a bit more, and why you do certain things for us newbies :)
Keep it up! I subbed

[johnjohnson]

amazing tutorial. im so pumped to apply collision and vocity to my projects!

[marswor]

had to log in to subscribe after the 'ok.. that's all for today!' :) love it!

[NicholasEli]

This video is great, I used it to brush up on vanilla prototypes everywhere you used class syntax.

[stoic]

This is cool and fun! :D
I queued your other videos to watch later. Thanks! :)
PS: In your future contents, please create a introductions for the process or algorithm of the project. It doesn't need to be a deep explanation of every details but something "what to expect" in the video.

[JordanICM]

Great job, helped a noob like me out a lot.

Edit: deleted my old critique since I misundersyood a part of your code. Great job all the way through!

[yusupjanadil]

thany you for your video 7 years later

[arbenunlu]

I really like your videos! Your probably the best! I love the education that you teach us. Good Luck! Love You!!!

[Pylcu]

Damn, your videos are great. Please, make new content, feed your motivation as many people really appreciate it! Good work, mate!

[tachyonwireless]

Im loving the videos by the way ! Got directed here from MPJs twitter.

[jamieheiney]

Thanks for including your bugs in the video...helps me learn!

[johanneseriksson]

Really great content man, glad you showed up in my recommended videos.