Build real video games as a Front End web developer
Early Access!
Welcome to JavaScript Game Development, the home of everything I know about making compelling games with JavaScript. This course is still in active development with many more videos on the way.
What's included?
✅ Beginner Friendly Basics
The course starts with a module on the basics of JavaScript and build systems. We'll cover everything you need to know to make it through the Labs.
✅ Game Development Fundamentals
We'll discuss the common elements of all game engines and cover examples of each with JavaScript.
✅ 6+ Full Coding Labs
We build a full game or app from scratch in each Lab. The Labs alone are over 120 videos! Each lab includes a code download of the final projects. More Labs will be added to this course in the future! Please see the full list of videos below.
Canvas RPG Kit - Make a game engine with HTML5 Canvas
(14 videos)
In this lab, we'll build a lightweight top-down game engine using only JavaScript and HTML Canvas. We'll use the systems to create common RPG features. You can build on top of this to make the game your own.
Ciabatta's Revenge - A full React.js puzzle game
(48 videos)
In this series, we build an action-puzzle game with React. It's grid-based, action packed, and all about bread! We'll include many puzzle game features and the ability to edit levels in real time.
Next.js Level Editor - Build a modern Next.js app to manage your game content
(19 videos)
Let's build a flexible, web-based level editor in Next.js! We'll make a tile editor and simple Object manager with some of the latest Next.js features. You can extend these capabilities to make a dedicated editor for your own project.
Action Multiplayer - Build a realtime multiplayer adventure with Excalibur and Node.js
(14 videos)
In this lab, we're going to build a GBC style Zelda-like multiplayer game. We'll cover Zelda-ish character animations, movement, attacks, and enemies. We'll then create peer-to-peer connections with other players to bring the game online.
Front End Interview - These exercises will have you ready to nail the Front End job interview
(7 videos)
Have a coding interview coming up? Let's go through a bunch of challenges you may encounter when interviewing for a Front End developer job. These exercises will have you in great shape for whatever coding prompt comes your way.
Danger Crew Code Tour - Walk through the code repository of a game on Steam
(6 videos)
Let's dig open the code of Danger Crew and talk through how each feature was implemented. Danger Crew is a game built with React and released on Steam.
Full List of Videos
- Canvas RPG Kit - Start Here (0:43)
- 01. The Game Canvas (13:24)
- 02. Sprite Class (20:01)
- 03. Game Loop (8:56)
- 04. Keyboard Input (7:25)
- 05. Grid Movement (11:14)
- 06. Walls (4:36)
- 07. Animations (20:40)
- 08. Game Objects (17:15)
- 09. Events (9:00)
- 10. Camera (6:11)
- 11. Item Pickups (19:00)
- 12. Inventory HUD (10:21)
- 13. The Ready Method (4:00)
- 14. The Exit Object (5:25)
- 15. Changing Levels (19:34)
- 16. Starting Position (8:03)
- 17. NPCs (10:54)
- 18. Font Text Boxes (10:28)
- 19. Sprite Text Boxes (17:58)
- 20. Typewriter (9:01)
- 21. Input Actions (12:16)
- 22. NPC Text Portraits (11:27)
- 23. Story Flags (14:47)
- Ciabatta's Revenge - Start Here (0:54)
- Introduction to Ciabatta's Revenge
- 01. Setting up the Repository (4:02)
- 01b. Setup with Next.js (5:09)
- 02. The Sprite Component (18:01)
- 03. Scaling a Game Viewport (9:58)
- 04. Rendering Sprites (6:15)
- 05. Level Backgrounds (17:17)
- 06. Refactoring with Recoil (8:43)
- 07. The Level Class (10:41)
- 08. Game Object Classes (11:31)
- 09. Game Loop (6:24)
- 10. Rendering Objects (3:15)
- 11. Object Movement (10:36)
- 12. Direction Controls (8:32)
- 13. Animating the Hero (12:10)
- 14. Room Limit Collisions (3:56)
- 15. Solid Wall Placements (12:38)
- 16. Object Layering (3:33)
- 17. Floating Flour Pickups (9:34)
- 18. Flour Count Remaining (6:18)
- 19. Particle Celebration Effect (10:26)
- 20. Goal Tile (7:20)
- 21. Changing Levels (8:55)
- 22. Keys, Locks, and Inventory (7:42)
- 23. Unlockable Doors (9:19)
- 24. Water and Death (8:27)
- 25. Water Pickups and Swimming (7:36)
- 26. Enemy Bodies (12:38)
- 27. Enemy Behaviors (7:37)
- 28. Roaming Enemy (5:16)
- 29. Conveyor Belts (10:28)
- 30. Ice Movement (10:10)
- 31. Ice Pickup (6:32)
- 32. Fire (3:16)
- 33. Animated Tiles (7:35)
- 34. Switchable Doors (7:45)
- 35. Teleports (7:12)
- 36. Thief (6:07)
- 37. Camera (10:18)
- 38. Clock (6:40)
- 39. HUD Styles (9:32)
- 40. Styled Popups (13:27)
- 41. Inventory HUD (4:08)
- 42. Sound Effects (7:23)
- 43. Ciabatta Boss Battle Movement (19:28)
- 44. Ciabatta Boss Battle Damage (7:03)
- 45. Bonus- Planning in Figma 1 (7:20)
- 46. Bonus- Planning in Figma 2 (4:59)
- 47. Editing Levels (16:14)
- Next JS Editor - Start Here (1:14)
- 01. Repo Setup (1:46)
- 02. Basic Routing (7:53)
- 03. App Layout (15:30)
- 04. Loading Tilesets (13:52)
- 05. Tileset Sidebar (13:17)
- 06. Selecting Tiles (21:15)
- 07. Painting Tiles I (26:34)
- 08. Painting Tiles II (11:44)
- 09. Layered Tiles (6:41)
- 10. Visible Layer UI (24:00)
- 11. Loading Map JSON (12:41)
- 12. Saving Map JSON (21:18)
- 13. Exporting Map Images (15:32)
- 14. Solid Wall Tiles (8:10)
- 15. Listing All Maps (6:53)
- 16. Object Placements (18:58)
- 17. Object Inspector (16:31)
- 18. Adding Objects (6:27)
- 19. Object Output (8:35)
- Action Multiplayer - Start Here (0:33)
- 01. Project Basics (12:31)
- 02. Character Animations (10:46)
- 03. Camera (4:25)
- 04. Sword Action (18:01)
- 05. Arrow Action (5:17)
- 06. Changing Skins (2:41)
- 07. Taking Damage (5:07)
- 08. Network Strings (4:31)
- 09. Connections with Peer JS (12:35)
- 10. Other Network Players (9:32)
- 11. Monsters (9:51)
- 12. Monster Damage (5:49)
- 13. Network Monsters (7:23)
- 14. Hosting (2:47)
Got Questions?
Any questions or requests regarding the content of JavaScript Game Development?
Let's chat! Send an email to [email protected]