Yet another Tetris clone with React

Murat Efe Aras — Sun, 08 Aug 2021 05:56:41 +0000

One more thing I wanted to add to the title was “and HTML elements” or “without Canvas” but I did not as It would make the title longer than the introduction. Before I started this small fun project I expected that using HTML elements would be the thing but it turned out that event handlers and react state was the thing.

This will be an article on tips and maybe tricks if you are a seasoned React developer who wants to develop a simple game while staying in the React territory. This is not a React gaming tutorial and if it was the only thing I would say would be “don’t! don’t develop a game with React!”.

On the other hand, developing a game in React definitely made me a better React developer and I strongly advise you to do it to improve your React skills if you have been a forms/lists/fetch developer since you started React development.

Before going over the tips I would like to inform you that all code is at https://github.com/efearas/yet-another-tetris-clone and feel free to use it in whatever way you want and if you want to give it a try: https://tetris-clone.s3.us-west-2.amazonaws.com/index.html

Tip 1: Game timer

While playing you may happen to think that you are in control as you are holding the controller but you are not, it is the game timer who is in charge of controlling the whole game and painting the next scene you are about to experience.

The problem about the timer(setInterval, setTimeout) which is actually an event(other event handlers also have the same problem) does not have access to the final state, what it has as a state is what state was present when the event was declared.

To overcome or maybe workaround this problem I created a state variable called timer and a useEffect function to watch this state variable which triggers a setTimeout to create a game loop.

const [timer, setTimer] = useState(0);

useEffect(
    () => {
        setTimer(1)
    }, []
)

useEffect(
    () => {
        if (timer > 0 && gameRunning) {
            tick();
            setTimeout(() => {
                setTimer(timer + 1);
            }, GAME_INTERVAL_MS);
        }
    }, [timer]
)

Tip 2: Handling key and swipe events

If you are updating state while handling an event, it gets tricky. The event handlers normally use the state when they were first declared not when they are executed. Thankfully there is an alternative version of “setState” function which takes a function as a parameter and feeds that function with the current state as a parameter. Please see useKeyDown hook for details.

const handleKeyDown = (e) => {
        setShapes(
            shapes => {                
                let movingBlock = Object.assign(Object.create(Object.getPrototypeOf(shapes.movingBlock)), shapes.movingBlock)

                switch (e.keyCode) {
                    case 39://right
                        movingBlock.moveRight(shapes.frontierAndStoppedBlocks);
                        break;
                    case 37://left
                        movingBlock.moveLeft(shapes.frontierAndStoppedBlocks);
                        break;
                    case 40://down
                        movingBlock.moveAllWayDown(shapes.frontierAndStoppedBlocks);
                        break;
                    case 38://up
                        movingBlock.rotate(shapes.frontierAndStoppedBlocks);
                        break;
                }

                let currentShapes = { ...shapes }
                currentShapes.movingBlock = movingBlock;
                return currentShapes;
            }
        )
    }

To handle the swipe events on mobile, I created the useSwipeEvents hook which just triggers keydown events that have already been implemented in useKeyDown.

Tip 3: Drawing shapes

All Tetris shapes consist of 4 squares positioned differently so what I did was to position 4 divs based on the shape type. There is a base class called Shape and the real shapes are derived from this class.

The points property of Shape class stores the points as an array of x and y values.

Tip 4: Moving shapes gracefully

Just applied the transition and transform css properties and the browser took it from there.

Do not worry about the calc and min css functions as they are for handling responsive layout. If you are targeting desktop or mobile only, then you will probably not need them.

const ShapeRender = ({ x, y, color, marginTop, transitionDuration }) => {
    return (
        <div  style={{
            backgroundColor: color,
            width: 'min(10vw,50px)',
            height: 'min(10vw,50px)',
            position: 'fixed',
            transition: transitionDuration ? transitionDuration : null,
            zIndex: 1,
            transform: `translate(min(calc(${x}*10vw),${x * 50}px), min(calc(${y}*10vw + ${marginTop}), calc(${y * 50}px + ${marginTop})))`,
        }} ></div>
    )
}

Tip 5: Flashing animation

When a row of blocks without a space collapses (the aim of the game) a flashing animation occurs on collapsing rows. I used keyframes and styled components to mimic lightning.

const Animation = keyframes`
    0%   { opacity: 0; }
    30%   { background-color: yellow; }
    50%   { background-color: orange; }
    70% { opacity: 0.7; }
    100% { opacity: 0; }
    `;

Tip 6: Rotating shapes

There are many different approaches involving Matrices. Please refer to https://stackoverflow.com/questions/233850/tetris-piece-rotation-algorithm for a thorough discussion. I chose the Ferit’s approach which is; first transpose the matrix representing the shape and then reverse the order of columns to rotate the shape clockwise.

The relevant code is in the rotate method of Shape base class. Since the square does not need to be rotated, the rotate method is overridden in inherited Square class.

 rotate(frontier) {
        this.rotationMatrix = reverseColumnsOfAMatrix(transpose(this.rotationMatrix));
        let leftMostX = Math.min(...this.points.map(([pointX, pointY]) => pointX))
        let topMostY = Math.min(...this.points.map(([pointX, pointY]) => pointY))        
        let newPointsArray = [];

        this.rotationMatrix.map(
            (row, rowIndex) =>
                row.map(
                    (col, colIndex) => {
                        if (col === 1) {
                            newPointsArray.push([leftMostX + colIndex, topMostY + rowIndex])
                        }
                    }

                )
        );

        if (this.isPointsInsideTheFrontier(newPointsArray, frontier))
            return this;

        this.points = newPointsArray;
        return this;
    }

Closing Notes

As Kent C. Dodds says: "I think too many people go from "passing props" -> "context" too quickly." (https://kentcdodds.com/blog/application-state-management-with-react) , I stayed away using Context as much as I can and most of the application state is on component level or using props. Avoid over-engineering and enjoy simplicity!

How to useContext and set value of context in child components in 3 steps

Murat Efe Aras — Thu, 16 Jan 2020 17:59:02 +0000

1- Create a Context constant and export it

We will import this constant(const) in all functions which we will be using the context. I will name the file Context.js

//Context.js

import React from "react";
export const Context = React.createContext();

2- In App.js Import and provide the context to all Functional Components

//App.js

import React, { useState } from "react";
import { Context } from "./Context.js";

import ComponentA from "./ComponentA";
import ComponentB from "./ComponentB";

export default function App() {
  const [context, setContext] = useState("default context value");
  return (
    <Context.Provider value={[context, setContext]}>
      <ComponentA />
      <ComponentB />
    </Context.Provider>
  );
}

To do that we do 3 things :)

a- Import the Context we created in 1st step
b- Create a state (via useState) which we will share between components.
c- Wrap components with Context.Provider and pass the state(context) and a function(setContext) to update the state which we created in step b.

3- Consume and set/change value of the context in child components.

//ComponentA.js

import React, { useContext } from "react";
import { Context } from "./Context";

export default function ComponentA() {
  const [context, setContext] = useContext(Context);
  return (
    <div>
      ComponentA:
      <button onClick={() => setContext("New Value")}>
        Change Context Value
      </button>
    </div>
  );
}

//ComponentB.js

import React, { useContext } from "react";
import { Context } from "./Context";

export default function ComponentB() {
  const [context, setContext] = useContext(Context);
  return <div>ComponentB: {context}</div>;
}

To consume and change the value of context:

a- Import Context we created in step 1.
b- Import useContext from "react"
c- Consume value of context via useContext and use it like a state variable (see ComponentB)
d- Change the value via setContext function which we get from useContext (see ComponentA)

Forem: Murat Efe Aras