Uploaded July 2020 | Updated September 2026, 2 hours ago
Here's a method for creating a camera illusion for top down web games. We cover arrow movement and camera following. I used this technique in Danger Crew, and RPG built in HTML, CSS, and JavaScript.
Here's the code:
codepen.io/punkydrewster713/pen/34324ac27a6a37730a981bad0ee4c94c
⭐️ Get early access to my full JS Game Dev course:
drew-conley-courses.kit.com/66eb6d3ff4
💬 Join our Discord community of people making video games:
discord.gg/umD2GRy
Here's a method for creating a camera illusion for top down web games. We cover arrow movement and camera following. I used this technique in Danger Crew, and RPG built in HTML, CSS, and JavaScript.
Here's the code:
codepen.io/punkydrewster713/pen/34324ac27a6a37730a981bad0ee4c94c
⭐️ Get early access to my full JS Game Dev course:
drew-conley-courses.kit.com/66eb6d3ff4
💬 Join our Discord community of people making video games:
discord.gg/umD2GRy
![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")
