I used React to make Tetris for company training.

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

this way (direction close to the speaker or towards the speaker)You 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 isthis way (direction close to the speaker or towards the speaker)If 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.

picture Description.
intro The first screen to be displayed. switch to the countdown screen by pressing the Start button.
countdown Count down and switch to the stage screen when the count reaches 0 or less.
stage The screen of the game itself. Switch to the result screen when the game is over.
result The screen to display the score. press the Retry button to switch to the countdown screen.

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.

key Description.
field Stores information about the board (which coordinates contain blocks of what color)
Fallen blocks will be reflected here after they have fallen.
dropBlock An object that stores information about the current falling block
- Size of the falling blocks (all 4 x 4, but just in case)
- Top left coordinate (changes as you move)
- What color block is at what coordinates (changes as you rotate)
nextDropBlock Stores the information of the next fallen block (the type of information to be stored is the same as dropBlock).
isDropped A flag to indicate whether a falling block has fallen or not. Switch this to start and end the turn.

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!

en_USEnglish