Uploaded May 2023 | Updated September 2026, 2 hours ago
Spriter's Resource:
spriters-resource.com
Join our Discord community:
discord.gg/umD2GRy
Build games with me:
https://courses.drewconley.dev
Join our email list for early access to full courses:
us13.list-manage.com/subscribe?u=467755aba42db48795fa86c95&id=b40db07f16
Twitter:
twitter.com/drewconley13
Spriter's Resource:
spriters-resource.com
Join our Discord community:
discord.gg/umD2GRy
Build games with me:
https://courses.drewconley.dev
Join our email list for early access to full courses:
us13.list-manage.com/subscribe?u=467755aba42db48795fa86c95&id=b40db07f16
Twitter:
twitter.com/drewconley13
![Build a Game with JavaScript and HTML Canvas [RPG Kit series]](https://i.ytimg.com/vi/HmxNrlPx8iY/mqdefault.jpg "Build a Game with JavaScript and HTML Canvas [RPG Kit series]
Lets 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:
https://youtu.be/yTFIciZKG0M
⭐️ Get early access to my full JS Game Dev course:
https://drew-conley-courses.kit.com/66eb6d3ff4
💬 Discord
Need help, have a question, or want to share your game dev project?
Join our Discord. Heres the link: https://discord.gg/umD2GRy
📁 Sprites & Code Starting download:
https://drive.google.com/file/d/1BLEVGyI5AmMtgz9SG2bI0J3zYi3QjyFh/view?usp=drive_link
📁 Code Ending Download:
https://drive.google.com/file/d/1Lqkuc92ydqC6WIYAgq4YTU4K27w-1JIv/view?usp=sharing
Twitter / X:
https://twitter.com/drewconley13
Be my friend on LinkedIn:
https://www.linkedin.com/in/drew-conley-a7865a29
New to using `npm`? Check out this article:
https://docs.npmjs.com/downloading-and-installing-node-js-and-npm")
