Coding a Street Fighter game | JavaScript, HTML Canvas | Standing attacks & hurt/hit boxes (Part 10)

Part 10 of my tutorial series on making a Street Fighter game using web technologies. In this video, we'll start to add the standing attacking moves, while updating the control scheme to handle these new attacks and finally add the necessary hurt/hit boxes to allow for collisions.

#streetfighter #javascript #tutorial

Timestamps:
0:00 Title
0:17 Intro & Recap
2:06 Prepping the code for the light punch attack
3:54 Adding support for attack buttons to the controls
6:35 Adding support for key presses to the controls
10:06 Understanding how attacking moves work
12:20 Finishing up the light punch attack
13:04 Adding the remaining punch attacks
15:54 Adding the kick attacks
18:19 Understanding hurt/hit boxes
20:17 Adding hurt boxes to the animation frames
27:15 Adding hit boxes to the active attack frames
29:29 Adding collision detection
35:27 Adding the attacks to the movement states
35:51 Refactoring time!
38:22 Summary
39:12 End

[phyliedits]

Man those street fighter 2 videos are so cool

[gaganpoojary]

Videos are getting more and more detailed. I really appreciate the work shezzor is putting in.

[brianbrinegar]

Around 34:24 you return inside of a loop through the opponents hurt boxes if the boxes do not collide. This seems like a bug that a failure to collide with the first hurt box would exit the method before the other hurt boxes are evaluated unless the box collides with multiple boxes. I expected a continue instead of a return.

But this seems to work in your tests.

Great work, I haven’t sat and watched a person code for this long since my last computer science class over 20 years ago!

[Shagrath]

Another great video dropped just in time (before going to sleep :P)! Length is also fine, I even prefer 40 minutes videos as they can be more detailed. Good job!

[dunezoop]

Amazing work. Can't wait to see it develop further!

[pikachize]

Absolutely superb videos, and it's so amazing that you're sharing your wisdom on proper game dev in JS without libraries!

In this Street Fighter series, will you be demonstrating scene management at all? Title screen, character select, etc. I've also always been curious how attract mode in old arcade games are managed (the loop of splash screens, animations, snippets of gameplay). Something that touches on this in the future would also be very useful!

Excited to see what your channel brings in the future! :)

[Shagrath]

Hi @shezzor I think I spotted one thing which could be improved. When you keep right arrow key down and you add to it left arrow key (so both arrows are now pressed) then character should start moving in left direction instead of right direction. Left key should be prioritized in that case to make movement more responsive. Of course this is valid for all other variations.

[VISCRA]

at part 7 the AnimationFrame.TRANSITION gives me an 'Uncaught ReferenceError' for some reason which it is in Ryu and Ken's crouch_turn and Idle turn animations.

[juwachan]

yo! what bgm do you use in the beginning of the video?

[Alex-zyyc]

i have a problem with my game where i cant do the light punch atack, ive done it exactly like the video stated, but i still cant perform the light atack, wonder if you have an email i can contact you and show you my code so you can help me? Thanks