JavaScript Fighting Game Tutorial with HTML Canvas

3,179,383
0
Published 2022-03-27
Want to next level this? I'm in the process of creating an enhanced fighting game course, get e-mail updates here: forms.gle/rjJCjjhWytn1btES7

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.
  • @timnonik2736
    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.
  • @David-hl1wo
    This man is giving these tutorials for free! What a beast.
  • @jpm7049
    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.
  • @eduardorpg64
    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.
  • @micemincer
    I've only seen 28 minutes so far but this is one of the best tutorial I've ever seen. A blessing.
  • @javohirhak
    wooow i think you're not Frontend dev, you are Game dev! Keep going! Good luck 😀😁😁🔥🔥🔥
  • @pikiniello
    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
  • 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
  • @juliocodes
    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!
  • The design of this video is top-notch. The visuals are stunning and the layout is easy to follow.
  • @Audio-Tales
    Not only is this for free , he’s literally explaining each line of code in a way anyone can understand. you’ve gained a subscriber, thank you so much 🇿🇼
  • @itzsaucy5715
    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.
  • @smarkbark
    I spent all weekend going through this and building along.
    This was so amazing. Thank for sharing this.
  • I don't have a computer but I just found this channel. This is what I've been looking for most my life.
  • 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
  • @kelsierii4747
    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!!
  • @infomatters.
    I really loved the process, thank you for sharing it with us.
    You deserve million subscribers.
  • @Gizzzmo
    Man, as a Brazilian, I must say that your content is the best I've ever seen!! I will definitely do this project.
  • @_Curiositas_
    The best explanation of coding i've ever seen in my entire life, he doesn't just randomly starts the video with 300 const, explained step by step to help you understand the logic, congrats for the quality content