Create a Legend of Zelda Style Game With JavaScript

Published: 29 November 2023
on channel: JSLegendDev
7,771
332

Learn to make a Zelda-like game using JavaScript and the Kaboom (Now called Kaplay) library.

Written guide on how to use Tiled with Kaboom.js (in a better way than what's shown in this tutorial) : https://jslegenddev.substack.com/p/ho...

Live demo : https://jslegenddev.github.io/Zelda-l...
Github repo : https://github.com/JSLegendDev/Zelda-...
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]/dis...

Link to the asset used in the tutorial : https://github.com/JSLegendDev/Zelda-...

Link to font used : https://github.com/JSLegendDev/Zelda-...

Link to the original asset made by Momen : https://momen-games.itch.io/happy-la-...

Final map links :
Link to world.json : https://github.com/JSLegendDev/Zelda-...
Link to house.json : https://github.com/JSLegendDev/Zelda-...
Link to dungeon.json : https://github.com/JSLegendDev/Zelda-...

-- 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


Watch video Create a Legend of Zelda Style Game With JavaScript online without registration, duration hours minute second in high quality. This video was added by user JSLegendDev 29 November 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 7,771 once and liked it 332 people.