Ciabatta's Revenge: React.js Gamedev Tutorial

Ciabatta's Revenge is a 47 video code-along tutorial series where we build an action puzzle game from scratch with React.js!

What's Covered?

• JavaScript game development concepts: a healthy mix of vanilla game classes and functional React components with hooks

• Grid-based movement with a top-down look
• Sprites and Sprite Sheets with <canvas> and SVG
• Game Object classes, like you'd see in a traditional game engine
• Configurable level designs through JSON files
• Camera following and easing effects
• Pixel art HUD elements
• Three different enemy behaviors and a boss battle!
• State management with Recoil.js
• ...and more!

FAQ

Q: What web development skill level is required?

This series is designed for the late-beginner/early intermediate JavaScript and React developer. A little bit of experience with React is nice to have. We use NPM to install all libraries, so it helps to be familiar with that process. We'll write a good bit of CSS as well.

Q: What version of React is used?

React v18. The videos use a project bootstrapped with Create React App, but we also cover using Next.js. It's very easy to swap in Vite for local development as well!

Q: What is included in the purchased files?

• 47 High-Quality Tutorial Videos
• A copy of the final code repository
• All assets used to create the game (and some extras)

Q: Where can I play the game we make?

Check out an example of the full game on Itch here:
https://drewconley.itch.io/ciabattas-revenge

Please note that this full game link has a few features that are not included in the tutorial series. Please see the whole list of videos below for exact details of what this series includes. For example, you will bring your own story elements and level designs!

Q: What are the videos like?

Tight, to-the-point, but casual. I screen share my IDE and browser as we start with an empty repository and build up all the game features from scratch.

Q: Who teaches the course?

Drew Conley (that's me!). I have games on Steam, Itch, and many video tutorials on YouTube. My goal with this series is to help web developers get into game development using many of the skills and tools they already know.

Q: Will this course receive updates?

Future versions may be released with extra content. You will have access to all future updates when purchasing now.

Q: What if I run into a problem?

You can reach out to me via email or Discord any time! We have a great community of folks who have been through the series that can help you out.

Video Content

PART I: Foundations

01. Setting up the Repository (04:02)

01b. Using Next JS (05:09)

02. The Sprite Component (18:01)

03. Scaling the Game Viewport (09:57)

04. Rendering Sprites (06:15)

05. Level Backgrounds (17:17)

06. Refactoring with Recoil (08:43)

07. The Level Class (10:41)

08. Game Object Classes (11:31)

09. Game Loop (06:24)

10. Rendering Objects (03:15)

PART II: Hero and Core Gameplay

11. Object Movement (10:36)

12. Direction Controls (08:32)

13. Animating the Hero (12:10)

14. Room Limit Collisions (03:56)

15. Solid Wall Placements (12:38)

16. Object Layering (03:33)

17. Floating Flour Pickups (09:33)

18. Flour Count Remaining (06:18)

19. Particle Celebration Effect (10:26)

20. Goal Tile (07:20)

PART III: Level Mechanics

21. Changing Levels (08:55)

22. Keys, Locks, and Inventory (07:42)

23. Unlockable Doors (09:19)

24. Water and Death (08:27)

25. Water Pickups and Swimming (07:36)

26. Enemy Bodies (12:37)

27. Enemy Behaviors (07:37)

28. Roaming Enemy (05:16)

29. Conveyor Belts (10:28)

30. Ice Movement (10:10)

31. Ice Pickup (06:32)

32. Fire (03:16)

33. Animated Tiles (07:35)

34. Switchable Doors (07:45)

35. Teleports (07:12)

36. Thief (06:07)

Part IV: Presentation

37. Camera (10:18)

38. Clock (06:39)

39. HUD Styles (09:31)

40. Styled Popups (13:27)

41. Inventory HUD (04:08)

42. Sound Effects (07:23)

43. Ciabatta Boss Battle Movement (19:28)

44. Ciabatta Boss Battle Damage (07:03)

PART V: Bonus Videos

45. Bonus: Planning in Figma 1 (07:19)

46. Bonus: Planning in Figma 2 (04:59)

47. Editing Levels (16:14)