JavaScript Fighting Game Tutorial with HTML Canvas

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

did anyone else wake up to this

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 KRplus history and figured out that this video was running while I was sleeping.

Just woke up and I realize that I actually learn more stuff from this man while I was sleeping then I learned in school.

Who else woke up here

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

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

Howd i wake up here

Why did I go to sleep and everyone is waking up here😂

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

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.

I've only seen 28 minutes so far but this is one of the best tutorial I've ever seen. A blessing.

This is just AMAZING! thanks Chris! Hope to see more of your high-quality tutorial

Man this is fantastic. I love how you explain every single detail and also add context.

wooow i think you're not Frontend dev, you are Game dev! Keep going! Good luck 😀😁😁🔥🔥🔥

I spent all weekend going through this and building along.
This was so amazing. Thank for sharing this.

Awesome dude! Glad to see these game videos are blowing up for you. The JavaScript content that you've been putting out for years is gold!

I can't thank you enough for the amount of info that you've provided. I started this project a month ago and now I can gladly say that l've finished my first big project / game using JS. Thank you sooo much Chris, Respect from Egypt.

Man i wish you were around when i first started learning JS. Would have made it sooo much easier! Really amazing tutorial! Please continue with these long in-depth tutorials, you're doing really great! Thanks alot man!

I'm in the 2 hour mark, and the quality of this tutorial is amazingly high. You explain what each part of your code does. You explain the overall algorithm that you use. You use visual tools to draw onscreen (like the red rectangles) to better explain your ideas. Also, you left a link so that people can download the assets that you used in this video.
If I had money, I would pay for your courses. I don't mind watching ads in this video. I want to support you in any way that I can. You're an amazing instructor, and you clearly like teaching.

Speechless! Cannot believe that it is free! This was such an amazing tutorial, explainations were thorough and after watching this video not only did I get an amazing JS game, I also got a bunch of ideas how to add extra content and answers for implementation of those features were already explained in the video. Keep doing this amazing content man!

Thank you very much for a another great tutorial. I have learn so much from you, you cant imagine. Chris you are the best! A very VERY good teacher. Stay healthy and strong!

I really loved the process, thank you for sharing it with us.
You deserve million subscribers.

This was such an amazing tutorial! I was looking for a cool project to demo to some eager middle schoolers and found your video. I thought I would just skim it to see if it would be a viable demo and ended up following along all the way through. Thanks for sharing the knowledge!

Absolutely amazing tutorial! Its exactly my type, practical and without assuming I know anything, also no unnecessary libraries or databases I couldnt care less about, thank you!!

Just finished and deployed. That was so much fun. I hardly slept this weekend. Learned a ton. Thanks a lot.

It is amazing how you instantly answer all the questions I have as soon as I have them ! Great job ! And your website is also incredible, a new gold mine !

This is the bomb, love creating games in JS! Love 2D fighters (Street Fighters), isometric fighters (Final Fight) and racing games (Outrun) and making their counterparts in JS. What a great tool! :)

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

Holy moly. Just.. wow. Love this content, and your other videos will be amazing to go through if they're even half as good as this!
Granted, admittedly quite the time commitments, but a relatively immensely small price to pay for what's essentially free shadowing!
Seriously, thank you kindly for your work.

This has to be one of the best tutorial videos out there. You have an excellent way of concisely explaining everything you do, as you do it. Four hours extremely well spent! I'll be coming back to code along with some time soon. One feature I particularly want to see implemented is blocking and parrying, maybe even a posture meter.

So cool and so easy! I bet a lot of newby people will be so thankful for videos and channel like yours

Man, as a Brazilian, I must say that your content is the best I've ever seen!! I will definitely do this project.

Glad to see you still uploading videos. Keep going!

I’m currently studying JS, html, css etc. to switch careers but secretly my goal is to develop my own games. This video is exactly what I needed for inspiration that I’m on the right track! I understood so much of it.
Truly awesome to post this entire 4-hour tutorial touching SO many subjects from Object Oriented Programming to classes and methods and the DOM and html and css and even GitHub! Seriously broad lesson! Can’t thank you enough for doing it and I hope it gets lots of people to sign up for your other premium lessons! Create that passive income and live the dream! 👍👍😁

You just made me realize I don't love web development. I want to be a video game developer. Thank you so much for helping me come to this realization. I've been working on following this tutorial and, throughout the course of the video, I've had more fun doing this than ANYTHING I've ever done or can Imagine doing in web development.

This is an amazing tutorial, it goes step by step, which should also be how we should do it in real projects, adding stuffs when we need them.

What a fantastic tutorial! Easily one of the best ones to get you started in JS Game Development

What a surprise to see my environment asset pack in such great tutorial :)

Amazing! Can't believe you put out an entire 4h course on KRplus. Really appreciate it, learned a lot!

This is a truly epic tutorial Chris. Thanks for sharing.

Amazing work and great content 👏

Just commenting because i really appreciate you putting this out there. I realize because of this video that learning to program games is the fastest and easiest way for me to learn the programming languages. This video is my first step into your world and im grateful that you decided to hold the door open.

This was fantastic a year ago and it's nice to see it get the recognition it deserves - 3.8 million views.
Well done and thanks for your efforts, epic vid.

Hello, i really liked what you did so i made my own game following your tutorials, I didnt copy/paste any single line of code, first i watched and understood all the chapters one by one then i wrote my own implementation.
So here's what i did:
- Typescript instead of js
- Added backwards animations and sprites (attack in both directions)
- Fixed some bugs like infinite jumping, cross the edges, prevent attacking while attacking, etc...
- Added new sounds & attack animations while attacking, this last only triggers while on the air
- Added Figther stats, such name, HP, ATT, DEF, VEL, these stats affects the actual gameplay
- Changed some sprites, added white animation to second player Take Hit.png
There are many things to do after, with all of this, like character select, you can make character act different if you set different stats on them. Also i tried to apply the `hold` property of the Sprites individually but since this is coming from the parent, so the sprites list should return a list of intances of Sprites rather than a plain object so you can set the hold indivially on them, problem is, passing the position to each of them.
Saying this, hope you like it as much i did yours!
DEMO: samurai-battle.netlify.app/
CODE: github.com/snakone/samurai-battle
Cheers!!!

I wrote my first game in LUA, the physics are quite difficult to implement, especially if in your head the characters have some kind of interaction with the environment, I think this is a good example of a first game with the beautiful pixel design, for Of course, the ideas are so many that sometimes it frustrates us not being able to implement them quickly but if we like this, it's worth it, there is no better feeling that something works just the way you like it. :)

I saw first 10 minutes and instantly followed him. Man you are great. Keep doing the amazing work.

thank you for providing these comprehensive tutorials for free! insanely helpful

i fell asleep watching youtube, wake up and check that this video is completely watched in my recently watched, the scary thing is that the was coding in my dream. I’ve never coded before

Hi Chris, These tutorials are amazing 👏. Could you also make a video on making it work on mobile too. Thanks!

Love your tutorials, my portfolio is evolving thanks to you!!!

I literally didn't know any javascript before watching this but understood nearly everything you said. Good work, cheers mate.

im 100% in tutorial hell, BUT i love the way youre teaching and explaining your processes, 100% subed

This is a clear example to anyone starting programming that the issue is not how well you can code but how you can use code to solve a problem.

Thank you for this amazing tutorial. I had given up on web designing but this gave me motivation to work again.

I've only seen 1h 4min 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. A blessing.

this guy is very underrated

Why did I wake up here AGAIN

This is one of an awesome creation. Really your efforts are appreciable.

There's no doubt about it. This is really good💥
I haven't worked with HTML canvas before now, and I can still understand everything very well!!!

Hi Chris! 🥵🥵🥵 You are so easy on the eyes it makes it super simple to follow these courses 😉
Can't wait to follow this course. Going to save it for next weekend when I have some time. As always thank you for your hard work putting these together.

Wow, I really loved this tutorial. Thank you so much!
The only thing I edited was a small if statement to get rid of jumping in the air.
And I'm not very firm with github, but I had to make a commit of the code in my fighting-game folder before I could push it to github. This is most likely trivial for everyone accustomed to it, but I struggled some minutes. :D

I have to admit, I subscribed and this popped up on my timeline and I was dubious as to whether that, given the length of the video, the content would be in a nice comprehensible manner or if the end outcome would even match the thumbnail.
Having watched it all I'm so happy to say that I was wrong on both accounts. I enjoyed how you went back to refactor the code on multiple places, while demonstrating this (the professional in me was shouting: no don't put that there abstract it abstract it).
I'm a subscriber now, keep it up!

What a nice tutorial this was! Gj Chris you've won a new subscriber

You could release that as a playlist with 10-15 episodes, I think it's easier to keep pace. But I just watched the first minutes and I'm loving it!!! Thank you!!!

Just completed the full video and want to say I would happily pay for a premium course that expands on this. I've been wanting to learn about SF style AI for a while now. Would also be good to learn about things like stun lock and inputting special moves. I've got a general idea about how to do things like this but would love to see a clean way of doing it.

Keep up doing the good work bro, these tutorials are amazing

Woke up to this, stayed because you're a great teacher!

This content is great. If you decide to do another one I'd like to see a strategy game with ai like Age of Empires type.

Man, you are a machine, awesome

This is so awesome. 🤩
Thanks for your efforts!

I’m so grateful for the technology and how you can learn anything with the press of a button! Thank you for making this video 😊

Bro, next beginner tutorial on “Coding Enemy AI”? That sounds like it would be AWESOME

I was watching art restoration and woke up to this shit💀

Great work Chris downloading this video was totally worth it. You are very talented

Thank you for this amazing free tutorial and project. one of the best and clearest on youtube. I hope to see even more free content (possibly using React, node.js and various libraries)

awesome. All of your tutorial, but what about a multiplayer / socket tutorial to make all of these game online ?

IMO, it would be better, if you made a single video with basic JavaScript for those who don’t know the language, instead of repeating every tutorial what an eventListener is and how all the little things work.
Thank you very much for the videos, btw!! 😃

I bet money this channel is about to have a well-deserved subscriber explosion. Fantastic tutorial man!

I just love your way of teaching and giving this great courses. 🌟🌟🌟

Hello. Thanks for the video. What kind of todo app are you using?

This man has so many well-detailed videos for free!!
My best 3 teachers from KRplus who have made me tons better than what my college woulda made me:
1. freecodecamps
2. Chris Courses
3. Javidx9
Thank you once again!!!

im about halfway through the tutorial, at the end of the timer part and this tutorial is great! im definitely learning a ton, and when he made mistakes in the video it threw me for a loop and i always panicked untill i resumed the video and realise he fixes those mistakes after XD
this tutorial is really awesome, and im glad i found this!
p.s. 1:43:49 ouch

I was feeling incredibly demoralized until I started watching this tutorial. Thank you!

I mean that was disgustingly good. "Nice job" doesn't do it justice. Insane man. You got a sub.

I have a question! First off I want to say, thanks for the tutorial! It's really easy to follow and is exactly what I was looking for. Now as for the question, I was following along the tutorial and got to the end of task #2, however, I was able to infinitely just jump with both UpArrow and the w key. Did I miss something and how do I fix that?

Did you programmatically flip the enemy images or do you flip the images before importing them? Because I flipped the images, everything looks fine but the death sequence plays in reverse.

Thank you so much for this Chris, amazing tutorial. Better than any paid tutorial I ever tried.

Sometimes I forget why i love JS. You just made a noddle soup of a code there and works like a charm and no one should tell you is wrong ❤️

Hi Chris can you increase the font size of your codes
Thanks

Your animation data (like framesMax, and filepath, and cropping information or other relevant info) is usually pulled out into a seperate json file, then loaded in for your engine to consume, but what you're doing is obviously fine.
One thing that was irking me a bit was switchSprite @2:47:00. rather than making a giant switch which has to be maintained for every new sprite addition you add, this could mostly all be handled in an object literal lookup with a single string argument sent to this function under certain gamestate scenarios.
Example:
switchSprite(arg){
this.image = this.sprites[arg].image
this.framesMax = this.sprites[arg].framesMax
this.framesCurrent = 0
}
Doing it this way will work regardless of any new additions of sprites you add to this class and massively reduce the amount of repeated code in there.