TypeScript Fighting Game Tutorial

4 months ago
2

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://jslegend.itch.io/fighting-game-in-typescript

Github Repo (Source code) : https://github.com/JSLegendDev/Fighting-Game-TypeScript

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

Inspired by Chris courses tutorial : https://www.youtube.com/watch?v=vyqbNFMDRGQ

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

Link for samurai assets : https://github.com/JSLegendDev/Fighting-Game-TypeScript/blob/master/public/assets/entities/samurai.png (Original assets comes from https://luizmelo.itch.io/martial-hero)

Link for ninja assets : https://github.com/JSLegendDev/Fighting-Game-TypeScript/blob/master/public/assets/entities/ninja.png (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

Loading comments...