Uploaded September 2023 | Updated September 2026, 1 hour ago

---

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:
youtu.be/yTFIciZKG0M

⭐️ Get early access to my full JS Game Dev course:
drew-conley-courses.kit.com/66eb6d3ff4

💬 Discord
Need help, have a question, or want to share your game dev project?
Join our Discord. Here's the link: discord.gg/umD2GRy

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

📁 Sprites & Code Starting download:
drive.google.com/file/d/1BLEVGyI5AmMtgz9SG2bI0J3zYi3QjyFh/view?usp=drive_link

📁 Code Ending Download:
drive.google.com/file/d/1Lqkuc92ydqC6WIYAgq4YTU4K27w-1JIv/view?usp=sharing

Twitter / X:
twitter.com/drewconley13

Be my friend on LinkedIn:
linkedin.com/in/drew-conley-a7865a29

New to using `npm`? Check out this article:
docs.npmjs.com/downloading-and-installing-node-js-and-npm