JavaScript Fighting Game Tutorial with HTML Canvas
5,397,611
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
-
Just woke up and I realize that I actually learn more stuff from this man while I was sleeping then I learned in school.
-
did anyone else wake up to this
-
I was scrolling through my YouTube history and figured out that this video was running while I was sleeping.
-
Who else woke up here
-
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
-
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
-
Bro, I went to sleep, I woke up and this was here Update: IT HAPPENED AGAIN WTH
-
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.
-
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 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.
-
Been studying CS for about a year, I could never write this on my own yet but I’m following 95% of what your doing. Thanks for this, big help and confidence booster.
-
Why did I fall asleep watching who remembers and wake up to this playing. Seems a BUNCH of people are in the same boat so whats going on Youtube lol
-
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.
-
Jus starting a javascript course and I don't fully comprehend functions and this guy just goes and casually creates a fighting game to post free on youtube. What a legend
-
Bro I accidentaly fell asleep while watching a completely different thing and I woke up here 😂
