Deviopath › React

Game of Life

Hard · Games

Build Conway's Game of Life on a fixed 5x5 grid.

Render the 25 cells as <button> elements (row by row) with data-row and data-col attributes (0-4). Every cell has the class cell; living cells also have the class alive (className="cell alive").

At the start, the cells in row 2, columns 1, 2 and 3 are alive (a "blinker"). Clicking a cell toggles it between alive and dead.

A "Step" button computes the next generation with the classic rules:

- a living cell with 2 or 3 living neighbours stays alive, otherwise it dies

- a dead cell with exactly 3 living neighbours becomes alive

Neighbours are the 8 surrounding cells. The grid does not wrap around: cells outside the grid count as dead.

Also show <p className="generation">Generation: 0</p> and increase the number on every Step.

Next: Calculator