Coding a Street Fighter game | JavaScript, HTML Canvas | ES Modules/OOP and Frame Timing (Part 3)

Part 3 of my tutorial series on making a Street Fighter game using web technologies. In this video, we'll look to do some refactoring in preparation for our following videos. We'll touch on ES Modules, and OOP and even look to correct our frame timing. We'll also give Ken a friend to play with :) Complete Playlist: https://www.youtube.com/playlist?list=PLf9yt-2olqyLxr-vouWl-qk4toUfjF2LC Patreon Page: https://www.patreon.com/shezzor #HTML #Canvas #StreetFighter Timestamps: 0:00 Title 0:16 Intro 1:03 What are ES Modules? 2:07 Prepping our code for ES Modules 3:43 Understanding what entities are 4:13 Splitting our code for ES Modules 5:14 Forming a common entity pattern 6:34 Understanding how to use ES Modules 8:05 Adding a friend entity for Ken 9:45 What is OOP? 10:51 How does OOP and inheritance apply to our game 12:07 Adding our new base/superclass 14:17 Refactoring our code to use classes 17:18 My personal naming class convention 18:20 Understanding frame timing in game development 19:45 We're currently doing it wrong! 20:43 So let's do it properly 23:04 Adding an FPS counter entity 24:28 Moving our entities over to an array 26:20 Some last minor refactoring 26:50 Summary 27:11 Ending