Building a JavaScript action-puzzle game (React JS)

This is a quick walkthrough of a quick game I created with React JS. We cover the general technical approach, level editor utility, and some struggles along the way.

00:00:00 Intro
00:01:05 Features
00:01:51 Technical approach
00:06:29 Level editor
00:08:13 Ciabatta Battle

🎮 Play the game on Itch:

⭐️ Get early access to my full JS Game Dev course:

💬 Join our Discord community:

Check out my full collection of JavaScript gamedev tutorials

Twitter:

[benixmaximus]

Very excited for this course! I'm relatively new to Dev. It would be great if you made a 'learn to code in react by making a game' type series. Maybe a space shooter would be fun.

[ActionKbob]

How is no one commenting about the fact that you've essentially made Chip's Challenge in React?! ...Maybe I'm just old

[joaosaraiva]

Awesome game! Love everything about it. It's well thought out and fun. The music is an added bonus, as it makes me want to play even more - it's so addictive

[MadnessLabs]

Glad you are back! Love the game, gives me Mad, Bomberman vibes. Happy coding! 🥼

[PattycakesGaming]

Ciabatta looks pretty tough, gonna have to take him down

[techjunky]

A tutorial for a round based pokemon or old school final fantasy like game with react and canvas would be awesome!

[worldbest]

wow!! where have you been lately! waited so long

[wailboug-os]

did u really made all of this with react, I can't believe 😳 as a junior react devoloper this is just insane !

[Mr.Wolf]

How long it took you to make this Master Piece?

[Arcyriea]

CRA is deprecated, so use Vite to create React instead.

[khaledsanny]

Oh great, you're back ! Honestly I thought you quited youtube or were dead :( (yeah, am little bit hardcore)

[DevlogBill]

just started learning React. Had no idea you could make games with React? Do you have to import a library for making games with React? Or are you only using React?

[tomnewton]

So how long did this end up taking, after scope creep kicked in? 😂Awesome project. Great work!

Tom

[Crealick]

Glad to see you're back! I've been trying to get into game development using React and almost thought it was not the right tool for games, this video gave me hope.

Game object approach seems really smart, do you use Zustand or similar library for game states? I'm trying to build a simple clicker game like Clicker Heroes where you click on enemies to deal damage and move to next stage etc.. But I ended up in useEffect hell that reacts to state changes with bunch of setTimeouts that messes up CSS sprite animations.

It somehow works but I don't think its scalable, would you recommend using something like requestAnimationFrame to act as a "game loop" for a simple clicker game? I'm very new to game dev concepts as a web dev and your videos helped a lot, thanks

[AlexanderShelestov]

But why not one of these cool frameworks and WebGL?

[guilherme]

Are the 45 videos teaching how to create the game, the builder or just showing the process of how you created it? I didn't understand if it would be a tutorial to create exactly this game step by step and complete

[Syeno]

Did you make your sounds? I really love the retro feel, would love to know more about your music and sounds <3

[angelhdzdev]

Hi! Do you plan working with Vue 3 and TypeScript?
Wish you all the best

[bv-]

do you recommend me to use canvas api with react to build games

[smexiking]

Can you make a video on how do earn money as a react developer? I'm just curious.