JavaScript Fighting Game Tutorial with HTML Canvas

แชร์
ฝัง
  • เผยแพร่เมื่อ 24 พ.ย. 2024

ความคิดเห็น • 3.1K

  • @jasonbatester5784
    @jasonbatester5784 2 ปีที่แล้ว +2447

    -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 ปีที่แล้ว +63

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

    • @unibrow9384
      @unibrow9384 2 ปีที่แล้ว +25

      Do i need to know canvas before starting this project?

    • @jasonbatester5784
      @jasonbatester5784 2 ปีที่แล้ว +27

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

    • @jasonbatester5784
      @jasonbatester5784 2 ปีที่แล้ว +13

      @@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 ปีที่แล้ว +11

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

  • @Yohoho134
    @Yohoho134 7 หลายเดือนก่อน +3304

    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 6 หลายเดือนก่อน +64

      Well JavaScript does put people to sleep

    • @adamrobertson2048
      @adamrobertson2048 6 หลายเดือนก่อน +25

      wtf this just happened to me too

    • @abutohan
      @abutohan 6 หลายเดือนก่อน +27

      This video was always recommended to me when I'm asleep listening to TH-cam.

    • @lazygamer923
      @lazygamer923 6 หลายเดือนก่อน +6

      ​@@adamrobertson2048Yeah me too and this is weird

    • @MaQueRS
      @MaQueRS 6 หลายเดือนก่อน

      D m😮😊😅😊😊​@@lazygamer923

  • @Oogabooga147
    @Oogabooga147 7 หลายเดือนก่อน +1091

    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 7 หลายเดือนก่อน +7

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

    • @Kopano.Tlali69
      @Kopano.Tlali69 7 หลายเดือนก่อน +1

      it keeps happening

    • @Oogabooga147
      @Oogabooga147 7 หลายเดือนก่อน +4

      Oh my god not again

    • @iswimslow4
      @iswimslow4 7 หลายเดือนก่อน +4

      @@Oogabooga147Lmao time to become a developer bud

    • @cabin98
      @cabin98 6 หลายเดือนก่อน

      Bruh I was watching the Technology Connections video about flash photography featuring Gavin from the Slo Mo Guys.

  • @lego_droid1396
    @lego_droid1396 7 หลายเดือนก่อน +367

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

    • @kornknot2726
      @kornknot2726 3 หลายเดือนก่อน +1

      This is my second time.

    • @ssehcsissehc
      @ssehcsissehc 11 วันที่ผ่านมา

      ​@@kornknot2726❤😂😮🎉🎉😂😢❤🎉😂😢🎉🎉😂🎉😂

  • @AvenRacca2008
    @AvenRacca2008 7 หลายเดือนก่อน +2004

    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

    • @EKO420G
      @EKO420G 6 หลายเดือนก่อน +27

      Came as far to 2:37:26 😭

    • @Yoshikage_Kir4
      @Yoshikage_Kir4 6 หลายเดือนก่อน +20

      Bro I was watching Vsauce, like how

    • @Rastaa69
      @Rastaa69 6 หลายเดือนก่อน +10

      @@EKO420Glmfaoo!!! I’m 3:03:43 this point like dawg why

    • @couldntsetpass2901
      @couldntsetpass2901 6 หลายเดือนก่อน +3

      I made it to the end

    • @lildawg1685
      @lildawg1685 6 หลายเดือนก่อน +1

      @@Yoshikage_Kir4on gaad

  • @yup9918
    @yup9918 7 หลายเดือนก่อน +216

    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.

    • @bradentheman1373
      @bradentheman1373 6 หลายเดือนก่อน +5

      why did this make me emotional

    • @InfinityHS
      @InfinityHS 6 หลายเดือนก่อน +2

      LMFAOOOOOOOOOOOO

    • @iamsosleepdeprived
      @iamsosleepdeprived 6 หลายเดือนก่อน

      Help 😭

    • @quavo2098
      @quavo2098 6 หลายเดือนก่อน

      😂😂😂😂😂

  • @raffazaver
    @raffazaver 7 หลายเดือนก่อน +279

    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 7 หลายเดือนก่อน +10

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

    • @elmalleable
      @elmalleable 7 หลายเดือนก่อน +10

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

    • @Bighaid91
      @Bighaid91 7 หลายเดือนก่อน +4

      I watched all 4 lol

    • @joshluna1956
      @joshluna1956 7 หลายเดือนก่อน +7

      God is tryna tell us something lolol

    • @Jabranalibabry
      @Jabranalibabry 7 หลายเดือนก่อน

      @@joshluna1956 make games?

  • @flowthebro
    @flowthebro 8 หลายเดือนก่อน +833

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

  • @lolcat69
    @lolcat69 8 หลายเดือนก่อน +1991

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

    • @onmindsoul
      @onmindsoul 7 หลายเดือนก่อน +30

      Me too

    • @SavageGTI
      @SavageGTI 7 หลายเดือนก่อน +19

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

    • @lolcat69
      @lolcat69 7 หลายเดือนก่อน +23

      @@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 7 หลายเดือนก่อน +1

      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 7 หลายเดือนก่อน +7

      same

  • @Bison6000
    @Bison6000 6 หลายเดือนก่อน +49

    If i keep waking up to this playing, I promise you I'll actually be able to code in my sleep

  • @yeomanvanzyl367
    @yeomanvanzyl367 7 หลายเดือนก่อน +46

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

  • @melaniebaldwin2766
    @melaniebaldwin2766 ปีที่แล้ว +62

    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

  • @captaincaption
    @captaincaption 6 หลายเดือนก่อน +2461

    javascript game tutorial ❌ people waking up from sleep ✅

    • @hisomebody123
      @hisomebody123 5 หลายเดือนก่อน +26

      lol

    • @TheSyanAlfaWolf
      @TheSyanAlfaWolf 4 หลายเดือนก่อน +72

      Frl wtf what is this sorcery

    • @Hello-sh2rg
      @Hello-sh2rg 3 หลายเดือนก่อน +70

      That legit just happened to me dafq

    • @OurHereafter
      @OurHereafter 3 หลายเดือนก่อน +26

      I wake up in some weird places

    • @Shiftyedits11
      @Shiftyedits11 3 หลายเดือนก่อน +22

      Bro this happened to me😭😭

  • @Fighterofthenightman_
    @Fighterofthenightman_ 11 หลายเดือนก่อน +109

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

  • @St_Banian
    @St_Banian 7 หลายเดือนก่อน +20

    i sleep to video essays a lot so i woke up in the middle of the night thinking that this made sense.
    No, it doesn’t. It’s a goddamn coding tutorial. The last video before this was a video from Thought Emporium about radioactive products. That’s an insane jump.

  • @Deepfried_duck
    @Deepfried_duck 6 หลายเดือนก่อน +16

    The TH-cam autoplay gods have blessed you. I don’t even know how it could make any connections to what I watch, to what you do.Thanks for being there when I was asleep

    • @bloodclot
      @bloodclot 2 หลายเดือนก่อน

      I hate this shit so much. It keeps coming up on my autoplay. I report this video every time.

  • @vallytheeg8317
    @vallytheeg8317 7 หลายเดือนก่อน +21

    Bro I accidentaly fell asleep while watching a completely different thing and I woke up here 😂

  • @StudyBuddy-jj5pb
    @StudyBuddy-jj5pb 2 หลายเดือนก่อน +3

    this is possibly the best course of beginners who has no idea of game mecahnics and stuff. thank you a lot learnt a TON.

    • @ChrisCourses
      @ChrisCourses  2 หลายเดือนก่อน +1

      Got another just released which I think might rival it 👀

  • @Aceofspadesvr
    @Aceofspadesvr 8 หลายเดือนก่อน +1623

    Who else woke up here
    Edit: OMG THANKS FOR THE LIKES I WAS GENUINELY NOT EXPECTING THIS MUCH HOLY COW!!!

    • @andongoshev4146
      @andongoshev4146 7 หลายเดือนก่อน +39

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

    • @brazilianboss10
      @brazilianboss10 7 หลายเดือนก่อน +58

      how the fuck are we all waking up to this video

    • @NYI2010
      @NYI2010 7 หลายเดือนก่อน +20

      2 hours mind you I think I got drugged 😅😅

    • @BucketHatGang568
      @BucketHatGang568 7 หลายเดือนก่อน +6

      Bro Yes

    • @therealtroy8275
      @therealtroy8275 7 หลายเดือนก่อน +5

      Fell asleep watching LGR

  • @timnonik2736
    @timnonik2736 2 ปีที่แล้ว +447

    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 ปีที่แล้ว +11

      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 ปีที่แล้ว +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 ปีที่แล้ว +3

      @@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 ปีที่แล้ว +3

      @@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 ปีที่แล้ว

      th-cam.com/video/lhUmi27cDcs/w-d-xo.html the sauce

  • @jpm7049
    @jpm7049 2 ปีที่แล้ว +135

    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 2 ปีที่แล้ว +10

      same here im kinda new to javascript

    • @PavelNebo
      @PavelNebo 2 ปีที่แล้ว +2

      never say never :)

    • @ЮрийДжиндоев
      @ЮрийДжиндоев ปีที่แล้ว +2

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

    • @BinkBonk-kn3dq
      @BinkBonk-kn3dq 5 หลายเดือนก่อน

      No you woke up for this

    • @nityashri3548
      @nityashri3548 2 หลายเดือนก่อน

      Hey can u pls answer this..i am going to start this tutorial..can we play this game on a single device? The other player is computerized?? Pls lemme know 🥲 and i can make it just by using html css js right?

  • @Porter5habazz
    @Porter5habazz 6 หลายเดือนก่อน +8

    I wasn’t even watching anything related to this. And STILL woke up to this. 😂😂😂

  • @eduardorpg64
    @eduardorpg64 2 ปีที่แล้ว +49

    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
    @micemincer 2 ปีที่แล้ว +65

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

    • @collincurtis3182
      @collincurtis3182 ปีที่แล้ว

      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.

  • @adamrobertson2048
    @adamrobertson2048 6 หลายเดือนก่อน +40

    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 TH-cam lol

    • @collt091
      @collt091 6 หลายเดือนก่อน

      THATS WHAT IM SAYING

    • @yisraelG
      @yisraelG 5 หลายเดือนก่อน

      I feel watched bro

    • @Shelby_Erilyn
      @Shelby_Erilyn 2 หลายเดือนก่อน

      It’s coding us 😂

  • @David-hl1wo
    @David-hl1wo 2 ปีที่แล้ว +1137

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

    • @skapha
      @skapha 2 ปีที่แล้ว +24

      Indeed!

    • @zenobiusztasak8604
      @zenobiusztasak8604 2 ปีที่แล้ว +19

      @Focus making people happy makes him rich

    • @GeekBastion
      @GeekBastion 2 ปีที่แล้ว +17

      there is something called AdSense

    • @ChrisCourses
      @ChrisCourses  2 ปีที่แล้ว +130

      @@GeekBastion And AdBlock 😉

    • @GeekBastion
      @GeekBastion 2 ปีที่แล้ว +7

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

  • @schneefuchs_
    @schneefuchs_ 8 หลายเดือนก่อน +327

    Howd i wake up here

    • @elmalleable
      @elmalleable 7 หลายเดือนก่อน +4

      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 7 หลายเดือนก่อน +3

      Literally i'm here bc the fucking same reason

    • @tyalk_3565
      @tyalk_3565 6 หลายเดือนก่อน

      same😂

    • @eponawarrior7492
      @eponawarrior7492 6 หลายเดือนก่อน

      Bruh same 😂

    • @TheSteducky
      @TheSteducky 6 หลายเดือนก่อน

      Just happened to me too, went to sleep watching Mr Ballen, woke up here 😂

  • @heleenzzz
    @heleenzzz 7 หลายเดือนก่อน +1

    Glad to see you still uploading videos. Keep going!

  • @juliocodes
    @juliocodes 2 ปีที่แล้ว +8

    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 ปีที่แล้ว +9

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

  • @laxlyfters8695
    @laxlyfters8695 2 ปีที่แล้ว +50

    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

  • @_Mad_Max__
    @_Mad_Max__ หลายเดือนก่อน +3

    since so many people get this video while sleeping/ waking up I am convinced yt algorithm somehow counts in the factor at which relativ time of day a video is watched.
    Which is kinda cool and also explains why everybody is watching the same typ of 3am videos 😂😂😂

  • @TheClumsyChicken
    @TheClumsyChicken หลายเดือนก่อน +4

    I fell asleep watching TH-cam, woke up, checked my watch history, and found I was 3:15:03 into this video. I know nothing about JavaScript and have no idea this was recommended to me, but that’s cool I guess

  • @sammyweoweo8567
    @sammyweoweo8567 6 หลายเดือนก่อน +6

    bro how am i waking up to this every single time that’s freaky

  • @tigershav
    @tigershav หลายเดือนก่อน

    ~~so far this has been the perfect refresher for me to get back into programming~~
    for anyone in a similar boat to me with some experience in programming but a little bit rusty this tutorial covers:
    -some html basics
    -some css basics
    -javascript basics
    -object oriented programming basics
    -game mechanic basics
    -animation basics
    I still have about an hour to go so I may have missed something that is included near the end.
    this tutorial is well worth the time. many other tutorials simply teach you to regurgitate code but this man really teaches you important concepts (clean and robust code) for your projects going forwards. (you're not just writing one 2,000 line illegible file).

  • @smarkbark
    @smarkbark 2 ปีที่แล้ว +23

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

  • @javohirhak
    @javohirhak 2 ปีที่แล้ว +30

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

  • @Audio-Tales
    @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 🇿🇼

  • @ahmadkhaled7497
    @ahmadkhaled7497 2 ปีที่แล้ว +6

    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.

  • @jerzykepinski
    @jerzykepinski 2 ปีที่แล้ว +6

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

  • @raofthesun7558
    @raofthesun7558 ปีที่แล้ว +1

    dude sat down for 4 hours and made a step by step tutorial, that is a testament to the amount of focus and mental stamina it takes to be a programmer/software engineer. crazy, Ive always wanted to learn and have started but the focus iw what I struggle with.

  • @itzsaucy5715
    @itzsaucy5715 2 ปีที่แล้ว +4

    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.

  • @dafjiahosdasdof
    @dafjiahosdasdof 6 หลายเดือนก่อน +25

    this guy has the sleep algorithm

  • @SonjaMGFX
    @SonjaMGFX ปีที่แล้ว +1

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

  • @infomatters.
    @infomatters. 2 ปีที่แล้ว +8

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

  • @FernandoTurcios-tr4ig
    @FernandoTurcios-tr4ig 5 หลายเดือนก่อน +4

    your voice is the first thing i hear in the mornings STOP IT

    • @ChrisCourses
      @ChrisCourses  5 หลายเดือนก่อน +1

      😂 some of these comments are great

  • @lindboknifeandtool
    @lindboknifeandtool 6 หลายเดือนก่อน +1

    You’re getting those good good TH-cam premium back play watch time.
    Idk why we’re all here but cool. I had this in watched later

  • @snakone
    @snakone 2 ปีที่แล้ว +10

    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 ปีที่แล้ว +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

  • @robzonefire
    @robzonefire 7 หลายเดือนก่อน +9

    I fell a sleep and somehow ended up dreaming your instructions wtf hahaha

  • @VeritasPlus
    @VeritasPlus 6 หลายเดือนก่อน

    I wasn’t sure how I got here except I fell asleep and was hearing someone talking at 1.5x speed - I slowed it down and found Chris!
    Needless to say, I slowed it down and noticed it was a tutorial!
    Tbh, I haven’t written code in a long time, feeling defeated from a previous stressful [startup] job of 3 years… but after watching this, this made me happy.
    I’m going to look at more of Chris’ courses and look at other short tutorials … hoping I get that joy back with coding something that means something.
    … thanks so much, Chris 😊

  • @ToddsDiscGolf
    @ToddsDiscGolf 2 ปีที่แล้ว +34

    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 ปีที่แล้ว +1

      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 ปีที่แล้ว +1

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

    • @blackdragon4293
      @blackdragon4293 2 ปีที่แล้ว

      @@isaiahthompkins614 thanks alot

    • @tanura5830
      @tanura5830 2 ปีที่แล้ว +1

      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.

  • @jellertja
    @jellertja 2 ปีที่แล้ว +9

    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!

  • @paultapping9510
    @paultapping9510 8 หลายเดือนก่อน

    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.

  • @meta91live
    @meta91live 7 หลายเดือนก่อน +28

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

  • @JayPrinceReacts
    @JayPrinceReacts 6 หลายเดือนก่อน +3

    Bruh I wasn’t even sleeping, I got out of my car walked into my apartment opened up my phone and I’m greeted with this random ass Video 💀

  • @viniciomartinezlopez495
    @viniciomartinezlopez495 5 หลายเดือนก่อน +1

    Not only did I wake up to this, but I remember dreaming that I was actually coding a game. Amazing

    • @Shelby_Erilyn
      @Shelby_Erilyn 2 หลายเดือนก่อน

      Plot twist he was coding YOU

  • @Ene2007
    @Ene2007 ปีที่แล้ว +1

    your tutorial is way better than other online courses

  • @_RKPhoenix_
    @_RKPhoenix_ 7 หลายเดือนก่อน +3

    It seems that when one puts on TH-cam to listen to as they sleep, they always wake up here

  • @danielwilde6626
    @danielwilde6626 2 ปีที่แล้ว +6

    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!

  • @kevindean8312
    @kevindean8312 3 หลายเดือนก่อน

    Nice job on tutorial Chris. I completed the whole tutorial and learnt a ton! Coming from a backend developer (mainly PHP) with over 20 years experience.

  • @nomltefindingthis
    @nomltefindingthis 11 หลายเดือนก่อน +5

    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

  • @jyvonperry1042
    @jyvonperry1042 7 หลายเดือนก่อน +5

    Idk why or how I woke up to this but somehow it snuck into my dreams ???

  • @teku6678
    @teku6678 หลายเดือนก่อน +2

    I started off with a warhammer lore video, fell asleep and woke up 2 hours into this video. Hello travelers

  • @mufeng4182
    @mufeng4182 2 ปีที่แล้ว +4

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

  • @vikstu6816
    @vikstu6816 2 ปีที่แล้ว +4

    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 ปีที่แล้ว +1

      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

  • @robferreri_katfishstudios
    @robferreri_katfishstudios หลายเดือนก่อน

    Woke up this morning to this playing. I fell asleep watching a Linus Tech Tips video, so I can kinda see how this played. But, I found it very interesting and will be popping back to the start and actually watching this. Great way of explaining and seems very easy to follow along. Thanks Algorithm!

  • @Genie_Juniper
    @Genie_Juniper 2 หลายเดือนก่อน +3

    Okay but more people should talk about the sleep algorithm because it’s insane we all woke up to this video

    • @jarrettpratt3289
      @jarrettpratt3289 หลายเดือนก่อน

      Just woke up tot his last night. Definitely something going on….

  • @IllustriousMelchior
    @IllustriousMelchior 2 ปีที่แล้ว +4

    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!

  • @marknewellmusic
    @marknewellmusic 9 หลายเดือนก่อน

    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.

  • @Mango05307
    @Mango05307 4 หลายเดือนก่อน +3

    Bro I fell asleep at around 2 AM to a vsauce video and I woke up at 6 AM with this playing ? Lmao

  • @blxck_smith
    @blxck_smith 6 หลายเดือนก่อน +4

    I literally fell asleep and woke up to this 💀💀💀💀

  • @welra3376
    @welra3376 4 หลายเดือนก่อน +1

    woke up to this. crazy thing is, making a fighting game is a dream to me.

  • @abdelmajidkansoussi6904
    @abdelmajidkansoussi6904 2 ปีที่แล้ว +5

    this guy is very underrated

  • @237910722
    @237910722 2 ปีที่แล้ว +18

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

  • @Bruh_come_on
    @Bruh_come_on 6 หลายเดือนก่อน +2

    Why do I keep waking up to this this is the 5th time I’m at the 1:36:28 mark now I now how to make games no man I’ve been having dreams of this man’s voice

    • @trinity6880
      @trinity6880 6 หลายเดือนก่อน

      Lmaoo yes

    • @AlexEFrair
      @AlexEFrair 6 หลายเดือนก่อน

      Mine’s at 1:36:57 wtff

  • @kelsierii4747
    @kelsierii4747 2 ปีที่แล้ว +8

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

  • @slein1337
    @slein1337 2 ปีที่แล้ว +8

    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 ปีที่แล้ว +4

      @@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;'

    • @InfoRevv
      @InfoRevv ปีที่แล้ว

      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

  • @Henkka008
    @Henkka008 5 หลายเดือนก่อน +2

    Woke up from bed and noticed this video was on.. seems interesting so mind as well learn this.

    • @annacurransmotherofmeghanc1841
      @annacurransmotherofmeghanc1841 5 หลายเดือนก่อน +1

      Yeah crazy I considered myself a moderate libertarian before I fell asleep and I Woke up to this totally Woke!!! I couldn't even figure out what bathroom to use!!!

  • @kamptey
    @kamptey 5 หลายเดือนก่อน +3

    bro wtf i woke up for work and now i'm here

  • @Peanutbutterjif
    @Peanutbutterjif 6 หลายเดือนก่อน +5

    Why is this always what I wake up to. This is like the 7th time

    • @l.v1473
      @l.v1473 5 หลายเดือนก่อน +2

      Im on my 6th😂😂

  • @VenomRaiders
    @VenomRaiders 2 ปีที่แล้ว +4

    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.

  • @Pladouvious_shingledingle
    @Pladouvious_shingledingle 2 หลายเดือนก่อน +3

    Aint even watching this when i wake up. Im watching this while i go to sleep fr

  • @Itz_Mothii
    @Itz_Mothii 5 หลายเดือนก่อน +2

    Woke up this morning and this whole thing was finished LOL idk where it came from

  • @tomasburian6550
    @tomasburian6550 2 ปีที่แล้ว +6

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

  • @jdd1325
    @jdd1325 2 ปีที่แล้ว +20

    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.

  • @yzzygomez
    @yzzygomez ปีที่แล้ว

    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 ❤️

  • @vasilisablud
    @vasilisablud 6 หลายเดือนก่อน +28

    Can someone please explain to me how the algorithm brought SO MANY sleeping people specifically to this video I'm so confused.

  • @aylictal
    @aylictal 2 ปีที่แล้ว +4

    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.

    • @ChrisCourses
      @ChrisCourses  2 ปีที่แล้ว +2

      Stealin this for the future

    • @aylictal
      @aylictal 2 ปีที่แล้ว +1

      @@ChrisCourses no worries. Thank you for an entertaining video too man I enjoyed it. I commend you for sticking with JS rather than typescript. Theres still many of us that still prefer it like myself :)

    • @ChrisCourses
      @ChrisCourses  2 ปีที่แล้ว

      @@aylictal I prefer it that way too 🤫 Can't let too many people know that these days without getting attacked haha

  • @felix.thephoenix
    @felix.thephoenix 6 หลายเดือนก่อน +1

    All the roads lead to this video, help how do I make it stop 🙈🤣 no matter what was I watching previously, after a couple hours I wake up or go check my phone for whatever reason and IT'S ALWAYS PLAYING THIS VIDEO!! HOW???
    Also props to the algorithm, it really loves your stuff 🤖🧑🏻‍💻💚

  • @yeyo3162
    @yeyo3162 6 หลายเดือนก่อน +4

    How did I wake up to this midnight and ive never watched anything about gaming or coding....

    • @LarsenBour
      @LarsenBour 6 หลายเดือนก่อน +1

      Me too i really dont get it

    • @yeyo3162
      @yeyo3162 6 หลายเดือนก่อน

      @@LarsenBour the number of people saying the exact same thing too like wth lol

    • @Kanoun91
      @Kanoun91 6 หลายเดือนก่อน

      Me two I have never seen like these videos before and I woke up to this🥲

  • @dakotalong8995
    @dakotalong8995 7 หลายเดือนก่อน +23

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

  • @SephisJolly
    @SephisJolly 5 หลายเดือนก่อน +1

    I was watching Atozy fell asleep and woke up to look at my history. This Java script tutorial ended up in my history still clicked on it and watched it anyways well done sir ‼️😂

  • @DopEZTam
    @DopEZTam 2 ปีที่แล้ว +11

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

  • @james_big_balla3002
    @james_big_balla3002 8 หลายเดือนก่อน +1

    Fell asleep watching TH-cam and this shi came on in the middle of my sleep and gave me the wildest dreams

  • @Sazazezer
    @Sazazezer 2 ปีที่แล้ว +6

    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  2 ปีที่แล้ว +3

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

  • @bankspoke5551
    @bankspoke5551 2 ปีที่แล้ว +4

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

  • @MaxiSniper
    @MaxiSniper 7 หลายเดือนก่อน +2

    bro i fr just woke up before school and this video is here

  • @ay_its_jay4073
    @ay_its_jay4073 หลายเดือนก่อน +5

    Woah, the fact that all of us woke up here is weird, I wonder if anyone has looked into why, and how, the algorithm did that

    • @FaT_LuNgZZ
      @FaT_LuNgZZ หลายเดือนก่อน +3

      Acabo de levantarme en este video, y eso que hablo español

    • @modernNeanderthal800
      @modernNeanderthal800 หลายเดือนก่อน

      Ha. I wonder if this changes over time.
      I'm normally watching videogame facts to some extent or another. If a person watches other content regularly I wonder if the video changes

    • @modernNeanderthal800
      @modernNeanderthal800 หลายเดือนก่อน

      Oh yeah and add the fact that I'm literally a JS engineer

  • @AvarieWilliams
    @AvarieWilliams 6 หลายเดือนก่อน +3

    I fell asleep watching HoofGP to then wake up to be three hours 36 minutes and 16 seconds into this video.
    (3 months later)
    Update: IT HAPPENED AGAIN WTF

  • @Old_SDC
    @Old_SDC หลายเดือนก่อน

    I was watching a video about Conway’s game of life, woke up to Facebook open, switched to TH-cam and I have apparently watched this video now? 10/10 video would watch while asleep again

  • @livetobe2079
    @livetobe2079 8 หลายเดือนก่อน +6

    Why did I wake up here AGAIN