Code Your Own Kirby Game in a Browser – TypeScript GameDev Tutorial

43,783
0
Published 2024-04-25
Improve your TypeScript skills by building a fun Kirby game clone. Learn how to use Kaboom.js to create a 2d platformer game based on the classic video game.

Code: github.com/JSLegendDev/Kirby-like-ts
Live demo & download link for assets: jslegend.itch.io/kirby-like-platformer-asset-pack
Download Tiled here : www.mapeditor.org/

✏️ Course created by @JSLegendDev

⭐️ Contents ⭐️
⌨️ (0:00:00) Intro & Setup
⌨️ (0:08:32) Loading assets
⌨️ (0:14:42) Drawing the level in Tiled
⌨️ (0:29:53) Creating the level scene
⌨️ (0:34:07) Implementing logic for displaying the level
⌨️ (0:54:29) Implementing logic for player and enemies
⌨️ (1:57:15) Conclusion
⌨️ (1:58:11) Bonus : How to export your game

🎉 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: www.freecodecamp.org/

Read hundreds of articles on programming: freecodecamp.org/news

All Comments (21)
  • @JSLegendDev
    Hope you enjoyed the tutorial! If you want to see more JavaScript/TypeScript gamedev tutorials, head over to my channel!
  • @skyguy3651
    Thank you very much! This is exactly what I wanted - improve my JS/TS skills by creating a little game!
  • @Marshall_dev
    amazing tutorial!! Kaboom is super fun! ive added a coin collection system, fixed inhale bug while colliding, and working on more levels!
  • @spellz1015
    anyone else having a problem where sprites would sometimes slide off the platform after landing?
  • @teddysalas3590
    hello,can you make a tutorial on huggingface how to make app with trained models using hugging face?
  • How did you create the art itself - clouds, kerby and enemies, etc. ?
  • @kuzco7061
    Is there a more user friendly way to export it? Like, create an exe so that I can run as windows native app? Looking for alternatives, to share the bundled game with people who are not familiar with node/npm
  • @kuzco7061
    Can I generate an exe from the dist folder? So that I can export it and run as a native windows application? Looking for a more friendly approach of sharing my game with others, specially those not familiar with node/npm.
  • @yahyagoblin5498
    hey there i was following your tutorial and then when you load the level after writing the code for displaying it I get a transparent/ checkers image could you please guide me on how to fix this edit- ok so now the background color is showing up but the level png is not edit2-ok I fixed it it was a typo
  • @ahmedhesham1288
    Hi, thanks first for this amazing tutorial. i've a problem, the player always fell at the begining of scence, it's supposed to be on land at the start, i thinks this happenig because of issue in my code, how i can know where is the problem to fix it plz?
  • @chenmzhang
    how can i get the picture "kirby-like.png"?