An implementation of Conway's Game of Life using React and Redux Zero.
See it live at https://olmsted.io/life
The Game of Life, also known simply as Life, is a cellular automaton devised by the British mathematician John Horton Conway in 1970. The "game" is a zero-player game, meaning that its evolution is determined by its initial state, requiring no further input.
The universe of the Game of Life is an infinite two-dimensional orthogonal grid of square cells, each of which is in one of two possible states, alive or dead, or "populated" or "unpopulated". Every cell interacts with its eight neighbours, which are the cells that are horizontally, vertically, or diagonally adjacent. At each step in time, the following transitions occur:
- Any live cell with fewer than two live neighbours dies, as if caused by underpopulation.
- Any live cell with two or three live neighbours lives on to the next generation.
- Any live cell with more than three live neighbours dies, as if by overpopulation. 4 Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.
"Conway's Game of Life", en.wikipedia.org
To install all dependencies:
To run all unit tests:
To spin up a development server at http://localhost:3000 and play the game of life!
To create a static build of the project that can be deployed:
The static site is dumped into
/build, which is not tracked in version control.
Playing the Game of Life
The Game of Life is a "zero-player game" – once the initial state of the grid is set, the game "plays" itself. However, we can change the initial state of the grid to prompt some interesting behaviors.
By default, the initial state of the grid is randomized. You can switch to a specific pattern by pressing the following keys:
g: switches to a Gosper Glider Gun.
s: switches to a Switch Engine.
n: switches to a Noah's Ark.
r: randomizes the state of the grid.
All source code is located under
Here's a simplified overview of the organization of
src ├── App.js # The root component of our application. ├── actions # Redux actions for changing application state. ├── components # React components to render the game of life. │ ├── cell │ └── grid ├── containers # Maps application state to the props in our components. ├── domain # The core logic of the game of life. │ └── helpers └── store # Sets up the initial application state.
Unit tests for source code are located under