learningBOX, Inc.

Hello! I'm Hashimoto, who recently joined the Development Department.
When you join the development department at our company, one of the training sessions is to "make something using JavaScript", and I made Tetris using React, so I'd like to introduce it.

Click here for table of contents

• 1. tetris created using React
• 2. the technology used to create Tetris
• 3. explanation of the source code
• 4. summary

Tetris created using React

 hereYou can actually play in
(Press the audio icon in the upper right corner of the screen to play background music and sound effects.

I think I've managed to create something that's almost Tetris-like.
The source code is hereIf you want to see the details of the implementation, you can check it from

The technology used to create Tetris

- React
- TypeScript
- Chakra UI

Since the training was free to use any technology as long as it used JavaScript, we were able to use the React and TypeScriptI personally wanted to use it for the style and Chakra UI I used the

I also implemented it by actively using the Hooks that were added in React 16.8.
Instead of using canvas, which is often used to draw the screen, I used only React's state updates.

Source Code Description

I'll let you look at the source code for the details, but I'll give you a quick description of the game.

screen composition

Four screens were created.

To switch screens scene This is done by creating a state called

        {scene === "intro" ? (
           setScene("countDown")} />
        ) : scene === "countDown" ? (
           setScene("stage")}
            isSoundOn={isSoundOn}
          />
        ) : scene === "stage" ? (
           />
        ) : (
          scene === "result" && (
             setScene("countDown")} /> />
          )
        )}

Processing flow of the main part of the game

When you move to the stage screen, Tetris will start automatically.

1. start of turn
2. move or rotate the falling block to the left or right by keyboard operation. Fall at regular intervals.
3. the falling block will fall to the bottom
4. judgment of game over (in case of game over, move to result screen)
5. prepare a board that reflects the falling blocks
6. determine which line to delete
7. update grades according to the number of missing lines
8. prepare the board after erasing the lines
9. prepare the next falling block
10. update the board, falling block, and next falling block
11. start next turn

The above sequence of operations is one turn, andturnState object called "state" to manage multiple states as the turn progresses.

The following is the part that initializes turnState.

  const [turnState, setTurnState] = useState({
    field: [. .Array(FIELD_SIZE.rows * FIELD_SIZE.columns)],
    dropBlock: createBlock(),
    nextDropBlock: createBlock(),
    isDropped: false,
  });

What kind of information is managed by each of them is as follows.

The game is run by updating these states each time.

summary

That's all for now, I made Tetris using React for company training!
It was the first time I made a game with React, so I had to take into account drawing timing, which was a struggle, but I think I learned a lot by looking up Hooks again, which I had been using for some time.

I also wanted to use the Chakra UI for styling on other occasions, since it's easy to write crisply once you get used to it.
You should try to make a game with React if you want!