Uploaded April 2023 | Updated September 2026, 2 hours ago
Let's take a previous camera demo and smooth out the movement. We'll cover easing functions, lookahead, and camera pinning. Hope these techniques help you when building your games!
00:00:00 Intro
00:00:43 Easing
00:04:39 Lookahead
00:06:00 Pin to position
⭐️ Get early access to my full JS Game Dev course:
drew-conley-courses.kit.com/66eb6d3ff4
💬 Working on a game? Join our Discord community of fellow game developers:
discord.gg/umD2GRy
--------------
Starting code:
codepen.io/punkydrewster713/pen/poxwpvb/314385653544779e337ca7729d3a8710
Finished code:
codepen.io/punkydrewster713/pen/bGmRaGG/341cfd1fadc72aed15a68e18c5e583be
--------------
Twitter:
twitter.com/drewconley13
Here is the original video:
youtube.com/watch?v=H3Fn33lYuE0
Let's take a previous camera demo and smooth out the movement. We'll cover easing functions, lookahead, and camera pinning. Hope these techniques help you when building your games!
00:00:00 Intro
00:00:43 Easing
00:04:39 Lookahead
00:06:00 Pin to position
⭐️ Get early access to my full JS Game Dev course:
drew-conley-courses.kit.com/66eb6d3ff4
💬 Working on a game? Join our Discord community of fellow game developers:
discord.gg/umD2GRy
--------------
Starting code:
codepen.io/punkydrewster713/pen/poxwpvb/314385653544779e337ca7729d3a8710
Finished code:
codepen.io/punkydrewster713/pen/bGmRaGG/341cfd1fadc72aed15a68e18c5e583be
--------------
Twitter:
twitter.com/drewconley13
Here is the original video:
youtube.com/watch?v=H3Fn33lYuE0
![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")
