JavaScript Fighting Game Tutorial with HTML Canvas

My premium game dev courses: chriscourses.com/
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/folder...
Finished Demo: chriscourses-fighting-game.ne...
Source Code: github.com/chriscourses/fight...
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

Пікірлер: 1 500

  • @jasonbatester5784
    @jasonbatester57842 жыл бұрын

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

  • @TheOnlySirC

    @TheOnlySirC

    2 жыл бұрын

    It's at 475k views now? What do you mean?

  • @unibrow9384

    @unibrow9384

    2 жыл бұрын

    Do i need to know canvas before starting this project?

  • @jasonbatester5784

    @jasonbatester5784

    2 жыл бұрын

    @@unibrow9384 no. But u need to have background in Programming to understand. Specially in constructors class and methods.

  • @jasonbatester5784

    @jasonbatester5784

    2 жыл бұрын

    @@TheOnlySirC yah, it's good and I'm happy as he deserves views more than that with the value of the tutorial.

  • @unibrow9384

    @unibrow9384

    2 жыл бұрын

    @@jasonbatester5784 Yeah, I'm familiar with those and JS as well.

  • @Yohoho134
    @Yohoho13416 күн бұрын

    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

  • @CHURCHISAWESUM

    @CHURCHISAWESUM

    2 күн бұрын

    Well JavaScript does put people to sleep

  • @adamrobertson2048

    @adamrobertson2048

    9 сағат бұрын

    wtf this just happened to me too

  • @abutohan

    @abutohan

    8 сағат бұрын

    This video was always recommended to me when I'm asleep listening to KZread.

  • @lolcat69
    @lolcat69Ай бұрын

    Bro, I went to sleep, I woke up and this was here Update: IT HAPPENED AGAIN WTH

  • @onmindsoul

    @onmindsoul

    Ай бұрын

    Me too

  • @SavageGTI

    @SavageGTI

    Ай бұрын

    Haha I was watching a blender tutorial and fell asleep and woke to this. but I also use HTML and JS

  • @lolcat69

    @lolcat69

    Ай бұрын

    @@SavageGTI same, I am also a programmer but, why always this video? Why my cellphone just decides to stop at this exact video?

  • @Ahmedjerjawi

    @Ahmedjerjawi

    Ай бұрын

    Huh first time ? I don't why I wake up to this and other vid a full assembly course so I am doul learning while sleeping 😂😂​@@lolcat69

  • @DoomedVortex

    @DoomedVortex

    Ай бұрын

    same

  • @Oogabooga147
    @Oogabooga14729 күн бұрын

    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

  • @IronSharpensIronOfficial

    @IronSharpensIronOfficial

    12 күн бұрын

    This is gonna be very out of context but Anyone noticed that 💀 has became the new O_O

  • @Kopano.Tlali69

    @Kopano.Tlali69

    11 күн бұрын

    it keeps happening

  • @Oogabooga147

    @Oogabooga147

    9 күн бұрын

    Oh my god not again

  • @almightyrocket2464

    @almightyrocket2464

    8 күн бұрын

    @@Oogabooga147Lmao time to become a developer bud

  • @Aceofspadesvr
    @AceofspadesvrАй бұрын

    Who else woke up here

  • @andongoshev4146

    @andongoshev4146

    19 күн бұрын

    Omfg i woke up without even knowing that im watching that video

  • @brazilianboss10

    @brazilianboss10

    12 күн бұрын

    how the fuck are we all waking up to this video

  • @NYI2010

    @NYI2010

    10 күн бұрын

    2 hours mind you I think I got drugged 😅😅

  • @BucketHatGang568

    @BucketHatGang568

    10 күн бұрын

    Bro Yes

  • @therealtroy8275

    @therealtroy8275

    9 күн бұрын

    Fell asleep watching LGR

  • @flowthebro
    @flowthebroАй бұрын

    I was scrolling through my KZread history and figured out that this video was running while I was sleeping.

  • @Sophie-vb3vs

    @Sophie-vb3vs

    Ай бұрын

    ME TOO

  • @kill4ill

    @kill4ill

    Ай бұрын

    Wth me too lol

  • @matthewandrews1789

    @matthewandrews1789

    Ай бұрын

    yeah me as well lmaooo

  • @banditgta4629

    @banditgta4629

    26 күн бұрын

    Same so annoying

  • @IronSharpensIronOfficial

    @IronSharpensIronOfficial

    19 күн бұрын

    Yeah!

  • @pooperspaniol
    @pooperspaniolАй бұрын

    did anyone else wake up to this

  • @grantklinger7249

    @grantklinger7249

    Ай бұрын

    Yeah wtff?

  • @TheMightyGamingChannel

    @TheMightyGamingChannel

    Ай бұрын

    yea me 2

  • @ahassay

    @ahassay

    Ай бұрын

    Yes. Weird isn’t it?

  • @Milksy

    @Milksy

    Ай бұрын

    Yes 😂

  • @apockylypse101

    @apockylypse101

    Ай бұрын

    ME TOO

  • @lego_droid1396
    @lego_droid1396Ай бұрын

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

  • @yup9918
    @yup991815 күн бұрын

    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.

  • @raffazaver
    @raffazaverАй бұрын

    Absolutely amazing tutorial i literally watched 1h while asleep😂 and i learned so much. Btw why do everybody else wake up to this video

  • @Jabranalibabry

    @Jabranalibabry

    28 күн бұрын

    Yeah, quite a few of us. I've become a sleep coder by now lol

  • @elmalleable

    @elmalleable

    22 күн бұрын

    Hmmm it might be a suggestion feature triggered by time of day. If everyone is getting under the same circumstances.

  • @Bighaid91

    @Bighaid91

    18 күн бұрын

    I watched all 4 lol

  • @joshluna1956

    @joshluna1956

    12 күн бұрын

    God is tryna tell us something lolol

  • @Jabranalibabry

    @Jabranalibabry

    12 күн бұрын

    @@joshluna1956 make games?

  • @BigD224
    @BigD22419 күн бұрын

    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

  • @dakotalong8995
    @dakotalong899519 күн бұрын

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

  • @Luger__
    @Luger__Ай бұрын

    Howd i wake up here

  • @elmalleable

    @elmalleable

    22 күн бұрын

    I slept watching mkbhd waveform. Woke up to this. I've been on and off trying to learn game prgrmn. This is incredible

  • @StrixsMC

    @StrixsMC

    11 күн бұрын

    Literally i'm here bc the fucking same reason

  • @melaniebaldwin2766
    @melaniebaldwin27666 ай бұрын

    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

  • @yeomanvanzyl367
    @yeomanvanzyl36723 күн бұрын

    This is like the 6th time your videos came up while I was asleep....the algorithm clearly likes you😂

  • @David-hl1wo
    @David-hl1wo2 жыл бұрын

    This man is giving these tutorials for free! What a beast.

  • @skapha

    @skapha

    2 жыл бұрын

    Indeed!

  • @zenobiusztasak8604

    @zenobiusztasak8604

    2 жыл бұрын

    @Focus making people happy makes him rich

  • @GeekBastion

    @GeekBastion

    2 жыл бұрын

    there is something called AdSense

  • @ChrisCourses

    @ChrisCourses

    2 жыл бұрын

    @@GeekBastion And AdBlock 😉

  • @GeekBastion

    @GeekBastion

    2 жыл бұрын

    @@ChrisCourses unfortunately that is something that sucks for content creators on KZread but you guys can have paid ads inside the video itself and you talking about it so AdBlock is useless in that case

  • @Fighterofthenightman_
    @Fighterofthenightman_4 ай бұрын

    I’ve never watched any coding videos or any videos like this ever I fell asleep with KZread on and woke up halfway through at 3 am 😂

  • @timnonik2736
    @timnonik27362 жыл бұрын

    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.

  • @neilquechon8716

    @neilquechon8716

    2 жыл бұрын

    I'm curently on a little game project to improve my skills (a mix between fire emblem and advance wars).... and ilt's exactly the part I am struggling with now 😅

  • @timnonik2736

    @timnonik2736

    2 жыл бұрын

    ​@@neilquechon8716 Same. I'm currently busy with a WoW-bot (I know, don't you judge me). Since there is a cut-down version of LUA beeing used by the game, object orientated programming does not really work that well. Also the platform I use does not allow to split your scripts into multiple files, so the result is around 3k lines of code. The project isn't really fun anymore, because its just so hard to find what you're looking for in such a mess. I hope to be soon done with this, to focus on licensing the software and other cool stuff.

  • @neilquechon8716

    @neilquechon8716

    2 жыл бұрын

    @@timnonik2736 For now I feel a little the same. I sometime try to think to far ahead and it seem a little overwhelming to make a architecture who would easily fit everything. So I try to cut these thougts and find a good balance between "ok, this is solid" and "ok for know" But for my part I know that if I do sufficently well, the project would become funnier and funnier to work on

  • @timnonik2736

    @timnonik2736

    2 жыл бұрын

    @@neilquechon8716 Yep. Thats what happens a lot to me, and if I realise that my way makes no sense, it frustrates me. Even tho this is normal, you cant just come up with the perfect way to do it in first place. Maybe your first approach will rise in quality over time with different projects, but you cant expect it to be perfect in first place.

  • @sauceprovider3171

    @sauceprovider3171

    2 жыл бұрын

    kzread.info/dash/bejne/npyJz8trZ8aqk9Y.html the sauce

  • @livetobe2079
    @livetobe2079Ай бұрын

    Why did I wake up here AGAIN

  • @laxlyfters8695
    @laxlyfters86952 жыл бұрын

    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

  • @mufeng4182
    @mufeng41822 жыл бұрын

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

  • @jpm7049
    @jpm70492 жыл бұрын

    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.

  • @emiratesandindonesia

    @emiratesandindonesia

    Жыл бұрын

    same here im kinda new to javascript

  • @PavelNebo

    @PavelNebo

    Жыл бұрын

    never say never :)

  • @user-wo8hk2bm2n

    @user-wo8hk2bm2n

    10 ай бұрын

    you can, bro. You know it deep inside, everyone knows actually)

  • @micemincer
    @micemincer2 жыл бұрын

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

  • @collincurtis3182

    @collincurtis3182

    6 ай бұрын

    Literally same for me. I've only been coding for a month or so at this point, and not even JavaScript yet, but this still helped me understand a lot of functionality.

  • @meta91rbx
    @meta91rbxАй бұрын

    Why did I go to sleep and everyone is waking up here😂 Update: NAHH WHAT IT HAPPENED AGAIN BRUH

  • @jerzykepinski
    @jerzykepinski Жыл бұрын

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

  • @smarkbark
    @smarkbark2 жыл бұрын

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

  • @battlewhite5082

    @battlewhite5082

    6 ай бұрын

    the game is responsive ?

  • @ahmadkhaled7497
    @ahmadkhaled7497 Жыл бұрын

    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.

  • @danielwilde6626
    @danielwilde66262 жыл бұрын

    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!

  • @juliocodes
    @juliocodes2 жыл бұрын

    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!

  • @ChrisCourses

    @ChrisCourses

    2 жыл бұрын

    Thanks man, definitely felt like KZread was sleeping on me the past year or two, but glad to see things starting to take off now 😄

  • @jellertja
    @jellertja2 жыл бұрын

    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!

  • @TDAK1509
    @TDAK15092 жыл бұрын

    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.

  • @maximelovesdinosaurs3532
    @maximelovesdinosaurs35322 жыл бұрын

    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 !

  • @franostroski4536
    @franostroski4536 Жыл бұрын

    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!

  • @pikiniello
    @pikiniello2 жыл бұрын

    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

  • @lbb2rfarangkiinok

    @lbb2rfarangkiinok

    2 жыл бұрын

    Has following along helped you to understand functions?

  • @pikiniello

    @pikiniello

    2 жыл бұрын

    @@lbb2rfarangkiinok In deed it has. Much love to this guy

  • @lbb2rfarangkiinok
    @lbb2rfarangkiinok2 жыл бұрын

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

  • @heleenzzz
    @heleenzzz27 күн бұрын

    Glad to see you still uploading videos. Keep going!

  • @eduardorpg64
    @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.

  • @kogarashikoyo1499

    @kogarashikoyo1499

    Жыл бұрын

    Same broo

  • @tomasburian6550
    @tomasburian65502 жыл бұрын

    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! :)

  • @glenj3649
    @glenj3649 Жыл бұрын

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

  • @kelsierii4747
    @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!!

  • @IllustriousMelchior
    @IllustriousMelchior2 жыл бұрын

    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!

  • @infomatters.
    @infomatters.2 жыл бұрын

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

  • @Audio-Tales
    @Audio-Tales7 ай бұрын

    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 🇿🇼

  • @sauce2073
    @sauce20732 жыл бұрын

    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.

  • @senpai3412

    @senpai3412

    2 жыл бұрын

    did you just copy and paste the comment and just changed the time? 💀💀

  • @sauce2073

    @sauce2073

    2 жыл бұрын

    @@senpai3412 not one but two comments, they were so similar that I only subtracted the time they said and added it to the latest one, also one part of my comment that seems odd is copied from one of these comments as well

  • @ElAverno
    @ElAverno Жыл бұрын

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

  • @carsonplayzgaming9691
    @carsonplayzgaming96914 ай бұрын

    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

  • @sannisan7447
    @sannisan7447 Жыл бұрын

    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.

  • @nu_umb
    @nu_umb2 жыл бұрын

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

  • @VenomRaiders
    @VenomRaiders2 жыл бұрын

    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.

  • @237910722
    @2379107222 жыл бұрын

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

  • @ZazaBear
    @ZazaBear Жыл бұрын

    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.

  • @ohsehun6470
    @ohsehun6470 Жыл бұрын

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

  • @itzsaucy5715
    @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.

  • @javohirhak
    @javohirhak2 жыл бұрын

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

  • @mcfly1337

    @mcfly1337

    2 жыл бұрын

    +++

  • @DavidReidChannel
    @DavidReidChannel2 жыл бұрын

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

  • @mitchw4645
    @mitchw4645 Жыл бұрын

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

  • @paulolb9571
    @paulolb95712 жыл бұрын

    Amazing work and great content 👏

  • @adamrobertson2048
    @adamrobertson20489 сағат бұрын

    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 KZread lol

  • @ashwinalagiri-rajan1180
    @ashwinalagiri-rajan11802 жыл бұрын

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

  • @snakone
    @snakone2 жыл бұрын

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

  • @candymanmonster4880

    @candymanmonster4880

    2 жыл бұрын

    Hey, amazing work. I tested out your demo, however, it has a 1-2 second delay for each action. How did you fix the prevent attack while attacking bug? This has been bothering me for a while and I can't seem to figure out what's causing it.

  • @snakone

    @snakone

    2 жыл бұрын

    @@candymanmonster4880 I added some websocket support to play online, It goes smooth for me Prevent the attacking bug: Fighter.ts line 72

  • @candymanmonster4880

    @candymanmonster4880

    2 жыл бұрын

    @@snakone Thanks, but I still couldn't figure out what exactly is causing the prevent attack while attacking bug in Chris's code. Where did he go wrong? If you could explain that to me, it would be really great. Been struggling with it, and it's annoying.

  • @candymanmonster4880

    @candymanmonster4880

    2 жыл бұрын

    @@snakone Please respond whenever you have time, 2 mins of your time would mean so much to me. Please.

  • @snakone

    @snakone

    2 жыл бұрын

    @@candymanmonster4880 before you attacking just check is this.attacking is already true, then return

  • @DopEZTam
    @DopEZTam2 жыл бұрын

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

  • @rajasekarank6439
    @rajasekarank64392 жыл бұрын

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

  • @SonjaMGFX
    @SonjaMGFX7 ай бұрын

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

  • @jaymesinn5134
    @jaymesinn51342 жыл бұрын

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

  • @Gizzzmo
    @Gizzzmo Жыл бұрын

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

  • @aitboss85
    @aitboss85 Жыл бұрын

    Fantastic course! I hope we see more like this.

  • @ToddsDiscGolf
    @ToddsDiscGolf2 жыл бұрын

    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! 👍👍😁

  • @pawiematias4670

    @pawiematias4670

    2 жыл бұрын

    goodluck

  • @blackdragon4293

    @blackdragon4293

    2 жыл бұрын

    Good luck and could you please help me with something,do you perhaps know which code editor he used, if you don't,which one did you use?

  • @isaiahthompkins614

    @isaiahthompkins614

    2 жыл бұрын

    @@blackdragon4293 I think he used Sublime Text but I also recommend VS Code

  • @blackdragon4293

    @blackdragon4293

    2 жыл бұрын

    @@isaiahthompkins614 thanks alot

  • @tanura5830

    @tanura5830

    Жыл бұрын

    Wow I have same goal about game dev and passive income but I know it's very difficult. I don't use JavaScript or web stuff for games.

  • @abdelmajidkansoussi6904
    @abdelmajidkansoussi69042 жыл бұрын

    this guy is very underrated

  • @jimavictor6022
    @jimavictor60222 жыл бұрын

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

  • @cookie9477
    @cookie9477 Жыл бұрын

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

  • @brullov_labs
    @brullov_labs2 жыл бұрын

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

  • @Sazazezer
    @Sazazezer Жыл бұрын

    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.

  • @ChrisCourses

    @ChrisCourses

    Жыл бұрын

    Would love to make one at some point, just have to clear out the backlog of Pokemon, Space Invaders, and Pacman first 😅

  • @paulnwokolo1480
    @paulnwokolo1480 Жыл бұрын

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

  • @Flarkit
    @Flarkit10 ай бұрын

    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 😊

  • @slein1337
    @slein13372 жыл бұрын

    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

  • @auberginepomegranate2742

    @auberginepomegranate2742

    2 жыл бұрын

    I'm new to js, could you please tell me how you fixed the mid air jump?

  • @slein1337

    @slein1337

    2 жыл бұрын

    @@auberginepomegranate2742 For the eventListener on keydown I edited the case for "w" and "ArrowUp" with this 'if (player.velocity.y === 0) player.velocity.y = -20;'

  • @CalebRatcliffe

    @CalebRatcliffe

    7 ай бұрын

    for anyone seeing this, this code also has a bug where if the players velocity gets to zero in the air the person can time it right and still double jump. It is best to use a boolean variable@@slein1337

  • @ritiksinghania8875
    @ritiksinghania88752 жыл бұрын

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

  • @naedid2512
    @naedid2512 Жыл бұрын

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

  • @vikstu6816
    @vikstu68162 жыл бұрын

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

  • @lbb2rfarangkiinok

    @lbb2rfarangkiinok

    2 жыл бұрын

    the rider on the side of the video basically serves to divide it up into multiple sections, but I did not notice it until about the 90 minute mark haha

  • @jdd1325
    @jdd13252 жыл бұрын

    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.

  • @santiagofantoni2643

    @santiagofantoni2643

    2 жыл бұрын

    Ewwww, desperation :(

  • @michaelknight8965

    @michaelknight8965

    2 жыл бұрын

    Lmaoo. Wtf is this

  • @berbudy

    @berbudy

    2 жыл бұрын

    🐶💢🧹 bonk !!

  • @productplacement39

    @productplacement39

    2 жыл бұрын

    Whoa, easy there friend 🙂

  • @AniqTheGreatKhotle
    @AniqTheGreatKhotle2 жыл бұрын

    I don't have a computer but I just found this channel. This is what I've been looking for most my life.

  • @fasteditsyt

    @fasteditsyt

    Жыл бұрын

    I hope you can get a pc somehow freind and start your programming. I'm sure it will happen one day soon. if you have a library maybe you can go there and work?

  • @barszade154

    @barszade154

    Жыл бұрын

    @@fasteditsyt farted

  • @marknewellmusic
    @marknewellmusic2 ай бұрын

    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.

  • @patrickconrad2874
    @patrickconrad28742 жыл бұрын

    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.

  • @dimalepel
    @dimalepel2 жыл бұрын

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

  • @NERO-ez1mn
    @NERO-ez1mn2 жыл бұрын

    o this is what good content really looks like from zero to hero

  • @paultapping9510
    @paultapping9510Ай бұрын

    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.

  • @Frankslaboratory
    @Frankslaboratory2 жыл бұрын

    Man, you are a machine, awesome

  • @ChrisCourses

    @ChrisCourses

    2 жыл бұрын

    Thanks man, keep up the good work on your channel, you have my support 🙌

  • @fanegantosin2973
    @fanegantosin29732 жыл бұрын

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

  • @arnaugarcia3322
    @arnaugarcia33222 жыл бұрын

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

  • @theisnol123
    @theisnol123 Жыл бұрын

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

  • @bankspoke5551
    @bankspoke55512 жыл бұрын

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

  • @jamesr5197
    @jamesr5197 Жыл бұрын

    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?

  • @TuRnaDo88

    @TuRnaDo88

    Жыл бұрын

    just make a check in the switch that prevent the w and ArrowUp case 'w': if (player.velocity.y === 0) { player.velocity.y = -10; } break; case 'ArrowUp': if (enemy.velocity.y === 0) { enemy.velocity.y = -10; } break; }

  • @ArcaneFlux_

    @ArcaneFlux_

    Жыл бұрын

    ​@@TuRnaDo88 thanks

  • @matthewhawkins3697
    @matthewhawkins36972 жыл бұрын

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

  • @hassansiddiqui9764
    @hassansiddiqui97642 жыл бұрын

    This was so amazing. thank you for sharing it with us.

  • @Chill2094
    @Chill20942 жыл бұрын

    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!! 😃

  • @MrTrollo2

    @MrTrollo2

    2 жыл бұрын

    this are pretty basic tutorials, right? if you're familiar to JavaScript, what kind of knowledge do you pull out here?

  • @The_Vending_Machi
    @The_Vending_Machi2 жыл бұрын

    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

  • @The_Vending_Machi

    @The_Vending_Machi

    2 жыл бұрын

    @Zero im not sure if its just me but theres a but of an audio error where theres a loud blip and i had headphones in with max volume

  • @acs2777
    @acs27772 жыл бұрын

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

  • @ayushkumar8351
    @ayushkumar83512 жыл бұрын

    Amazing tutorial. Thanks to you, I have created my first video game.

  • @russellwaring2354
    @russellwaring23542 жыл бұрын

    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.

  • @misohong5362

    @misohong5362

    Жыл бұрын

    Same issue here. Have you sort it out?

  • @raihanahmadfauzan777
    @raihanahmadfauzan7772 жыл бұрын

    Hi, I like the tutorial you made. However, I ran into a bit of trouble during the "React to Sprite Attacks" chapter. I've followed all your steps, But I don't know why the AttackBox used by player 2 can only detect player 1 on the back of the Attackbox, maybe this case is the same as in the chapter "Attacks" where the green box is not facing player 1. I've tried to fix it, but still can't.

  • @ToddsDiscGolf

    @ToddsDiscGolf

    2 жыл бұрын

    He has a video called “coding rectangle collision detection” or something similar, it may be exactly what you need 👍

  • @beagle1225

    @beagle1225

    Жыл бұрын

    Hi, I actually ran into the same problem and I was able to figure something out. If you go to around 2:30:00 ish, you will see that there are two offsets. The offset within the constructor was the offset used to make the hit box for the characters but he removed it for the offset for the actual sprite. So what I think happened is that now the offset for the sprite is now being used for the actual hitbox which is why "the AttackBox used by player 2 can only detect player 1 on the back of the Attackbox." However, I have no idea why his works and ours doesn't. In order to fix this you will need to rename one of the offsets (I renamed the original one for the hitbox offset_hitbox) in your player/enemy objects then go to classes.js and make sure you have both "offsets =" as paramaters in your fighter class. You also need to make sure you make it a variable (ex this.offset_hitbox = offset_hitbox) and then change the name accordingly within your this.attackbox object. This should hopefully work, but you will see that the actual hitbox is much smaller than the actual sprite itself (I'm sure you will be able to figure out how to change it).

  • @legenddistroyer6017
    @legenddistroyer6017 Жыл бұрын

    Amazing, i already knew canvas but this made me feel like i didnt know anything and you just made me understood everything better (hope that makes sense)