Uploaded March 2026 | Updated September 2026, 2 weeks ago

---

Stop rebuilding the same systems every time you start a new JavaScript game!

In this series we build a reusable 2D JavaScript game development starter kit from scratch using plain vanilla JavaScript and HTML5 Canvas. The goal is a clean, modular architecture that makes your games easier to build, scale, and maintain.

Full playlist: youtube.com/playlist?list=PLYElE_rzEw_tjnJ_5gzRw0ZM5HRn7AIS0&si=j53kz7v7JoN5dg1B

⏱ Timestamps
00:00 Let's make 2D Games with JavaScript
00:50 Source Code Checkpoint
01:29 How to create a player character in JavaScript games
06:32 Source Code Checkpoint
07:08 How to handle player input in JavaScript games
12:19 Vector-based movement for smooth game controls
19:30 How to make game movement frame-rate independent
27:10 Source Code Checkpoint
27:51 How to center your character
29:04 Create a reusable image loader for canvas games
40:24 What's next?

In this video (Part 2), we start implementing core gameplay systems. You'll learn how to create a player entity, handle keyboard input in a clean way, load image assets, and render sprites to the screen.

Instead of building messy one-off projects, we focus on a data-driven structure with independent systems that can grow with your game as new features are added. If you’ve ever found yourself rewriting the same animation loop, input handling, or asset loading code for every project, this starter kit solves that problem.

Resources:
Player image: frankslaboratory.co.uk/downloads/147/player.png
Source code: code-laboratory.kit.com/800d905643

In this video we cover:
• Creating a Player entity
• Rendering the player as a simple shape
• Implementing a clean keyboard input system
• Creating an Image Manager to load game assets
• Rendering the player as a sprite

Next episode:
We will take a deeper look at UI systems, including menus and pause screens.

Whether you're just getting into JavaScript game development or you've been doing it for a while and want to stop rebuilding from zero, this one's for you.
🎓 Check out the EXTENDED course (free version here): udemy.com/course/build-a-reusable-2d-game-engine-in-javascript/?referralCode=9B9D825D377E049E7BD1

This tutorial covers JavaScript game development from an architecture-first perspective. Building reusable game systems in vanilla JavaScript using the HTML5 Canvas API, with no external libraries or frameworks. If you've been searching for a clean, scalable approach to 2D game development in JavaScript, or want to understand how to structure a mini JavaScript game engine from scratch, this video walks you through the exact systems and patterns used in production-ready projects. Great for developers who already know JavaScript and want to take their game projects to the next level.

#frankslaboratory #JavaScriptGameDevelopment #VanillaJavaScript #HTML5Canvas