Create Red Light Green Light from Squid Game in React
In this video we create Red Light Green Light from Squid Game in React with TypeScript. We create an AI for the contestants and we create a contestant we can control!
Timestamps:
0:00 Welcome! Wat are we going to create?
0:20 Coding! Project setup.
1:40 Explaining! The entities.
2:40 Coding! Implementing the entities.
7:40 Coding! Creating components for the entities.
10:55 Coding! Playground children props.
12:00 Explaining! Destructuring.
13:25 Coding! Adding properties to the contestant.
15:40 Coding! Creating a list of contestants.
17:20 Coding! Initializing contestant list.
19:35 Coding! Updating the component state.
20:10 Challenge! Create 50 contestants.
21:35 Challenge! Randomize the x position.
23:18 Explaining! What is the game loop?
24:05 Coding! Implementing game loop.
26:28 Challenge! Move the contestants up.
27:35 Coding! Adding green light red light.
32:00 Coding! Adding a gameOver state.
34:50 Coding! GameOver CSS class.
36:55 Coding! Make contestants move more realistic.
37:55 Coding! Implementing the finish screen.
40:58 Coding! Styling the finished dialog.
43:30 Coding! Programming a player contestant.
45:18 Coding! Capturing onKeyDown event.
47:40 Coding! Moving the player.
48:20 Coding! Remaining player logic.
49:59 Demo! Playing the game!
50:52 Explaining! Future ideas.
51:08 Thanks for watching! See you next time :)
We start off initializing the project using the following command:
npx create-react-app redlightgreenlight --template typescript --use-npm
Then we break down the entities which we use, the playground, the finish, the doll and the contestants. For each entity we create a .tsx file which contains the component.
We want to render multiple contestants on the screen at once. So we create a useRef which holds an array of contestants. Using useEffect and useState we create our initial contestant array and render it on the screen.
Now that we have our contestants rendered we want to create a game loop, inside of this loop we put all the game logic. The first thing we add inside the loop is the logic to move contestants up.
After adding movement we implement the red light green light aspect, contestants will be game over when they try to run while it is red light. To make the contestants move more realistic their speeds will vary.
To finish it we implement the logic to control a contestant and by doing this we can play the game!
The code in this video can be found on the Frontend Coding GitHub repository:
https://github.com/FrontendCodingYT/c...