Premium Only Content

JavaScript Zelda-like Game Tutorial
Become a member to get early access to upcoming tutorials : https://buymeacoffee.com/jslegend
For written tutorials go to my substack : https://jslegenddev.substack.com/
Live demo : https://jslegenddev.github.io/Zelda-like-Kaboomjs
Github repo : https://github.com/JSLegendDev/Zelda-like-Kaboomjs
Link to download Tiled : https://www.mapeditor.org/
Link to download kaboom.mjs (Kaboom version used in this tutorial is 3000.1.8) : https://unpkg.com/kaboom@3000.1.8/dist/kaboom.mjs
Link to the asset used in the tutorial : https://github.com/JSLegendDev/Zelda-like-Kaboomjs/blob/master/assets/topdownasset.png
Link to font used : https://github.com/JSLegendDev/Zelda-like-Kaboomjs/blob/master/assets/gb.ttf
Link to the original asset made by Momen : https://momen-games.itch.io/happy-la-v2-ts
Final map links :
- Link to world.json : https://github.com/JSLegendDev/Zelda-like-Kaboomjs/blob/master/assets/maps/world.json
- Link to house.json : https://github.com/JSLegendDev/Zelda-like-Kaboomjs/blob/master/assets/maps/house.json
- Link to dungeon.json : https://github.com/JSLegendDev/Zelda-like-Kaboomjs/blob/master/assets/maps/dungeon.json
-- Chapters --
0:00 Intro
5:55 Setup
22:56 Initializing The Canvas
36:59 Creating Scenes
50:58 How to Use Tiled
1:02:57 Displaying Tiled maps in Kaboom
1:45:57 Zooming the camera further
1:47:47 Writing logic to display player on map
2:07:01 Fixing camera and centering it on the player
2:09:49 Writing logic to display slimes on map
2:17:09 Writing logic to set boundaries on our map
2:30:59 Swapping our toy map for the real map
2:33:22 Implementing player movement + animation
3:01:55 Make the camera follow the player
3:14:55 Preventing player from moving in diagonals
3:21:27 Making the Slime AI
3:59:25 Conclusion Part 2
4:01:56 Part 3 Intro
4:03:42 Implement logic to transition from world to house scenes
4:09:41 Drawing the house scene
4:20:38 Implementing camera logic for house scene
4:21:11 Implementing logic to allow the player to move within the house scene and exit
4:24:54 Creating and adding the old man to the house scene
4:31:14 Making the old man face the player regardless of how the player is approaching
4:42:23 Implementing dialogue system
5:01:48 Implementing logic for display lines character by character
5:18:03 Fixing player movement issue
5:43:41 Resuming work on dialogue system
5:53:34 Freezing the player during dialogue
6:05:39 Implementing logic to display different dialogues depending on player interaction
6:27:11 Conclusion Part 3
6:28:00 Intro Part 4
6:29:11 Implementing player sword attack
6:51:42 Implementing damage dealing logic + blinking effect
7:13:28 Building the healthbar UI and hooking it up with player state
7:28:11 Implementing dungeon scene
7:49:11 Implementing dungeon camera
7:55:52 Implementing dialogue logic in dungeon scene
8:07:00 Implementing ghost boss
8:40:54 Implementing main menu + language switching
8:49:45 Conclusion
-
6:27
DropItLikeItsScott
13 hours agoIs This the Coolest Gun Accessory Ever? The Gun Guardian
36 -
19:05
Michael Feyrer Jr
21 hours agoCan you even fit this much FAIL in one video? $10K Challenge Week 1
8 -
19:53
Professor Nez
15 hours agoYou WON’T BELIEVE What I Found on Charlie Kirk’s Shooter!
89112 -
1:35:53
The China Show
16 hours agoBrutal Mayhem in China as Dark Coverups are Exposed - #280
74 -
12:30:34
Times Now World
22 hours agoLIVE | Russia-Belarus Zapad-2025 LIVE | Missiles Target NATO in Arctic & Baltic
3.55K1 -
32:14
daniellesmithab
17 hours agoNew Feature for Driver’s Licence and ID Cards
22.6K5 -
2:54:40
FreshandFit
14 hours agoChat Makes Pothead RAGE QUIT!!!
480K72 -
1:32:34
Badlands Media
16 hours agoBaseless Conspiracies Ep. 150: 9/11 Mysteries, Remote Pilots, and Hidden Agendas
95.2K35 -
5:32:35
Akademiks
8 hours agoWHERE IS WHAM????? Thug we Forgive u dawg.. Ralo vs Boosie. Charlie Kirk fallout. Cardi B album?
78.1K7 -
2:05:53
Inverted World Live
9 hours agoDeath Cult Terror Cells, NASA Bans Chinese Nationals | Ep. 108
72.2K14