Uploaded October 2020 | Updated September 2026, 2 hours ago
In this JavaScript tutorial, we use React to recreate the classic HUD in Zelda games. Whether you're making a game in React or just trying to learn React in the first place, this video hopes to help you out!
Download the project (instructions in readme.md for installing):
assets.codepen.io/21542/zelda-hearts-react.zip
⭐️ Get early access to my full JS Game Dev course:
drew-conley-courses.kit.com/66eb6d3ff4
💬 Join our Discord community of people making video games:
discord.gg/umD2GRy
Me on Twitter:
twitter.com/drewconley13
Danger Crew, my first game built with React:
store.steampowered.com/app/1064690/Danger_Crew
*** Timestamps ***
00:00:00 Intro
00:01:00 Project Overview
00:02:00 HUD Starting point
00:07:44 Heart SVG breakdown
00:09:44 Creating the hearts array
00:11:37 Grid styles
00:12:30 Filling the hearts
00:14:10 Changing the number of hearts
In this JavaScript tutorial, we use React to recreate the classic HUD in Zelda games. Whether you're making a game in React or just trying to learn React in the first place, this video hopes to help you out!
Download the project (instructions in readme.md for installing):
assets.codepen.io/21542/zelda-hearts-react.zip
⭐️ Get early access to my full JS Game Dev course:
drew-conley-courses.kit.com/66eb6d3ff4
💬 Join our Discord community of people making video games:
discord.gg/umD2GRy
Me on Twitter:
twitter.com/drewconley13
Danger Crew, my first game built with React:
store.steampowered.com/app/1064690/Danger_Crew
*** Timestamps ***
00:00:00 Intro
00:01:00 Project Overview
00:02:00 HUD Starting point
00:07:44 Heart SVG breakdown
00:09:44 Creating the hearts array
00:11:37 Grid styles
00:12:30 Filling the hearts
00:14:10 Changing the number of hearts
