JavaScript Fighting Game Tutorial with HTML Canvas
4,650,177
Published 2022-03-27
Here you'll learn how to create your very first fighting game with JavaScript and HTML canvas. We'll start by coding some basic fighting game mechanics, then we'll take things to the next level by adding in professional sprite sheets and graphics.
Google Drive Assets: drive.google.com/drive/folders/1569Y7WYX-aQf6LKstJ…
Finished Demo: chriscourses-fighting-game.netlify.app/
Source Code: github.com/chriscourses/fighting-game
Oak Woods Assets: brullov.itch.io/oak-woods
Fighter Asset #1: luizmelo.itch.io/martial-hero
Fighter Asset #2: luizmelo.itch.io/martial-hero-2
0:00 Introduction
0:43 Project Setup
8:07 Create Player and Enemy
28:00 Move Characters with Event Listeners
50:12 Attacks
1:11:31 Health Bar Interface
1:34:27 Game Timers and Game Over
1:51:27 Background Sprite
2:05:10 Shop Sprite with Animation
2:23:08 Player Sprite - Idle
2:36:24 Player Sprite - Run
2:43:39 Player Sprite - Jump
2:58:03 Player Sprite - Attack
3:01:53 Enemy Sprite - Kenji
3:07:04 React to Sprite Attacks
3:20:32 Receive Hit Animation
3:29:11 Death Animation
3:35:32 Interface Design and Animation
3:49:55 Push Live
3:55:57 End
All Comments (21)
-
-1 minute: Oh, great! I can maybe learn 1 or 2 in JavaScript. -10 minutes: This is awesome, I'm learning so many new things in JavaScript with ease. Hit Liked and Subscribed. -30 minutes: Damn, I have a future in Game Development. -50 minutes: Shttt, I'm overloaded with Information and Ideas now of what Game I'll be doing. -60 minutes: Hands down! This Tutorial is the best I have seen. After 1 Hour of appreciation, realized to check how many views did this tutorial accumulated now. Sad to say that it only has more than 100k Views. 😢. Everyone! Let's help the man spread this JavaScript tutorial to show our appreciation for uploading a very informative video for FREE.
-
The fact that me and many other people just woke up to this playing makes me wonder if most of the views this video gets is from people not even trying to watch the video
-
Bro, I went to sleep, I woke up and this was here Update: IT HAPPENED AGAIN WTH
-
Why and how is everyone (including me) waking up to this video. I was watching a slow mo guys video last night and this is playing in the morning. Might as well stick around. This seems kinda fun
-
I was scrolling through my YouTube history and figured out that this video was running while I was sleeping.
-
Who else woke up here
-
Just woke up and I realize that I actually learn more stuff from this man while I was sleeping then I learned in school.
-
I used to wake up to a video of a guy in a field raining asmr, but now I’ve awoken to this. Perhaps a new era in my life has started.
-
Absolutely amazing tutorial i literally watched 1h while asleep😂 and i learned so much. Btw why do everybody else wake up to this video
-
Dude what. How is everyone waking up to this, i fell asleep watching zelda gameplay. How did i make it 40 mins into this video
-
Howd i wake up here
-
I was watching art restoration and woke up to this shit💀
-
I woke up to watching this video and am now following the tutorial for fun. I don't know how I ended up here but I am glad. Thank you for making this video
-
This man is giving these tutorials for free! What a beast.
-
This is like the 6th time your videos came up while I was asleep....the algorithm clearly likes you😂
-
I’ve never watched any coding videos or any videos like this ever I fell asleep with YouTube on and woke up halfway through at 3 am 😂
-
I've only seen 46 minutes so far but this is one of the best tutorial i've ever seen. I think the most complicated part of coding is finding the best way to summarize the logic into objects and decide what has to be structed and what not.
-
This tutorial is amazing I learned so much about inheritance and constructors made sense for the first time ever and now class components, hooks and props now make more sense I used to get so confused about "passing props" so much was shown here, switch, cases, conditionals, classes understanding the scope of this. Amazing so much learning without realizing it
-
Why did I wake up here AGAIN
-
This is just AMAZING! thanks Chris! Hope to see more of your high-quality tutorial
