An interactive implementation of Conway's Game of Life built with React.
Live demo: https://the-game-of-life.netlify.app/
- Draw & erase cells on the grid using click or click-and-drag
- Shift the board in any direction
- Adjustable simulation speed via interval control
- Share boards using compressed URL codes
- Board history — states are auto-saved when the simulation starts and can be restored
- Stasis detection — simulation stops automatically when the board reaches a stable or empty state
- Node.js
- Yarn
yarn installyarn startOpens a dev server at http://localhost:8080 with hot reloading.
yarn buildOutput is written to dist/.
- Draw cells on the grid by clicking or dragging
- Press Play to start the simulation
- Use Pause to pause and continue drawing
- Press Reset to clear the board
- Copy the board code or shareable link to save or share your pattern
- Paste a board code into the loader to restore a pattern
Conway's Game of Life follows four rules:
- A live cell with fewer than 2 live neighbours dies (underpopulation)
- A live cell with 2 or 3 live neighbours survives
- A live cell with more than 3 live neighbours dies (overpopulation)
- A dead cell with exactly 3 live neighbours becomes alive (reproduction)
- React
- Webpack
- SCSS with CSS Modules
- pako + base-64 for board compression
- crc-32 for stasis detection
MIT