Back to Browse

Coding a Street Fighter game | JavaScript, HTML Canvas | Adding Collision/Push boxes (Part 7)

5.1K views
Aug 1, 2022
34:28

Part 7 of my tutorial series on making a Street Fighter game using web technologies. In this video, we'll learn how the game handles collision, specifically the push boxes in this video. We'll also polish up the moves to keep it accurate to the original game. Complete Playlist: https://www.youtube.com/playlist?list=PLf9yt-2olqyLxr-vouWl-qk4toUfjF2LC Patreon Page: https://www.patreon.com/shezzor #canvas #gamedevelopment #javascript Timestamps: 0:00 Title 0:18 Intro 2:08 Re-cap 2:55 Prepping the "Jump start" and "Jump end" states 3:34 Adding the "Jump start" state 5:14 Adding the "Jump end" state 8:17 Allowing the fighters to change direction 9:53 Prepping the "Turn" states 10:18 Adding the "Turn" states 14:14 Understanding collision boxes 16:10 Prepping the push box 17:36 Adding the push box and making it visible 20:38 Applying the push box to the direction change and screen 21:44 Adding the push box collision 24:53 Allowing to push the opponent 25:51 Adding the crouch transition state 27:04 A large chunk of refactoring! 32:05 Summary and what's next? 33:25 End

Download

0 formats

No download links available.

Coding a Street Fighter game | JavaScript, HTML Canvas | Adding Collision/Push boxes (Part 7) | NatokHD