Build a Game with JavaScript and HTML Canvas [RPG Kit series]

Let's build a simple Top-Down game system in HTML Canvas and JavaScript!

00:00:00 Intro
00:01:23 Vite setup (optional)
00:02:42 Drawing to a Canvas
00:15:50 Sprite Class
00:35:49 Game Loop
00:44:42 Keyboard Input
00:52:05 Grid Movement
01:03:16 Walls
01:07:50 Animation Tracks
01:28:28 Game Objects
01:45:39 Event System
01:54:36 Hero Camera
02:00:00 Item Pickups
02:19:41 HUD Inventory
02:30:00 Ready method for Game Objects
02:33:57 Thank You!

PART 2 continues here:

🎥 I'm working on a new JavaScript Game Development course. Get access here:

🎮 Check out my full bundle of video game development tutorials
(No Ads, Early access to new videos, Extra content not on YouTube!)

💬 Discord
Need help, have a question, or want to share your game dev project?

------------------------

📁 Sprites & Code Starting download:

📁 Code Ending Download:

---------------------------------
✉️ Join my Email List!
Get updated when new videos are ready.
You'll get a free RPG Sprite Pack in your inbox, too:

---------------------------------
More tutorial series:

Ciabatta's Revenge - Action puzzle game in React JS!

Action Multiplayer - GBC-style Zelda game, but with multiplayer!

Pizza Legends in Godot - RPG Overworld in Godot v4!
---------------------------------

Twitter / X:

Be my friend on LinkedIn:

New to using `npm`? Check out this article:

[srsherman]

Very refreshing in the midst of game engine search "fatigue" it's nice to be reminded again that we can just code a game from the ground up with the basics.

[AdjyHarby]

Having literally only a background on web dev and not much on game dev (despite wanting to be a game dev. Life ain't fair) this helps me a lot

[swayampravodasgupta]

I see Drew upload a new “how to make a game engine from scratch using web code” video, I like it by default.

[rxlzyzf]

Excellent. Very clever. I recommend when you get to the end of a section, watch back again all the things done in that section and they now make sense. Pro tip! Either that or I've got amnesia.

[avivshvitzky]

I can vividly see that you are a good programmer

[MaxMining]

Drew, used this video to inspire, many thanks

[namaefumei]

Looking forward to this!
Please please continue till the end. There are so many JS game tutorials but they only show the simplest things only.

Talk about performance, optimization and refactoring. Show more detailed stuff.

Having the same fps on different OSs or browsers are very difficult for example.

There are so many tutorials that teach how to make but it's like making a to-do app. They don't teach the other needed parts.

Mention about best practices and community standards. Tell us about tips and tricks. Teach us how to integrate inside a frontend framework because most of us use Vue or Svelte or React.

Thanks a lot. Keep up!

[manuelsanchezweb]

This series is brutal! I have been coding it already along for a couple of days already since I am on his platform and the support works pretty well! Thanks Drew for everything you do!

P.S. Would love to see how you handle responsiveness! :)

[davidchapmanarmwrestling]

Can't wait to work my way through this, thanks for your work Drew

[danyelofair]

Great content as always Drew! I'll start asap the course. For whoever like this kind of videos, I strongly recommend to buy Drew's courses, you'll see how great games can be done without Unity. I wish you to add content about quests, that kind of patterns are my nemesis...

[eugene_cha]

If you've been following the code for 15 minutes or so of this video and still can't get the csss and resource images, please try running 'npm run dev' on the terminal. I'm new to Vite just for the purpose of following this tutorial, and I'm not used to dealing with npm. So for almost an hour I've been puzzled by why my code isn't working. Hope this helped!

[benixmaximus]

This is very cool. Looking forward to getting stuck into it!

[nickpresler]

I think you should add a note the when you define mainLoop you should state that you are using an ES 6 arrow function. it avoids some stupid error you get about this.isRunning being undefined after the game loop starts. it has to do with the context of this within mainLoop.

[ErikOnarheim]

This is a great tutorial, vanilla js can be best js! I'm watching the whole thing right now!

[BettoRaite_]

As a quick tip, try to think of your own solution to a given problem, before proceeding and watching the tutorial section.

[thazmana]

big up from Brasil, tks for the video! btw what is your vscode theme? i liked

[Ardyey]

Great video! Say, I came across this framework, ImpactJS. And it has an enhanced version, Impact++ (impactplusplus). Do you think this is worth using or vanilla js will do?

[thalesGog]

Your content is always excellent! Thank you so much!

[kenigor]

Fantastic course, thank you very much!
I wonder how would be the best way to create scenes, a way to change the scenario.

[worldbest]

ya, i watched yesterday right before uploaded in youtube! damn its really practical and great. i just wondered why you didnt say anyting! thx!!!