JavaScript 2D Game Tutorial

4-directional keyboard controlled characters, animated 2D game worlds with randomised environmental elements, controlling FPS and draw order in a 2D game and wrapping all of that in object oriented code structure. In this series we discover mythical creatures of magical forest and I'm giving away a ton of high resolution game art assets, as usual. What do you think about this vector art style?

HTML canvas was developed as a replacement of Flash, it's a perfect environment to make games and animation projects. Today we will learn how to use HTML5, CSS3 and plain vanilla JavaScript to make the most of it's powerful capabilities. No frameworks and no libraries as usual. Have fun!

🎨 Download Project Art assets 🎨
** All art assets for this class were made by me or by artists I hired, there is NO copyright, you can download and use these freely for any project you want! Click LIKE on the video if you want more free game art soon!
PNG exports are uncompressed, you can use a site like Tiny png to reduce the file size if needed.
If anything is missing or you want source files in a different format let me know in the comments.
Feel free to modify the shapes, colour shift to get different variations etc. Have fun!

Individual base art assets:

☕ For more vanilla JavaScript GAME DEVELOPMENT check out this playlist:

⭐️Tutorial Contents ⭐️
00:00 Intro
00:43 Lesson 1: Project setup
02:19 Lesson 2: Enhancing game worlds with CSS
09:17 Lesson 3: JavaScript and HTML canvas setup
15:06 Lesson 4: Keyboard controls
22:34 Lesson 5: Player character
33:55 Lesson 6: Animating 4 directional sprite sheets
45:54 Lesson 7: How to control FPS
54:56 Lesson 8: Randomly positioned game objects
01:03:15 Lesson 9: Layering and draw order in 2D games

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

[yellemonster]

Your channel is unlike any other. Thank you for the work you do.

[nickazak]

The quality of this video is insane. I remember finding your channel last year and following along the html5/js game tutorial. Super cool stuff from you dude, subbed this time. :D

[imranmohsin]

Amazing stuff . Thanks for sharing these projects they are amazing

[kurtthorsten]

hello frank! I did a couple tutorials with your channel over the past few weeks regarding html canvas and I want to say a big thank you to you as it really got me going to keep working on web dev related stuff. your tutorials are great, both in learning style and in what they create and it makes me feel proud to look at my folder with all the cool smaller projects created and inspired by you.

I can highly recommend every canvas tutorial frank released, they are such a strong base to get the fundamentals going and his style is so concise which gives you all the tools needed to further modify the projects and give them your own touch. thank you again, you are doing big things here, frank!

[NadidLinchestein]

Keep making these videos, they're extremely helpful.

[allankachenje]

I have to say without your channel i would have been nothing in game development but thanks to you i have started to understand development concepts of games.Thanks you

[braveitor]

Fantastic, very informative and interesting. I wouldn't call a class "Object" as it is a name frequently reserved for some languages but just an oppinion

[Radu]

Nice one! 46:41, interesting idea. I remember watching some documentary about Spider-Man: Into the Spider-Verse where they had different fps for different characters in the movie. I think Miles was animated at 12 fps (at least in the beginning) and all others at 24 fps.

[iulianbogdanghitun]

This quality for free. Amazing.
May the algorithm be with you!

[diamondkingx]

I think this will be a great time to make a video on optimizing the canvas!

[CodingAdventures]

As always your tutorials are so eye candy! Congrats!

[woozhanwei]

Thanks for the tutorial. Very nice that you also includes those classes and inheritance. I also watched your other video which includes design pattern which makes me learn not only in how to create 2d game, also helped me to learn the design pattern. Thanks

[puspakkumar]

Best channel for game development. Learnt a lot. Awesome content.

[mattunlu]

You are great javascript game developer. I was looking for like this tutorial for my son! Thanks lot

[AndyRocket]

I was waithing for this one. I really like how you replaced key[] with just a lastKey variable. So simple I like that much better! Thanx

[agustinlavalla]

This is insane! Thanks so much for the content!

[AnimeThings_]

Damn.... Again it's just killin!🔥🔥

[girubakaran]

I like this tutorial very much . waiting for part 2

[otakusong]

Wow! it's Amazing I did it well ! Perfect work !

[SouLaVee]

Thanks for the learning opportunities.