DEV Community

Cover image for React: Conway's Game of Life.
Utkarsh Yadav
Utkarsh Yadav

Posted on

React: Conway's Game of Life.

Table of Content

  • What is Conway's Game of Life
  • Rules of the Game.
  • Coding out the simulation using React
  • CodeSandBox Playground

What is Conway's Game of Life

The Game of Life, also known simply as Life, is a cellular automaton devised by the British mathematician John Horton Conway in 1970. It is a zero-player game, meaning that its evolution is determined by its initial state, requiring no further input. One interacts with the Game of Life by creating an initial configuration and observing how it evolves.

View full details for the Game here

Rule of the Game

  • Any live cell with fewer than two live neighbors dies, as if by underpopulation.
  • Any live cell with two or three live neighbors lives on to the next generation.
  • Any live cell with more than three live neighbors dies, as if by overpopulation.
  • Any dead cell with exactly three live neighbors becomes a live cell, as if by reproduction.

Coding out simulator using React

Generating Empty Grid (our first task)

  • The total number of Row and columns for the grid is to be set initially.

Note: Totally depends as per the requirement. The best is to use 30/30.

const numRows = 30;
const numCols = 30;
Enter fullscreen mode Exit fullscreen mode
const generateEmptyGrid = () => {
    const rows = [];
    for (let i = 0; i < numRows; i++) {
      rows.push(Array.from(Array(numCols), () => 0));
    }
    return rows;
  };
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • we used Array rows [] length of numRows: 30
  • For every row index we are pushing numCols: 30 columns.
  • This function will be later used as a clear function to clear, to set the grid to empty.
[   {1, 2, 3, ...., 30},
    {1, 2, 3, ...., 30},
    .
    .
    30th row    ]
Enter fullscreen mode Exit fullscreen mode

Putting Random stuff on the grid

Requirement: Button and funtion

  • Creating Function generateRandomStuff()
 const generateRandomStuff = () => {
    const rows = [];
    for (let i = 0; i < numRows; i++) {
      rows.push(
        Array.from(Array(numCols), 
       () => (Math.random() > 0.5 ? 1 : 0))
      );
    }
    return rows;
  };
Enter fullscreen mode Exit fullscreen mode
  • In this function, we are actually randomizing the column's number and choosing random columns in each row and if the Math.Random() value for the columns is greater than 0.5 we put that 1: black else 0:cleared;

State management for setting Random Stuff and clearing the stuff from the grid

const [grid, setGrid] = useState(() => {
    return generateEmptyGrid();
  });
Enter fullscreen mode Exit fullscreen mode
  • using use State: we can do the state management for the grid.
  • Initially: The grid is set to empty.

Generate Random stuff: TO do this we will call for the function

const generateRandomStuff = () =>
Enter fullscreen mode Exit fullscreen mode

and set it in grid : setGrid(generateRandomStuff())

 <button
    onClick={() => {
       setGrid(generateRandomStuff());
      }}>
      Random Stuff
</button>
Enter fullscreen mode Exit fullscreen mode

Alt Text

Generate Empty Grid: To do this we will call for the function

const generateEmptyGrid = () =>
Enter fullscreen mode Exit fullscreen mode

and set it in Empty the grid : setGrid(generateEmptyGrid())

 <button
    onClick={() => {
      setGrid(generateEmptyGrid());
       }}>
    Clear
</button>
Enter fullscreen mode Exit fullscreen mode

Alt Text

Running Simulation (Logic) :)

  • For the simulation we need some preprocessing.
const redundant = [
  [0.1],
  [0, -1],
  [1, -1],
  [-1, 1],
  [1, 1],
  [-1, -1],
  [1, 0],
  [-1, 0]
];
Enter fullscreen mode Exit fullscreen mode

an array is taken with all steps, where we can move

  • We can move in all eight directions in the grid.
 const [Simulation, setSimulation] = useState(false);

  const runningRef = useRef(Simulation);
  runningRef.current = Simulation;

  const runSimulation = useCallback(() => {
    if (!runningRef.current) {
      return;
    }
    setGrid((g) => {
      return produce(g, (gridCopy) => {
        for (let i = 0; i < numRows; i++) {
          for (let k = 0; k < numCols; k++) {
            let neighbors = 0;
            redundant.forEach(([x, y]) => {
              const newI = i + x;
              const newK = k + y;
              if (newI >= 0 && newK >= 0 && newI < numRows && newK < numCols) {
                neighbors += g[newI][newK];
              }
            });
            if (neighbors < 2 || neighbors > 3) {
              gridCopy[i][k] = 0;
            } else if (g[i][k] === 0 && neighbors === 3) {
              gridCopy[i][k] = 1;
            }
          }
        }
      });
    });
    setTimeout(runSimulation, 100);
  }, []);
Enter fullscreen mode Exit fullscreen mode
  • we will make a state simulation and setStimulation which will be initially false. and will be triggered to true using the button.
  • const runSimulation = useCallback(() =>{}: here we will be using callback function.

  • Logic:

    • we will traverse the grid from index {0,0} to {numRows,numCols}
    • Take a counter for the neigbours.

What we exactly want is:

  1. if there is a cell in the grid which is set with exactly 2 or 3 neighbors in any of the direction.
  2. if there is a cell in the grid that is not set and has three set or live neighbors become set or live.
  3. All other cells that are set or live are now set to dead or unset, whereas all unset will remain unset.
 redundant.forEach(([x, y]) => {
              const newI = i + x;
              const newK = k + y;
              if (newI >= 0 && newK >= 0 && newI < numRows && newK < numCols) {
                neighbors += g[newI][newK];
              }
            });
Enter fullscreen mode Exit fullscreen mode
  • we will move in 8 directions from redundant array
  • following the above rule we have written, three cases.

After completion of the simulation, we run the function once after the interval of time.

For this we use setTimeout(runSimulation, 100);

  • Button for the simulation.
<button onClick={() => {
     setSimulation(!Simulation);
       if (!Simulation) {
           runningRef.current = true;
           runSimulation();
         }
       }} >
{Simulation ? "Stop" : "start"} Simulation
</button>
Enter fullscreen mode Exit fullscreen mode

Alt Text

Note: Using immer for mutating the state.

If you like the content. kindly let me know.

Happy Coding.

Top comments (1)

Collapse
 
markhker profile image
Mark Hkr 😎

There is a small error that causes mistakes in the algorithm.
In the firs item of the redundant variable you have [0.1] and it should be [0, 1]
With that fixed, the program run as expected.
Cheers, great tutorial.