JavaScript Game Tutorial with HTML Canvas

Make your own 2D adventures with HTML, CSS & plain vanilla JavaScript, no frameworks and no libraries! Anything can be built with code and every time you code along with a project like this, you get one step closer to mastering front-end web development and when you get there the only limit is your imagination. Let me show you how I approach building this fast paced side scroller game and let's help our super dog character to find it's way out of the dark forest. I will build everything from scratch and explain every line of code as we go along. Have fun ! :D

❤ Related Links ❤
Download project sprite sheets:
Backgrounds:

⭐️Tutorial Contents ⭐️
00:00 Course overview & final project previews
00:53 How to set up a local server
02:10 HTML & CSS setup
03:54 How to set up HTML5 canvas with JavaScript
05:28 Game and Player class
08:49 How to export and import native JavaScript modules
11:09 Animation loop
12:47 Sprite sheets and drawImage canvas method
14:39 Animating movement on HTML canvas
15:38 Capture multiple key presses
20:28 Make player react to inputs
23:05 Simple way to handle jumping in a 2D game

Let's be friends

The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I'll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!
#frankslaboratory

[mrmike]

Finally found a mentor to take me from novice to intermediate JS dev! Excellent presentation and speed by the way. Keep the great content coming. I have a feeling your channel is really going to take off.

[Marty]

Amazing how many coding concepts you can fit into 28 minutes. This tutorial is super helpful, and interesting project.

[Radu]

Really nice how you explain some things. Like the 'vy' at the very end is probably the best explanation I've seen of that process. Thanks!

[samehzaky]

I loved the flying text for description, the arrows to point to exact location in the code, it is very helpful.

[vukolovanton]

This is extremely underrated content. Excellent explanation from person who really knows what he's doing. Great job.

[kerrydaniels]

This was so much fun to make! :)
The best part was "actually" learning the logic behind it all as even as you went over I used my own customizations along the way since you explained things well enough that I understood the logic behind it all enough to manipulate on the fly. My favorite part was how you explained to animate smooth frames for falling. I found it really clever and such a brilliant way to get it going. Thanks as always. You're the best!

[enijar]

You are the GOAT of 2D canvas tutorials on YouTube! Loved this video!

[MuhsinOKCU-uksf]

fantastic. true javascript and canvas tutorials. very presise explanation.

[andrzejhryniewicz]

wow, i just start my course 4 months ago, dont know much yet, but i can see now i will be on Your channel very often :D

[JM-degh]

Great vid, Frank! I didn't mean to disappear for so long. My training is going well (and still going, lol). The project I'm working on is very broad and takes half a year to a year to have productive understanding... so I was afraid to come back to Javascript. But watching this vid made me mess with it a bit and I'm thinking the fear is fading. I think I'll put a hold on the video-callable idea I had (I guess it was obviously on 'hold') as I work through the details of my day job. Anyway, this hopefully won't stop a tribute here and there! Thanks for the vid.

[diegogutierrez]

Hola, este es el canal de Youtube que estaba buscando!; Gracias por vuestro contenido, saludos desde Colombia

[sandrakaauwai]

Thank you! I appreciate the simplicity of your explanations. :)

[danigolmestre]

As always, very well explained, congratulations and thank you for sharing Frank!

[namaefumei]

This is just gold.
Can please make a multiplayer game too?

I don't know how to edit the code for multiplayer.

[junaidzx]

I love you and your content, thanks for sharing with us

[shreeduttdixit]

Hii Frank, Idk if you still remember me or not but it's been very long and in Covid your Skills are developed exponentially. I am following you from 2 years approx Ig. I am very happy to see you growing. Best wishes for your future endeavours

[kabirjyotibakshi]

Really like your videos Frank 🤗. And I have a request. Can you please teach physics implementation on js canvas? Like soft bodies.

[emreparlak]

Great Explanations. I believe ive learnt a lot of design principles from this video. Thanks

[bagusdewantoro]

Really great content, explanation and and it is fun! Also the speed is excellent! Thank you

[omniazone]

Amazing channel and content! I'm very happy I found your channel. Thank you :) Keep it up