GameDev with JavaScript and Kaboom.js – Metroidvania Game Tutorial

Learn to use JavaScript and Kaboom.js to build a Metroidvania style game. In this tutorial, you'll learn everything from setting up your development environment to implementing complex game mechanics like enemy AI and boss battles.

✏️ Course developed by @JSLegendDev

Live demo: https://jslegend.itch.io/javascript-metroidvania Source code: https://github.com/JSLegendDev/JavaScript-Metroidvania

Link to the Kaboom.js library: https://unpkg.com/kaboom@3000.1.17/dist/kaboom.mjs Assets used can be downloaded here: https://github.com/JSLegendDev/JavaScript-Metroidvania/tree/master/assets Original assets can be found here with extra paid assets: https://venoxxx.itch.io/pixxxelpunkkk-toolkit ) Modified u.png version (inc. in assets link above): https://github.com/JSLegendDev/JavaScript-Metroidvania/blob/master/assets/sprites/u.png Modified burn3r.png version (inc. in assets link above): https://github.com/JSLegendDev/JavaScript-Metroidvania/blob/master/assets/sprites/burn3r.png Sound assets: https://github.com/JSLegendDev/JavaScript-Metroidvania/tree/master/assets/sounds Map layouts (room1.json + room2.json): https://github.com/JSLegendDev/JavaScript-Metroidvania/tree/master/maps Download Tiled here: https://mapeditor.org

Guide on how to use Tiled + Kaboom.js: https://jslegenddev.substack.com/p/how-to-use-tiled-with-kaboomjs Guide on how custom events work in Kaboom.js: https://jslegenddev.substack.com/p/custom-events-in-kaboomjs Guide on how to implement one way platforms: https://jslegenddev.substack.com/p/how-to-implement-one-way-platforms

⭐️ Contents ⭐️ ⌨️ (0:00:00) Intro ⌨️ (0:06:18) Setup ⌨️ (0:14:42) Initializing Kaboom ⌨️ (0:21:59) Loading assets ⌨️ (0:33:38) Defining scenes ⌨️ (0:40:00) Understanding Game Objects in Kaboom ⌨️ (0:43:47) Implementing logic to load and display the map ⌨️ (1:16:49) Implementing logic to place colliders over the map ⌨️ (1:33:53) Implementing player logic ⌨️ (1:42:37) Implementing global state management ⌨️ (1:50:12) Continuing player logic implementation ⌨️ (2:22:56) Setting up our camera system ⌨️ (2:38:29) Implementing drone enemy ⌨️ (3:10:45) Implementing boss barrier ⌨️ (3:24:16) Implementing boss battle ⌨️ (3:57:15) Implementing health cartridges + health bar ⌨️ (4:05:43) Making sure the player respawns when falling out of bounds ⌨️ (4:10:06) Implementing logic to link room1 and room2 ⌨️ (4:28:49) Finishing touches ⌨️ (4:32:35) General guidance on how to deploy the project🎉 Thanks to our Champion and Sponsor supporters: 👾 davthecoder 👾 jedi-or-sith 👾 南宮千影 👾 Agustín Kussrow 👾 Nattira Maneerat 👾 Heather Wcislo 👾 Serhiy Kalinets 👾 Justin Hual 👾 Otis Morgan 👾 Oscar Rahnama

Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news