Learn TypeScript by Making a Fighting Game - TypeScript for Beginners

Published: 22 November 2023
on channel: JSLegendDev
2,329
96

Learn to make a fighting game using TypeScript and the Kaboom (Now called Kaplay) library.

For written tutorials, go to my substack : https://jslegenddev.substack.com/

Live Demo : https://jslegend.itch.io/fighting-gam...

Github Repo (Source code) : https://github.com/JSLegendDev/Fighti...

Download Tiled here : https://www.mapeditor.org/
Download VSCode here : https://code.visualstudio.com/


Inspired by Chris courses tutorial :    • JavaScript Fighting Game Tutorial wit...  

Link for tileset and decorations assets : https://brullov.itch.io/oak-woods

Link for samurai assets : https://github.com/JSLegendDev/Fighti... (Original assets comes from https://luizmelo.itch.io/martial-hero)

Link for ninja assets : https://github.com/JSLegendDev/Fighti... (Original assets comes from https://luizmelo.itch.io/martial-hero-2)


-- Chapters --
0:00 Intro
5:12 Setup
19:06 Initializing the canvas + Creating the arena scene
31:02 Loading background art sprites and adding them to the scene
40:24 Drawing the map in Tiled
55:13 Implementing logic to draw map in game
1:54:51 Creating custom types
2:08:28 Explaining TypeScript Unions VS Intersections
2:11:21 Continuing Implementing logic to draw map in game
2:29:05 Implementing logic to set boundaries on the map
2:42:12 Create the Samurai and Ninja game objects
3:09:41 Writing shared logic for both the Samurai and Ninja in fighter.ts
3:13:30 Implementing Fighter controls + damage logic
3:53:29 Implementing logic to handle animations
4:00:26 Implementing logic that handles what happens when players are hit
4:05:13 Implementing logic to display winner vs loser after the fight is over
4:13:45 Implementing blinking effect when players are hit
4:22:17 Implementing health bars
4:36:54 How to export the game to be published on itch.io


Watch video Learn TypeScript by Making a Fighting Game - TypeScript for Beginners online without registration, duration hours minute second in high quality. This video was added by user JSLegendDev 22 November 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 2,329 once and liked it 96 people.