An implementation of Conway's Game of Life built in React over the course of 1 week.
View the deployed project here.
Conway's Game of Life
The Game of Life, devised by British mathematician John Horton Conway in 1970, is a widely known example of a cellular automaton. This zero-player game takes place on a 2D grid and consists of a simple set of rules that changes the state of each cell to either "alive" or "dead" based on its neighborhood (i.e., the states of the 8 cells surrounding it).
To “play” the game, simply create an initial configuration (or select one of the preset patterns) and click Start to watch how it evolves.
The Rules
- Any live cell with fewer than 2 live neighbors dies, as if by underpopulation
- Any live cell with 2 or 3 live neighbors lives on to the next generation
- Any live cell with more than 3 live neighbors dies, as if by overpopulation
- Any dead cell with exactly 3 live neighbors becomes a live cell, as if by reproduction
TODO:
- The simulation runs slower for larger grids. Given more time, look into other implementation options to improve runtime.
- Currently, this implementation does not use global state. Because the project is relatively small and simple, passing props is not a huge problem, but setting up global state (perhaps via Context API) could simplify further.
- Polish up UI further, especially in the customize/controls section below the grid.
- The pattern preset buttons are currently styled as regular buttons; style them like the grid size buttons (i.e., like a radio button that remains selected when active).
- Selecting new cells while the simulation is running has been disabled. May want to look into disabling other controls and features while simulation is running as well.
- Look into adding additional preset patterns (somewhat limited by small size of 10x10 grid)