Your Games Need More Juice! Try this

The FLASH of a fist, the CRUNCH of a hit, the SATISFYING knockback that sends enemies flying, most games fall flat until you nail the details. Every game needs to handle body-on-body collision, and how you resolve that contact changes how your game feels to play.

In this game dev tutorial we make character INTERACTIONS sound and feel right. Do you want your game to actually REACT to the player? Let's build it the way real games are made with a data-driven approach!

This is part of a full vanilla JavaScript game development series, where we’re building a reusable starter kit step by step: https://youtube.com/playlist?list=PLYElE_rzEw_tjnJ_5gzRw0ZM5HRn7AIS0&si=j53kz7v7JoN5dg1B

We're using vanilla JavaScript to build everything from scratch, so you can see exactly how the code works under the hood. Engines like Unity or Godot abstract a lot of this away for you, but understanding the fundamentals makes you a better developer no matter what tool you end up using.

Resources:
Source code: coming soon...
Audio:
🎵 mission_complete.mp3: https://www.frankslaboratory.co.uk/downloads/147/mission_complete.mp3
🎵 enemy_seeker_hit.mp3: https://www.frankslaboratory.co.uk/downloads/147/enemy_seeker_hit.mp3
🎵 enemy_seeker_death.mp3: https://www.frankslaboratory.co.uk/downloads/147/enemy_seeker_death.mp3
🎵 enemy_drifter_hit.mp3: https://www.frankslaboratory.co.uk/downloads/147/enemy_drifter_hit.mp3
🎵 enemy_drifter_death.mp3: https://www.frankslaboratory.co.uk/downloads/147/enemy_drifter_death.mp3

🎨 Featured art assets: https://www.gamedeveloperstudio.com/

⏱ Timestamps
00:00 Juice UP your Games!
02:03 Source Code Checkpoint P19
02:34 Refactoring UI Buttons with Data Attributes
06:43 Mission Complete Screen & Win Conditions
13:48 Source Code Checkpoint P20
14:19 Enemy Invincibility Frames & Health Bars
24:34 Source Code Checkpoint P21
25:05 Knockback & Pushback System
38:23 Applying Pushback to Player & Enemies
46:21 Source Code Checkpoint P22
46:51 Data-Driven Enemy Sounds
56:48 Source Code Checkpoint P23
57:17 Debug Mode & Collision Hitboxes
01:03:03 What's Next?

Hey game developers, in this vanilla JavaScript class we cover a lot, we will learn:
How to add a mission complete screen in JavaScript game
How to create data-driven win conditions in a 2D game
How to add enemy health bars in HTML canvas
How to implement knockback and invincibility frames in a 2D game
How to give enemies unique sounds in a JavaScript game
How to visualize collision hitboxes for debugging in HTML canvas
How to manage UI buttons with data attributes in JavaScript

Click the LIKE if you want more vanilla JavaScript game development tutorials like this!

Видео Your Games Need More Juice! Try this канала Franks laboratory