A web-based implementation of Conway's Game of Life featuring team-based gameplay, advanced AI behaviors, performance monitoring, and comprehensive analytics.
- Team-based Competition: Four teams (Red, Blue, Green, Yellow) compete for dominance
- Multiple Game Rules: Conway's classic rules plus variants (HighLife, Day & Night, Seeds, etc.)
- Interactive Canvas: Click and drag to place cells, zoom and pan controls
- Pattern Library: Pre-built patterns including gliders, oscillators, and spaceships
- Battle Scenarios: Pre-configured competitive setups
- AI Behaviors: Configurable team intelligence, aggressiveness, and cooperation
- WebWorker Optimization: Background processing for large simulations
- Performance Monitoring: Real-time FPS, memory usage, and optimization recommendations
- Analytics Dashboard: Population tracking, battle statistics, formation detection
- GIF Recording: Capture and share simulations as animated GIFs
- Save/Load System: Persistent game states with scenario management
- Keyboard Shortcuts: Full keyboard navigation and accessibility
- ES6 Modules: Modern JavaScript architecture with proper module system
- Responsive Design: Works on desktop and mobile devices
- Error Handling: Comprehensive error management and recovery
- Memory Management: Automatic cleanup and optimization
- Extensible Architecture: Modular design for easy feature additions
- CI/CD Ready: Complete testing and deployment pipeline
- Python: 3.8 or higher
- Node.js: 16 or higher (for development and testing)
- Modern Browser: Chrome, Firefox, Safari, or Edge with ES6 module support
- Git: For version control
git clone https://github.com/Hack-Pac/zeroplayergame.git
cd zeroplayergame
# Create and activate virtual environment
python -m venv venv
source venv/bin/activate # On Windows: venv\Scripts\activate
# Install Python dependencies
pip install -r requirements.txt
# Run the application
python app.pyFor development with testing and linting:
# Install development dependencies
pip install -r requirements-dev.txt
npm install
# Run tests
npm test
# Run linter
npm run lint
# Format code
npm run format- Click/Drag: Draw cells on the canvas
- Space: Play/Pause simulation
- C: Clear the board
- R: Randomize the board
- Mouse Wheel: Zoom in/out
- Right Click + Drag: Pan the canvas
- 1-4: Select team colors
- P: Toggle performance monitor
- A: Toggle analytics dashboard
- G: Start/stop GIF recording
- S: Quick save
- L: Quick load
- H: Help system
- F: Fit to screen
- Escape: Reset view
Access team settings to configure:
- Intelligence: How smart teams are at strategic decisions
- Aggressiveness: Likelihood to convert enemy cells
- Fear: Tendency to avoid larger opposing teams
- Cooperation: Willingness to form alliances
- Herd Behavior: How closely cells stick together
- Birth: Dead cell with exactly 3 neighbors becomes alive
- Survival: Live cell with 2 or 3 neighbors survives
- Death: Live cell with fewer than 2 or more than 3 neighbors dies
- HighLife: Birth on 3 or 6 neighbors
- Day & Night: Birth on 3,6,7,8; Survival on 3,4,6,7,8
- Seeds: Birth on 2 neighbors, no survival
- Life 3-4: Birth and survival on 3 or 4 neighbors
The codebase uses ES6 modules for clean separation of concerns:
game.js: Main game logic, canvas rendering, and Conway's rules implementationgameWorker.js: WebWorker for background computation of large gridsconstants.js: Game constants, team colors, rule sets, and configurationpatterns.js: Pattern definitions, loading functions, and team assignment
camera.js: Viewport management, zoom/pan controls, and coordinate transformsmain.js: Application entry point and initializationhelp.js: Interactive help system and tutorial guidancepixelFont.js: Custom pixel font rendering for retro aesthetics
analytics.js: Battle statistics, population tracking, and formation detectionadvancedAI.js: Team AI behaviors, strategies, and decision makingperformance.js: Performance monitoring, FPS tracking, and optimization recommendationsteamConfig.js: Team behavior configuration and AI parameter tuning
gifRecorder.js: GIF creation, frame capture, and export functionalitygifShowcase.js: Community showcase management and sharing features
- WebWorker Processing: Large computations run in background threads
- Spatial Optimization: Only processes active regions with live cells
- Memory Management: Automatic cleanup of analytics history and old data
- Canvas Optimization: Efficient rendering with viewport culling
- Batch Updates: Multiple generations computed together for speed
├── js/ # JavaScript modules
│ ├── game.js # Main game engine
│ ├── gameWorker.js # Background processing
│ ├── analytics.js # Battle analytics
│ ├── advancedAI.js # AI behaviors
│ ├── performance.js # Performance monitoring
│ ├── patterns.js # Pattern library
│ ├── camera.js # Viewport controls
│ ├── main.js # Application entry point
│ ├── teamConfig.js # Team configuration
│ ├── gifRecorder.js # GIF recording
│ ├── gifShowcase.js # Community features
│ ├── help.js # Help system
│ ├── pixelFont.js # Custom font rendering
│ └── vendor/ # Third-party libraries
│ ├── gif.js # GIF creation library
│ └── gif.worker.js # GIF worker thread
├── tests/ # Jest test suites
│ ├── game.test.js # Core game logic tests
│ ├── patterns.test.js # Pattern loading tests
│ └── analytics.test.js # Analytics functionality tests
├── app.py # Flask server
├── game_of_life.py # Python implementation
├── index.html # Main HTML file
├── style.css # Application styling
├── package.json # Node.js dependencies and scripts
├── jest.config.js # Jest testing configuration
├── requirements.txt # Python production dependencies
└── requirements-dev.txt # Python development dependencies
The project uses Jest for JavaScript testing with ES6 module support:
# Run all tests
npm test
# Run tests in watch mode
npm run test:watch
# Run with coverage
npm test -- --coverage
# Run specific test file
npm test patterns.test.jsThe Jest configuration (jest.config.js) is set up for ES6 modules:
- Uses Node.js experimental VM modules
- Environment set to jsdom for DOM testing
- ES6 module transformation enabled
game.test.js: Core game logic, Conway's rules, team detection, grid managementpatterns.test.js: Pattern loading, positioning, team assignment, validationanalytics.test.js: Battle statistics, population tracking, data accuracy
All tests use simplified mock objects instead of complex Jest mocking for better ES6 module compatibility.
# Lint JavaScript code
npm run lint
# Fix linting issues automatically
npm run lint:fix
# Format code with Prettier
npm run format
# Run Python linting (requires dev dependencies)
pylint *.py
# Format Python code
black *.pyThe project includes ESLint rules for:
- ES6 module syntax
- Modern JavaScript features
- Code consistency
- Best practices
Create .github/workflows/ci.yml for automated testing:
name: CI/CD Pipeline
on:
push:
branches: [ main, develop ]
pull_request:
branches: [ main ]
jobs:
test:
runs-on: ubuntu-latest
strategy:
matrix:
python-version: [3.8, 3.9, '3.10', '3.11', '3.12']
node-version: [16, 18, 20]
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Set up Python ${{ matrix.python-version }}
uses: actions/setup-python@v4
with:
python-version: ${{ matrix.python-version }}
- name: Set up Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'
- name: Install Python dependencies
run: |
python -m pip install --upgrade pip
pip install -r requirements.txt
pip install -r requirements-dev.txt
- name: Install Node.js dependencies
run: npm ci
- name: Run JavaScript tests
run: npm test
- name: Run JavaScript linting
run: npm run lint
- name: Run Python linting
run: |
pylint *.py
black --check *.py
- name: Test application startup
run: |
timeout 10s python app.py || true
security:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Run security audit
run: |
npm audit --audit-level high
pip-audit --require-hashes --descThe project uses two requirements files:
-
requirements.txt: Production dependenciespygame==2.5.2 numpy>=1.20.0,<1.25.0 Flask==2.3.3 -
requirements-dev.txt: Development and testing dependencies-r requirements.txt pytest>=7.0.0 pylint>=2.15.0 black>=22.0.0 pip-audit>=2.6.0
Key development dependencies in package.json:
{
"devDependencies": {
"jest": "^29.7.0",
"eslint": "^8.57.0",
"prettier": "^3.0.0"
},
"scripts": {
"test": "NODE_OPTIONS='--experimental-vm-modules' jest",
"lint": "eslint js/**/*.js --ignore-pattern 'js/vendor/**'",
"format": "prettier --write js/**/*.js"
}
}# Standard development server
python app.py
# Development with auto-reload
export FLASK_ENV=development
flask run --reload# Install production WSGI server
pip install gunicorn
# Run with Gunicorn
gunicorn -w 4 -b 0.0.0.0:8000 app:app
# With additional configuration
gunicorn --config gunicorn.conf.py app:appFROM python:3.11-slim
WORKDIR /app
# Install system dependencies
RUN apt-get update && apt-get install -y \
gcc \
&& rm -rf /var/lib/apt/lists/*
# Install Python dependencies
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt
# Copy application
COPY . .
# Expose port
EXPOSE 5000
# Health check
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
CMD curl -f http://localhost:5000/ || exit 1
# Run application
CMD ["python", "app.py"]The project uses NumPy version constraints for Python compatibility:
# If you encounter build errors, update pip first
python -m pip install --upgrade pip
# The project specifies compatible NumPy versions
# For Python 3.8-3.11: numpy>=1.20.0,<1.25.0
# For Python 3.12+: numpy>=1.24.0
# Force reinstall if needed
pip install --force-reinstall "numpy>=1.20.0,<1.25.0"The testing setup uses experimental VM modules:
# The NODE_OPTIONS flag is set in package.json scripts
# If running Jest directly, use:
NODE_OPTIONS='--experimental-vm-modules' npx jest
# Or ensure your Node.js version supports ES modules (16+)
node --versionUse the built-in performance monitor:
- Press 'P' to toggle performance panel
- Monitor FPS, update time, and memory usage
- Reduce grid size for better performance
- Enable WebWorker processing for large simulations
Requirements for full functionality:
- ES6 module support (Chrome 61+, Firefox 60+, Safari 11+)
- WebWorker support for background processing
- Canvas 2D context for rendering
- Modern JavaScript features (async/await, classes, etc.)
The application includes comprehensive memory management:
- Analytics history limited to prevent memory leaks
- GIF showcase has storage limits and cleanup
- Performance monitor tracks memory usage in real-time
- Automatic cleanup of unused resources and event listeners
Built-in error handling covers:
- Pattern loading failures with fallback patterns
- WebWorker communication errors
- Canvas rendering issues
- Memory allocation problems
- Network connectivity issues for GIF sharing
// Main game instance
const game = new GameOfLife();
// Public methods
game.start() // Begin simulation
game.stop() // Pause simulation
game.step() // Advance one generation
game.clear() // Clear all cells
game.randomize() // Fill with random cells
game.loadPattern(name) // Load predefined pattern
game.setTeam(team) // Set active team (1-4)
game.resize(width, height) // Change grid dimensions// Analytics instance (auto-created with game)
const analytics = game.analytics;
// Methods
analytics.getPopulationData() // Current population stats
analytics.getBattleStats() // Team battle statistics
analytics.getFormations() // Detected formations
analytics.getRecommendations() // Performance suggestions
analytics.exportData() // Export analytics as JSON// Performance monitoring
const monitor = game.performanceMonitor;
// Methods
monitor.toggle() // Enable/disable monitoring
monitor.getMetrics() // Current performance metrics
monitor.getRecommendations() // Optimization suggestions- Fork the repository
- Create a feature branch:
git checkout -b feature-name - Make your changes following the code standards
- Add tests for new functionality
- Run the test suite:
npm test - Run linting:
npm run lint - Commit with descriptive messages
- Push and create a pull request
- Use ES6+ features and modern syntax
- Follow ESLint configuration rules
- Use JSDoc comments for public methods
- Prefer const/let over var
- Use arrow functions where appropriate
- Handle errors gracefully
- Follow PEP 8 style guidelines
- Use type hints where helpful
- Write docstrings for functions and classes
- Handle exceptions appropriately
- Write unit tests for new features
- Test both success and error cases
- Use descriptive test names
- Mock external dependencies appropriately
- Aim for good test coverage
- Include a clear description of changes
- Reference any related issues
- Include tests for new functionality
- Ensure all tests pass
- Update documentation as needed
- Keep changes focused and atomic
MIT License - see LICENSE file for details.
- Original Conway's Game of Life concept by John Conway
- gif.js library for GIF generation capabilities
- Jest testing framework for comprehensive testing
- Flask web framework for server functionality
- ESLint and Prettier for code quality tools
npm install
python app.py
### Development Setup
For development with testing and linting:
```bash
# Install development dependencies
pip install -r requirements-dev.txt
npm install
# Run tests
npm test
# Run linter
npm run lint
# Format code
npm run format
- Click/Drag: Draw cells on the canvas
- Space: Play/Pause simulation
- C: Clear the board
- R: Randomize the board
- Mouse Wheel: Zoom in/out
- Right Click + Drag: Pan the canvas
- 1-4: Select team colors
- P: Toggle performance monitor
- A: Toggle analytics dashboard
- G: Start/stop GIF recording
- S: Quick save
- L: Quick load
- H: Help system
- F: Fit to screen
- Escape: Reset view
Access team settings to configure:
- Intelligence: How smart teams are at strategic decisions
- Aggressiveness: Likelihood to convert enemy cells
- Fear: Tendency to avoid larger opposing teams
- Cooperation: Willingness to form alliances
- Herd Behavior: How closely cells stick together
- Birth: Dead cell with exactly 3 neighbors becomes alive
- Survival: Live cell with 2 or 3 neighbors survives
- Death: Live cell with fewer than 2 or more than 3 neighbors dies
- HighLife: Birth on 3 or 6 neighbors
- Day & Night: Birth on 3,6,7,8; Survival on 3,4,6,7,8
- Seeds: Birth on 2 neighbors, no survival
- Life 3-4: Birth and survival on 3 or 4 neighbors
The codebase uses ES6 modules for clean separation of concerns:
game.js: Main game logic and canvas renderinggameWorker.js: WebWorker for background computationconstants.js: Game constants and configurationpatterns.js: Pattern definitions and loading
camera.js: Viewport management and zoom/pan controlskeyboard.js: Keyboard shortcuts and accessibilityhelp.js: Interactive help systemtutorial.js: Step-by-step onboarding
analytics.js: Battle statistics and population trackingadvancedAI.js: Team AI behaviors and strategiesperformance.js: Performance monitoring and optimizationteamConfig.js: Team behavior configuration
gifRecorder.js: GIF creation and exportgifShowcase.js: Community showcase managementsaveLoad.js: Game state persistence
battleScenarios.js: Pre-configured competitive setupserrorHandling.js: Error management and recovery
- WebWorker Processing: Large computations run in background threads
- Spatial Optimization: Only processes active regions
- Memory Management: Automatic cleanup of old data
- Canvas Optimization: Efficient rendering with viewport culling
- Batch Updates: Multiple generations computed together
├── js/ # JavaScript modules
│ ├── game.js # Main game engine
│ ├── gameWorker.js # Background processing
│ ├── analytics.js # Battle analytics
│ ├── advancedAI.js # AI behaviors
│ ├── performance.js # Performance monitoring
│ └── vendor/ # Third-party libraries
├── tests/ # Jest test suites
│ ├── game.test.js # Core game tests
│ ├── patterns.test.js # Pattern loading tests
│ └── analytics.test.js # Analytics tests
├── app.py # Flask server
├── index.html # Main HTML file
├── style.css # Styling
├── package.json # Node.js dependencies
├── jest.config.js # Test configuration
└── requirements.txt # Python dependencies
The project uses Jest for JavaScript testing with ES6 module support:
# Run all tests
npm test
# Run tests in watch mode
npm run test:watch
# Run with coverage
npm test -- --coverage- Unit Tests: Individual module functionality
- Integration Tests: Component interaction testing
- Pattern Tests: Verify pattern loading and positioning
- Analytics Tests: Battle statistics accuracy
# Lint JavaScript code
npm run lint
# Fix linting issues automatically
npm run lint:fix
# Format code with Prettier
npm run format
# Run Python linting (requires dev dependencies)
pylint *.py
# Format Python code
black *.pyCreate .github/workflows/ci.yml:
name: CI
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
strategy:
matrix:
python-version: [3.8, 3.9, '3.10', '3.11']
node-version: [16, 18, 20]
steps:
- uses: actions/checkout@v3
- name: Set up Python ${{ matrix.python-version }}
uses: actions/setup-python@v3
with:
python-version: ${{ matrix.python-version }}
- name: Set up Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
- name: Install Python dependencies
run: |
python -m pip install --upgrade pip
pip install -r requirements.txt
pip install -r requirements-dev.txt
- name: Install Node.js dependencies
run: npm install
- name: Run Python tests
run: |
python -m pytest --verbose
pylint *.py
- name: Run JavaScript tests
run: |
npm test
npm run lint
- name: Test application startup
run: |
timeout 10s python app.py || true# Update requirements.txt
pip freeze > requirements.txt
# Security audit
pip-audit
# Update packages
pip install --upgrade -r requirements.txt# Check for vulnerabilities
npm audit
# Fix vulnerabilities
npm audit fix
# Update packages
npm updatepython app.py
# Access at http://localhost:5000# Use production WSGI server
pip install gunicorn
gunicorn -w 4 -b 0.0.0.0:8000 app:appFROM python:3.11-slim
WORKDIR /app
COPY requirements.txt .
RUN pip install -r requirements.txt
COPY . .
EXPOSE 5000
CMD ["python", "app.py"]If you encounter NumPy build errors:
# Update pip first
python -m pip install --upgrade pip
# Install with pre-built wheel
pip install numpy --only-binary=numpy
# For older Python versions, use compatible NumPy
pip install "numpy>=1.20.0,<1.25.0"For ES6 module testing problems:
# Ensure Node.js experimental VM modules flag is set
export NODE_OPTIONS="--experimental-vm-modules"
# Or use package.json scripts which include the flag
npm test- Reduce grid size for better performance
- Enable WebWorker processing for large simulations
- Monitor memory usage in Performance panel
- Use spatial optimization for sparse grids
- Modern browsers required for ES6 modules
- WebWorker support needed for background processing
- Canvas 2D context required for rendering
The application includes automatic memory management:
- Analytics history is limited to prevent memory leaks
- GIF showcase has maximum storage limits
- Performance monitor tracks memory usage
- Automatic cleanup of unused resources
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests for new functionality
- Run the test suite
- Submit a pull request
- Use ES6 modules and modern JavaScript features
- Follow existing code style and naming conventions
- Add JSDoc comments for public methods
- Include unit tests for new features
- Run linting and formatting before commits
MIT License - see LICENSE file for details.
- Original Conway's Game of Life concept by John Conway
- gif.js library for GIF generation
- Jest testing framework
- Flask web framework
The project requires:
- `pygame==2.5.2` - For the Python implementation
- `numpy==1.26.4` - For array operations
### 4. Run the Application
```bash
python app.py
The application will start on http://localhost:5000
- Click/Drag - Draw cells on the canvas
- Space - Play/Pause the simulation
- C - Clear the board
- R - Randomize the board
- Mouse Wheel - Zoom in/out
- Right Click + Drag - Pan the canvas
Select a team color from the radio buttons to place colored cells. Teams compete for dominance on the board.
Access pre-built patterns including:
- Glider
- Glider Gun
- Pulsar
- Pentadecathlon
- And more!
- Click the camera button to start recording
- Let the simulation run
- Click stop to generate a GIF
- Share your creation to the community showcase
- 1-5 - Quick team selection
- +/- - Zoom in/out
- G - Toggle grid
- H - Show help
zeroplayergame/
├── app.py # Flask server
├── index.html # Main HTML page
├── style.css # Styling
├── game.js # Game logic (duplicate)
├── game_of_life.py # Python implementation
├── requirements.txt # Python dependencies
└── js/ # JavaScript modules
├── camera.js # Camera controls
├── constants.js # Game constants
├── game.js # Main game logic
├── gifRecorder.js # GIF recording
├── gifShowcase.js # Community showcase
├── help.js # Help modal
├── main.js # Entry point
├── patterns.js # Pattern library
├── pixelFont.js # Pixel font rendering
├── teamConfig.js # Team configuration
└── vendor/ # Third-party libraries
├── gif.js # GIF creation library
└── gif.worker.js
The standalone Python version (game_of_life.py) offers advanced features for experimentation and analysis:
- Particle effects for cell births and deaths
- Trail systems showing cell evolution patterns
- Glow effects highlighting active regions
- Customizable particle behaviors and lifespans
- Dynamic audio generation based on simulation events
- Frequency modulation reflecting population density
- Harmonic patterns corresponding to stable structures
- Real-time synthesis without external audio files
- Brush Tool: Variable size cell painting with pressure sensitivity
- Line Tool: Precise straight-line cell placement
- Rectangle Tool: Rapid area filling and clearing
- Circle Tool: Circular pattern generation
- Erase Tool: Selective cell removal with adjustable radius
- Population statistics and growth rate analysis
- Pattern recognition and classification
- Spatial distribution mapping
- Performance profiling and optimization data
# Install dependencies
pip install pygame numpy
# Run the enhanced version
python game_of_life.pyThe Python implementation serves as a testing ground for new features and provides a foundation for advanced Conway's Game of Life research.
Modify app.py to change:
- Port: Default is 5000
- Host: Default is '0.0.0.0' (accessible from network)
- Debug mode: Set to False for production
Edit js/constants.js to modify:
- Grid size
- Cell size
- Animation speed
- Team colors
- Pattern definitions
The Flask server runs with debug mode enabled by default:
python app.pyThis enables:
- Auto-reload on file changes
- Detailed error messages
- Debug toolbar
- Frontend changes: Edit files in
js/directory - Styles: Modify
style.css - Backend: Update
app.py(minimal backend logic)
No automated tests are currently configured. Test manually by:
- Drawing patterns and verifying evolution
- Testing all UI controls
- Verifying GIF recording works
- Checking team interactions
Port Already in Use
# Kill process on port 5000
# On macOS/Linux:
lsof -ti:5000 | xargs kill -9
# On Windows:
netstat -ano | findstr :5000
taskkill /PID <PID> /FModule Import Errors
- Ensure virtual environment is activated
- Reinstall requirements:
pip install -r requirements.txt
GIF Recording Not Working
- Check browser console for errors
- Ensure sufficient memory for GIF creation
- Try smaller recording areas
Canvas Performance Issues
- Reduce grid size in constants
- Use Chrome for best performance
- Clear board between simulations
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
- JavaScript: Use ES6+ features
- Python: Follow PEP 8
- Comment complex logic
- Keep functions focused and small
This project is open source. Please check the repository for license details.
- Conway's Game of Life created by John Conway
- GIF.js library for GIF creation
- Flask framework for web serving