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/[email protected]/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