Conway's Game of Life - Gosper Glider Gun
Generate the complete HTML, CSS, and JavaScript code for a web-based simulation of Conway's Game of Life.
Prompt
Generate the necessary HTML, CSS, and JavaScript to create a functional demonstration of Conway's Game of Life. The application must launch with the "Gosper Glider Gun" pattern pre-loaded and visible on the grid. The simulation must be paused by default, inviting the user to start it. Core Requirements to Fulfill: Technology Stack: Use HTML for structure, CSS for styling, and vanilla JavaScript for all logic. The code should be organized into three distinct files. The Rules of Life: The simulation core must accurately implement the fundamental rules: A live cell with fewer than two live neighbors dies. A live cell with two or three live neighbors lives on. A live cell with more than three live neighbors dies. A dead cell with exactly three live neighbors becomes a live cell. Initial State: The grid must be initialized with the Gosper Glider Gun pattern upon page load. The AI is responsible for knowing or finding the correct pattern for this well-known construct. User Interface and Controls: The interface must be clean and provide the user with essential controls, including the ability to: Start and Pause the simulation. Reset the grid back to the initial Gosper Glider Gun state. Clear the grid to an empty state. Visual Feedback: The state of the grid (live/dead cells) must be clearly rendered. A visible counter should display the current generation number, which updates as the simulation proceeds.
A system prompt was added to support web rendering
Of course. Here is a complete, self-contained implementation of Conway's Game of Life that meets all your requirements. The Gosper Glider Gun is pre-loaded, the simulation is paused by default, and all necessary controls are provided.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conway's Game of Life</title>
<style>
/* CSS for Styling */
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
background-color: #1a1a1a;
color: #e0e0e0;
padding-top: 20px;
}
h1 {
font-weight: 300;
margin-bottom: 1rem;
color: #f0f0f0;
}
.controls {
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 10px;
}
button {
padding: 10px 18px;
font-size: 16px;
border: 1px solid #555;
border-radius: 5px;
background-color: #333;
color: #e0e0e0;
cursor: pointer;
transition: background-color 0.2s, border-color 0.2s;
}
button:hover {
background-color: #444;
border-color: #777;
}
#startPauseBtn {
min-width: 90px;
}
#generationCounter {
font-size: 16px;
color: #aaa;
margin-left: 20px;
min-width: 120px;
}
#gameCanvas {
border: 1px solid #444;
background-color: #000;
}
</style>
</head>
<body>
<h1>Conway's Game of Life</h1>
<div class="controls">
<button id="startPauseBtn">Start</button>
<button id="resetBtn">Reset</button>
<button id="clearBtn">Clear</button>
<span id="generationCounter">Generation: 0</span>
</div>
<canvas id="gameCanvas"></canvas>
<script>
// JavaScript for Logic
document.addEventListener('DOMContentLoaded', () => {
// --- Configuration ---
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const resolution = 10; // Size of each cell in pixels
canvas.width = 800;
canvas.height = 500;
const COLS = canvas.width / resolution;
const ROWS = canvas.height / resolution;
const LIVE_COLOR = '#00ff41'; // Bright green for live cells
const DEAD_COLOR = '#101010'; // Dark gray for dead cells
const GRID_COLOR = '#222'; // Color for grid lines
// --- State Variables ---
let grid;
let isRunning = false;
let generation = 0;
let animationFrameId;
// --- UI Elements ---
const startPauseBtn = document.getElementById('startPauseBtn');
const resetBtn = document.getElementById('resetBtn');
const clearBtn = document.getElementById('clearBtn');
const generationCounter = document.getElementById('generationCounter');
// --- Core Functions ---
/**
* Creates a 2D array representing the grid
* @returns {Array<Array<number>>} A 2D array initialized with 0s
*/
function buildGrid() {
return new Array(COLS).fill(null)
.map(() => new Array(ROWS).fill(0));
}
/**
* Populates the grid with the Gosper Glider Gun pattern
*/
function loadGosperGliderGun() {
const gunPattern = [
[1, 5], [1, 6], [2, 5], [2, 6],
[11, 5], [11, 6], [11, 7],
[12, 4], [12, 8],
[13, 3], [13, 9],
[14, 3], [14, 9],
[15, 6],
[16, 4], [16, 8],
[17, 5], [17, 6], [17, 7],
[18, 6],
[21, 3], [21, 4], [21, 5],
[22, 3], [22, 4], [22, 5],
[23, 2], [23, 6],
[25, 1], [25, 2], [25, 6], [25, 7],
[35, 3], [35, 4], [36, 3], [36, 4]
];
grid = buildGrid();
// Offset to position the gun nicely
const offsetX = 2;
const offsetY = 2;
gunPattern.forEach(([x, y]) => {
if (x + offsetX < COLS && y + offsetY < ROWS) {
grid[x + offsetX][y + offsetY] = 1;
}
});
}
/**
* Renders the current state of the grid onto the canvas
*/
function drawGrid() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let col = 0; col < COLS; col++) {
for (let row = 0; row < ROWS; row++) {
const cell = grid[col][row];
ctx.beginPath();
ctx.rect(col * resolution, row * resolution, resolution, resolution);
ctx.fillStyle = cell ? LIVE_COLOR : DEAD_COLOR;
ctx.fill();
ctx.strokeStyle = GRID_COLOR;
ctx.stroke();
}
}
}
/**
* Computes the next generation of the grid based on the rules of life
*/
function computeNextGeneration() {
const nextGrid = buildGrid();
for (let col = 0; col < COLS; col++) {
for (let row = 0; row < ROWS; row++) {
const cell = grid[col][row];
let numNeighbors = 0;
// Check all 8 neighbors
for (let i = -1; i < 2; i++) {
for (let j = -1; j < 2; j++) {
if (i === 0 && j === 0) continue;
const x_cell = col + i;
const y_cell = row + j;
// Check boundaries (toroidal/wrapping grid)
const periodic_x = (x_cell + COLS) % COLS;
const periodic_y = (y_cell + ROWS) % ROWS;
numNeighbors += grid[periodic_x][periodic_y];
}
}
// Apply Conway's Game of Life rules
if (cell === 1 && numNeighbors < 2) {
nextGrid[col][row] = 0; // Rule 1: Underpopulation
} else if (cell === 1 && (numNeighbors === 2 || numNeighbors === 3)) {
nextGrid[col][row] = 1; // Rule 2: Survival
} else if (cell === 1 && numNeighbors > 3) {
nextGrid[col][row] = 0; // Rule 3: Overpopulation
} else if (cell === 0 && numNeighbors === 3) {
nextGrid[col][row] = 1; // Rule 4: Reproduction
} else {
nextGrid[col][row] = cell;
}
}
}
grid = nextGrid;
generation++;
generationCounter.textContent = `Generation: ${generation}`;
}
let lastUpdateTime = 0;
const updateInterval = 100; // ms between generations
/**
* The main animation loop.
*/
function gameLoop(timestamp) {
if (!isRunning) return;
if (timestamp - lastUpdateTime > updateInterval) {
computeNextGeneration();
drawGrid();
lastUpdateTime = timestamp;
}
animationFrameId = requestAnimationFrame(gameLoop);
}
// --- Control Handlers ---
function handleStartPause() {
isRunning = !isRunning;
if (isRunning) {
startPauseBtn.textContent = 'Pause';
requestAnimationFrame(gameLoop);
} else {
startPauseBtn.textContent = 'Start';
cancelAnimationFrame(animationFrameId);
}
}
function handleReset() {
isRunning = false;
startPauseBtn.textContent = 'Start';
cancelAnimationFrame(animationFrameId);
generation = 0;
generationCounter.textContent = 'Generation: 0';
loadGosperGliderGun();
drawGrid();
}
function handleClear() {
isRunning = false;
startPauseBtn.textContent = 'Start';
cancelAnimationFrame(animationFrameId);
generation = 0;
generationCounter.textContent = 'Generation: 0';
grid = buildGrid();
drawGrid();
}
// --- Event Listeners ---
startPauseBtn.addEventListener('click', handleStartPause);
resetBtn.addEventListener('click', handleReset);
clearBtn.addEventListener('click', handleClear);
// Click to toggle cells manually
canvas.addEventListener('click', (event) => {
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
const col = Math.floor(x / resolution);
const row = Math.floor(y / resolution);
if (col >= 0 && col < COLS && row >= 0 && row < ROWS) {
grid[col][row] = grid[col][row] ? 0 : 1;
drawGrid();
}
});
// --- Initialization ---
handleReset(); // Initializes the grid with the gun pattern
});
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conway's Game of Life - Gosper Glider Gun</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
color: #333;
}
.header {
text-align: center;
margin-bottom: 20px;
}
h1 {
color: white;
font-size: 2.5rem;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.subtitle {
color: rgba(255,255,255,0.9);
font-size: 1.2rem;
font-weight: 300;
}
.controls {
background: rgba(255,255,255,0.95);
padding: 20px;
border-radius: 15px;
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
justify-content: center;
}
.btn {
padding: 12px 24px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
}
.btn-primary {
background: #4CAF50;
color: white;
}
.btn-primary:hover {
background: #45a049;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(76,175,80,0.4);
}
.btn-secondary {
background: #2196F3;
color: white;
}
.btn-secondary:hover {
background: #1976D2;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(33,150,243,0.4);
}
.btn-danger {
background: #f44336;
color: white;
}
.btn-danger:hover {
background: #d32f2f;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(244,67,54,0.4);
}
.generation-counter {
font-size: 1.2rem;
font-weight: bold;
color: #333;
background: rgba(255,255,255,0.8);
padding: 8px 16px;
border-radius: 8px;
}
.game-container {
background: rgba(255,255,255,0.95);
border-radius: 15px;
padding: 20px;
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
backdrop-filter: blur(10px);
}
.grid {
display: inline-block;
border: 2px solid #333;
border-radius: 8px;
overflow: hidden;
background: #f0f0f0;
}
.row {
display: flex;
}
.cell {
width: 8px;
height: 8px;
border: 0.5px solid rgba(0,0,0,0.1);
cursor: pointer;
transition: all 0.1s ease;
}
.cell.alive {
background: #2196F3;
box-shadow: inset 0 0 3px rgba(33,150,243,0.8);
}
.cell.dead {
background: #ffffff;
}
.cell:hover {
opacity: 0.7;
}
.instructions {
background: rgba(255,255,255,0.9);
padding: 15px;
border-radius: 10px;
margin-top: 20px;
max-width: 600px;
text-align: center;
font-size: 0.9rem;
line-height: 1.5;
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
@media (max-width: 768px) {
h1 {
font-size: 2rem;
}
.controls {
flex-direction: column;
gap: 10px;
}
.btn {
width: 100%;
max-width: 200px;
}
.cell {
width: 6px;
height: 6px;
}
}
</style>
</head>
<body>
<div class="header">
<h1>Conway's Game of Life</h1>
<div class="subtitle">Featuring the Gosper Glider Gun</div>
</div>
<div class="controls">
<button id="playPause" class="btn btn-primary">▶ Start</button>
<button id="reset" class="btn btn-secondary">🔄 Reset</button>
<button id="clear" class="btn btn-danger">🗑 Clear</button>
<div class="generation-counter">
Generation: <span id="generation">0</span>
</div>
</div>
<div class="game-container">
<div id="grid" class="grid"></div>
</div>
<div class="instructions">
<strong>Instructions:</strong> Click "Start" to begin the simulation. The Gosper Glider Gun will produce gliders that move across the grid.
You can click on cells to toggle them, reset to the original pattern, or clear the entire grid.
</div>
<script>
class GameOfLife {
constructor(width = 80, height = 50) {
this.width = width;
this.height = height;
this.grid = [];
this.nextGrid = [];
this.generation = 0;
this.isRunning = false;
this.intervalId = null;
this.initializeGrid();
this.createGridDOM();
this.setupEventListeners();
this.loadGosperGliderGun();
this.updateDisplay();
}
initializeGrid() {
this.grid = Array(this.height).fill().map(() => Array(this.width).fill(false));
this.nextGrid = Array(this.height).fill().map(() => Array(this.width).fill(false));
}
createGridDOM() {
const gridElement = document.getElementById('grid');
gridElement.innerHTML = '';
for (let row = 0; row < this.height; row++) {
const rowElement = document.createElement('div');
rowElement.className = 'row';
for (let col = 0; col < this.width; col++) {
const cellElement = document.createElement('div');
cellElement.className = 'cell dead';
cellElement.dataset.row = row;
cellElement.dataset.col = col;
cellElement.addEventListener('click', () => {
this.toggleCell(row, col);
});
rowElement.appendChild(cellElement);
}
gridElement.appendChild(rowElement);
}
}
toggleCell(row, col) {
this.grid[row][col] = !this.grid[row][col];
this.updateCellDisplay(row, col);
}
updateCellDisplay(row, col) {
const cellElement = document.querySelector(`[data-row="${row}"][data-col="${col}"]`);
if (cellElement) {
cellElement.className = this.grid[row][col] ? 'cell alive' : 'cell dead';
}
}
updateDisplay() {
for (let row = 0; row < this.height; row++) {
for (let col = 0; col < this.width; col++) {
this.updateCellDisplay(row, col);
}
}
document.getElementById('generation').textContent = this.generation;
}
countLiveNeighbors(row, col) {
let count = 0;
for (let i = -1; i <= 1; i++) {
for (let j = -1; j <= 1; j++) {
if (i === 0 && j === 0) continue;
const newRow = row + i;
const newCol = col + j;
if (newRow >= 0 && newRow < this.height &&
newCol >= 0 && newCol < this.width) {
if (this.grid[newRow][newCol]) {
count++;
}
}
}
}
return count;
}
nextGeneration() {
// Calculate next generation
for (let row = 0; row < this.height; row++) {
for (let col = 0; col < this.width; col++) {
const liveNeighbors = this.countLiveNeighbors(row, col);
const currentCell = this.grid[row][col];
if (currentCell) {
// Live cell
if (liveNeighbors < 2 || liveNeighbors > 3) {
this.nextGrid[row][col] = false; // Dies
} else {
this.nextGrid[row][col] = true; // Lives
}
} else {
// Dead cell
if (liveNeighbors === 3) {
this.nextGrid[row][col] = true; // Becomes alive
} else {
this.nextGrid[row][col] = false; // Stays dead
}
}
}
}
// Swap grids
[this.grid, this.nextGrid] = [this.nextGrid, this.grid];
this.generation++;
this.updateDisplay();
}
start() {
if (!this.isRunning) {
this.isRunning = true;
this.intervalId = setInterval(() => {
this.nextGeneration();
}, 100);
const playPauseBtn = document.getElementById('playPause');
playPauseBtn.textContent = '⏸ Pause';
playPauseBtn.className = 'btn btn-danger';
}
}
pause() {
if (this.isRunning) {
this.isRunning = false;
clearInterval(this.intervalId);
const playPauseBtn = document.getElementById('playPause');
playPauseBtn.textContent = '▶ Start';
playPauseBtn.className = 'btn btn-primary';
}
}
togglePlayPause() {
if (this.isRunning) {
this.pause();
} else {
this.start();
}
}
reset() {
this.pause();
this.generation = 0;
this.initializeGrid();
this.loadGosperGliderGun();
this.updateDisplay();
}
clear() {
this.pause();
this.generation = 0;
this.initializeGrid();
this.updateDisplay();
}
loadGosperGliderGun() {
// Gosper Glider Gun pattern
const pattern = [
"........................O...........",
"......................O.O...........",
"............OO......OO............OO",
"...........O...O....OO............OO",
"OO........O.....O...OO..............",
"OO........O...O.OO....O.O...........",
"..........O.....O.......O...........",
"...........O...O....................",
"............OO......................."
];
const startRow = 10;
const startCol = 10;
for (let i = 0; i < pattern.length; i++) {
for (let j = 0; j < pattern[i].length; j++) {
const row = startRow + i;
const col = startCol + j;
if (row < this.height && col < this.width) {
this.grid[row][col] = pattern[i][j] === 'O';
}
}
}
}
setupEventListeners() {
document.getElementById('playPause').addEventListener('click', () => {
this.togglePlayPause();
});
document.getElementById('reset').addEventListener('click', () => {
this.reset();
});
document.getElementById('clear').addEventListener('click', () => {
this.clear();
});
}
}
// Initialize the game when the page loads
document.addEventListener('DOMContentLoaded', () => {
const game = new GameOfLife();
});
</script>
</body>
</html>
```
This implementation provides a fully functional Conway's Game of Life simulation with the following features:
**Core Functionality:**
- Complete implementation of Conway's Game of Life rules
- Gosper Glider Gun pattern pre-loaded on startup
- Simulation starts paused, inviting user interaction
**User Interface:**
- Clean, modern design with gradient background
- Responsive layout that works on mobile devices
- Clear visual distinction between live (blue) and dead (white) cells
- Generation counter that updates in real-time
**Controls:**
- **Start/Pause Button**: Toggles simulation with visual feedback
- **Reset Button**: Returns to original Gosper Glider Gun pattern
- **Clear Button**: Empties the entire grid
- **Interactive Cells**: Click any cell to toggle its state
**Technical Implementation:**
- Vanilla JavaScript with object-oriented design
- Efficient neighbor counting algorithm
- Smooth animation at 10 FPS (100ms intervals)
- Grid-based layout using CSS Flexbox
- Event-driven architecture for user interactions
The Gosper Glider Gun pattern is accurately implemented and will produce gliders that travel across the grid when the simulation runs. The interface is intuitive and provides all the essential controls for exploring this classic cellular automaton.Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conway's Game of Life - Gosper Glider Gun</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #1a1a1a;
color: #ffffff;
margin: 0;
padding: 0;
}
.container {
max-width: 850px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
h1 {
margin-top: 30px;
margin-bottom: 20px;
font-size: 2em;
}
.controls {
margin: 20px 0;
}
.controls button {
padding: 10px 20px;
margin: 0 8px;
font-size: 16px;
background-color: #2a2a2a;
border: none;
color: white;
cursor: pointer;
border-radius: 4px;
}
.controls button:hover {
background-color: #3a3a3a;
}
.game-wrapper {
display: flex;
justify-content: center;
align-items: center;
margin: 20px 0;
background-color: #2a2a2a;
padding: 20px;
border-radius: 8px;
}
#gameCanvas {
background-color: #000000;
border: 2px solid #ffffff;
image-rendering: pixelated;
}
.stats {
margin-top: 15px;
font-size: 1.2em;
}
.instructions {
margin-top: 20px;
font-size: 0.9em;
color: #bbbbbb;
}
</style>
</head>
<body>
<div class="container">
<h1>Conway's Game of Life</h1>
<div class="controls">
<button id="startStopButton">Start</button>
<button id="resetButton">Reset</button>
<button id="clearButton">Clear</button>
</div>
<div class="game-wrapper">
<canvas id="gameCanvas" width="700" height="500"></canvas>
</div>
<div class="stats">
<p>Generation: <span id="generationCounter">0</span></p>
</div>
<div class="instructions">
<p>Click on cells to toggle them, start the simulation to see the Gosper Glider Gun pattern come to life!</p>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Canvas setup
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// Settings
const CELL_SIZE = 10;
const CELL_GAP = 1;
const CANVAS_BORDER = 5;
// Dimensions
const CANVAS_WIDTH = canvas.width;
const CANVAS_HEIGHT = canvas.height;
// Calculate grid size based on canvas dimensions
const COLS = Math.floor((CANVAS_WIDTH - 2 * CANVAS_BORDER) / (CELL_SIZE + CELL_GAP));
const ROWS = Math.floor((CANVAS_HEIGHT - 2 * CANVAS_BORDER) / (CELL_SIZE + CELL_GAP));
// Game state
let currentGeneration = 0;
let running = false;
let interval;
const speed = 100; // milliseconds per generation
// Create grid
function createEmptyGrid() {
return new Array(ROWS).fill(null).map(() => new Array(COLS).fill(0));
}
// Define the Gosper Glider Gun pattern with (x, y) coordinates
function createGosperGliderGunGrid() {
const grid = createEmptyGrid();
// Pattern based on the classic Gosper Glider Gun
// Coordinates represent positions of live cells relative to top-left
const gliderGun = [
[0,6], [0,7], [1,6], [1,7],
[10,6], [10,7], [10,8], [11,5], [11,9], [12,4], [12,10], [13,4], [13,10], [14,7],
[15,5], [15,9], [16,6], [16,7], [16,8], [17,7],
[20,4], [20,5], [20,6], [21,4], [21,5], [21,6], [22,3], [22,7], [24,2], [24,3],
[24,7], [24,8], [34,4], [34,5], [35,4], [35,5]
];
// Set those positions to live cells
gliderGun.forEach(([x, y]) => {
if (x < ROWS && y < COLS && x >= 0 && y >= 0) {
grid[x][y] = 1;
}
});
return grid;
}
let currentGrid = createGosperGliderGunGrid();
// Count live neighbors for a cell
function countLiveNeighbors(grid, row, col) {
let count = 0;
for (let i = -1; i <= 1; i++) {
for (let j = -1; j <= 1; j++) {
// Skip the cell itself
if (i === 0 && j === 0) continue;
const newRow = row + i;
const newCol = col + j;
// Check if we're still in the grid
if (newRow >= 0 && newRow < ROWS && newCol >= 0 && newCol < COLS) {
count += grid[newRow][newCol];
}
}
}
return count;
}
// Apply Game of Life rules
function applyRules(grid) {
// Create an empty grid for the next state
const nextGrid = createEmptyGrid();
for (let row = 0; row < ROWS; row++) {
for (let col = 0; col < COLS; col++) {
const alive = grid[row][col];
const liveNeighbors = countLiveNeighbors(grid, row, col);
// Apply the rules
if (alive) {
// Rule 1: Live cell with fewer than two live neighbors dies
// Rule 2: Live cell with two or three live neighbors lives on
// Rule 3: Live cell with more than three live neighbors dies
nextGrid[row][col] = (liveNeighbors === 2 || liveNeighbors === 3) ? 1 : 0;
} else {
// Rule 4: Dead cell with exactly three live neighbors becomes a live cell
nextGrid[row][col] = (liveNeighbors === 3) ? 1 : 0;
}
}
}
return nextGrid;
}
// Get the position of a cell based on pixel coordinates
function getCellFromPosition(x, y) {
// Convert canvas coordinates to cell coordinates
const canvasRect = canvas.getBoundingClientRect();
const col = Math.floor((x - canvasRect.left - CANVAS_BORDER) / (CELL_SIZE + CELL_GAP));
const row = Math.floor((y - canvasRect.top - CANVAS_BORDER) / (CELL_SIZE + CELL_GAP));
// Make sure we are within the grid
if (row >= 0 && row < ROWS && col >= 0 && col < COLS) {
return [row, col];
}
return null;
}
// Draw a single cell
function drawCell(row, col, alive) {
ctx.fillStyle = alive ? '#00ff00' : '#000000';
ctx.fillRect(
col * (CELL_SIZE + CELL_GAP) + CANVAS_BORDER,
row * (CELL_SIZE + CELL_GAP) + CANVAS_BORDER,
CELL_SIZE,
CELL_SIZE
);
}
// Draw the entire grid
function drawGrid(grid) {
for (let row = 0; row < ROWS; row++) {
for (let col = 0; col < COLS; col++) {
drawCell(row, col, grid[row][col]);
}
}
}
// Update the generation counter in the UI
function updateGenerationCounter() {
document.getElementById('generationCounter').textContent = currentGeneration;
}
// Update the game state
function updateGameState() {
// Advance to the next generation
currentGrid = applyRules(currentGrid);
currentGeneration++;
// Redraw the grid
drawGrid(currentGrid);
updateGenerationCounter();
}
// Start the simulation
function startSimulation() {
if (!running) {
running = true;
document.getElementById('startStopButton').textContent = 'Pause';
interval = setInterval(updateGameState, speed);
}
}
// Pause the simulation
function pauseSimulation() {
if (running) {
running = false;
document.getElementById('startStopButton').textContent = 'Start';
clearInterval(interval);
}
}
// Reset the simulation to the initial state
function resetSimulation() {
pauseSimulation();
currentGrid = createGosperGliderGunGrid();
currentGeneration = 0;
drawGrid(currentGrid);
updateGenerationCounter();
}
// Clear the grid
function clearGrid() {
pauseSimulation();
currentGrid = createEmptyGrid();
currentGeneration = 0;
drawGrid(currentGrid);
updateGenerationCounter();
}
// Toggle a cell's state when clicked
function cellClickHandler(event) {
const coords = getCellFromPosition(event.clientX, event.clientY);
if (coords) {
const [row, col] = coords;
currentGrid[row][col] = currentGrid[row][col] ? 0 : 1;
drawCell(row, col, currentGrid[row][col]);
}
}
// Event listeners
document.getElementById('startStopButton').addEventListener('click', () => {
if (running) {
pauseSimulation();
} else {
startSimulation();
}
});
document.getElementById('resetButton').addEventListener('click', resetSimulation);
document.getElementById('clearButton').addEventListener('click', clearGrid);
canvas.addEventListener('click', cellClickHandler);
// Initial draw
drawGrid(currentGrid);
updateGenerationCounter();
});
</script>
</body>
</html>
```Drag to resize
# Conway's Game of Life
I'll create a visually appealing implementation of Conway's Game of Life with the Gosper Glider Gun pattern pre-loaded. The simulation will be paused initially, and include all requested controls.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conway's Game of Life</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #1a2a6c, #2c3e50, #1a2a6c);
color: #ecf0f1;
line-height: 1.6;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
header {
text-align: center;
margin-bottom: 20px;
width: 100%;
}
h1 {
font-size: 2.5rem;
background: linear-gradient(to right, #3498db, #2ecc71);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 0 10px rgba(52, 152, 219, 0.3);
margin-bottom: 10px;
}
.game-container {
position: relative;
max-width: 900px;
width: 100%;
}
.stats {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
padding: 15px;
background: rgba(0, 0, 0, 0.3);
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}
.stat-box {
text-align: center;
background: rgba(0, 0, 0, 0.2);
padding: 10px 15px;
border-radius: 8px;
flex: 1;
margin: 0 10px;
min-width: 150px;
}
.stat-box h3 {
color: #3498db;
font-size: 1.1rem;
margin-bottom: 5px;
}
.stat-value {
font-size: 1.8rem;
font-weight: bold;
color: #2ecc71;
text-shadow: 0 0 8px rgba(46, 204, 113, 0.6);
}
canvas {
background: #1a1a2e;
border: 2px solid #3a506b;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
width: 100%;
max-width: 800px;
height: 500px;
display: block;
margin: 0 auto;
cursor: pointer;
}
.controls {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 15px;
margin: 20px 0;
width: 100%;
max-width: 800px;
}
button {
padding: 12px 25px;
font-size: 1rem;
font-weight: bold;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
min-width: 120px;
display: flex;
align-items: center;
justify-content: center;
background: #3498db;
color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
button i {
margin-right: 8px;
font-size: 1.2rem;
}
button:hover {
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}
button:active {
transform: translateY(1px);
}
#start-pause {
background: linear-gradient(135deg, #2ecc71, #1abc9c);
}
#start-pause.paused {
background: linear-gradient(135deg, #3498db, #2980b9);
}
#reset {
background: linear-gradient(135deg, #9b59b6, #8e44ad);
}
#clear {
background: linear-gradient(135deg, #e74c3c, #c0392b);
}
.speed-control {
display: flex;
align-items: center;
gap: 15px;
background: rgba(0, 0, 0, 0.3);
padding: 15px;
border-radius: 10px;
margin-top: 10px;
width: 100%;
max-width: 800px;
}
label {
font-weight: bold;
color: #3498db;
}
input[type="range"] {
flex: 1;
height: 6px;
background: #3a506b;
outline: none;
-webkit-appearance: none;
border-radius: 10px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #2ecc71;
cursor: pointer;
box-shadow: 0 0 8px rgba(46, 204, 113, 0.8);
}
.instructions {
background: rgba(0, 0, 0, 0.3);
padding: 20px;
border-radius: 10px;
margin-top: 20px;
max-width: 800px;
width: 100%;
}
.instructions h2 {
color: #3498db;
margin-bottom: 10px;
text-align: center;
}
.rules {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-top: 15px;
}
.rule {
background: rgba(0, 0, 0, 0.2);
padding: 15px;
border-radius: 8px;
border-left: 4px solid #3498db;
}
.rule h4 {
color: #2ecc71;
margin-bottom: 5px;
}
</style>
</head>
<body>
<header>
<h1>Conway's Game of Life</h1>
<p>A cellular automaton devised by mathematician John Conway</p>
</header>
<div class="game-container">
<div class="stats">
<div class="stat-box">
<h3>Generation</h3>
<div id="generation" class="stat-value">0</div>
</div>
<div class="stat-box">
<h3>Live Cells</h3>
<div id="live-cells" class="stat-value">36</div>
</div>
<div class="stat-box">
<h3>Status</h3>
<div id="status" class="stat-value">PAUSED</div>
</div>
</div>
<canvas id="gameCanvas"></canvas>
<div class="controls">
<button id="start-pause" class="paused">
<i>▶</i> Start Simulation
</button>
<button id="reset">
<i>↻</i> Reset Pattern
</button>
<button id="clear">
<i>✕</i> Clear Grid
</button>
</div>
<div class="speed-control">
<label for="speed">Simulation Speed:</label>
<input type="range" id="speed" min="1" max="100" value="50">
<span id="speed-display">5x</span>
</div>
</div>
<div class="instructions">
<h2>The Rules of Life</h2>
<p>Conway's Game of Life is a zero-player game where the evolution is determined by the initial state.</p>
<div class="rules">
<div class="rule">
<h4>Underpopulation</h4>
<p>A live cell with fewer than two live neighbors dies</p>
</div>
<div class="rule">
<h4>Survival</h4>
<p>A live cell with two or three live neighbors lives on</p>
</div>
<div class="rule">
<h4>Overpopulation</h4>
<p>A live cell with more than three live neighbors dies</p>
</div>
<div class="rule">
<h4>Reproduction</h4>
<p>A dead cell with exactly three live neighbors becomes a live cell</p>
</div>
</div>
</div>
<script>
// Game constants
const CELL_SIZE = 10;
const GRID_WIDTH = Math.floor(800 / CELL_SIZE);
const GRID_HEIGHT = Math.floor(500 / CELL_SIZE);
const BG_COLOR = '#1a1a2e';
const GRID_COLOR = '#16213E';
const DEAD_COLOR = '#16213E';
const ALIVE_COLOR = '#2ecc71';
const NEW_CELL_COLOR = '#3498db';
const GOSPER_CELL_COLOR = '#8e44ad';
// Game state
let grid = Array(GRID_HEIGHT).fill().map(() => Array(GRID_WIDTH).fill(0));
let nextGrid = Array(GRID_HEIGHT).fill().map(() => Array(GRID_WIDTH).fill(0));
let isPlaying = false;
let generation = 0;
let animationFrameId;
let lastUpdateTime = 0;
let updateInterval = 200; // milliseconds
let liveCellCount = 0;
// Get DOM elements
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const generationDisplay = document.getElementById('generation');
const liveCellsDisplay = document.getElementById('live-cells');
const statusDisplay = document.getElementById('status');
const startPauseBtn = document.getElementById('start-pause');
const resetBtn = document.getElementById('reset');
const clearBtn = document.getElementById('clear');
const speedSlider = document.getElementById('speed');
const speedDisplay = document.getElementById('speed-display');
// Gosper Glider Gun pattern
function createGosperGliderGun() {
const gun = [
[1, 5], [1, 6], [2, 5], [2, 6],
[11, 5], [11, 6], [11, 7], [12, 4], [12, 8],
[13, 3], [13, 9], [14, 3], [14, 9], [15, 6],
[16, 4], [16, 8], [17, 5], [17, 6], [17, 7],
[18, 6], [21, 3], [21, 4], [21, 5], [22, 3],
[22, 4], [22, 5], [23, 2], [23, 6], [25, 1],
[25, 2], [25, 6], [25, 7], [35, 3], [35, 4],
[36, 3], [36, 4]
];
// Place the gun on the grid
for (const [x, y] of gun) {
if (x < GRID_HEIGHT && y < GRID_WIDTH) {
grid[x + 10][y + 10] = 1;
}
}
liveCellCount = gun.length;
liveCellsDisplay.textContent = liveCellCount;
}
// Setup grid and canvas
function setup() {
// Set canvas dimensions
canvas.width = GRID_WIDTH * CELL_SIZE;
canvas.height = GRID_HEIGHT * CELL_SIZE;
// Initialize the grid with Gosper Glider Gun
createGosperGliderGun();
// Draw the initial grid
drawGrid();
// Add event listeners
startPauseBtn.addEventListener('click', togglePlay);
resetBtn.addEventListener('click', resetGrid);
clearBtn.addEventListener('click', clearGrid);
speedSlider.addEventListener('input', updateSpeed);
// Add click event to canvas for toggling cells
canvas.addEventListener('click', handleCanvasClick);
}
// Draw the entire grid
function drawGrid() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw grid background
ctx.fillStyle = GRID_COLOR;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw each cell
for (let y = 0; y < GRID_HEIGHT; y++) {
for (let x = 0; x < GRID_WIDTH; x++) {
if (grid[y][x] === 1) {
drawCell(x, y, ALIVE_COLOR);
}
}
}
// Draw the grid lines
ctx.strokeStyle = 'rgba(255, 255, 255, 0.05)';
ctx.lineWidth = 0.5;
// Vertical lines
for (let x = 0; x <= canvas.width; x += CELL_SIZE) {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
ctx.stroke();
}
// Horizontal lines
for (let y = 0; y <= canvas.height; y += CELL_SIZE) {
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(canvas.width, y);
ctx.stroke();
}
}
// Draw a single cell
function drawCell(x, y, color) {
ctx.fillStyle = color;
ctx.fillRect(
x * CELL_SIZE,
y * CELL_SIZE,
CELL_SIZE,
CELL_SIZE
);
}
// Toggle play/pause
function togglePlay() {
isPlaying = !isPlaying;
if (isPlaying) {
startPauseBtn.classList.remove('paused');
startPauseBtn.innerHTML = '<i>⏸</i> Pause Simulation';
statusDisplay.textContent = 'RUNNING';
requestAnimationFrame(gameLoop);
} else {
startPauseBtn.classList.add('paused');
startPauseBtn.innerHTML = '<i>▶</i> Start Simulation';
statusDisplay.textContent = 'PAUSED';
cancelAnimationFrame(animationFrameId);
}
}
// Update speed based on slider
function updateSpeed() {
const value = parseInt(speedSlider.value);
updateInterval = 200 - (value * 1.9); // Range: 10ms to 200ms
speedDisplay.textContent = Math.round(value / 10) + 'x';
}
// Reset to initial pattern
function resetGrid() {
grid = Array(GRID_HEIGHT).fill().map(() => Array(GRID_WIDTH).fill(0));
createGosperGliderGun();
generation = 0;
generationDisplay.textContent = generation;
drawGrid();
if (isPlaying) {
togglePlay();
}
}
// Clear the grid
function clearGrid() {
grid = Array(GRID_HEIGHT).fill().map(() => Array(GRID_WIDTH).fill(0));
generation = 0;
liveCellCount = 0;
generationDisplay.textContent = generation;
liveCellsDisplay.textContent = liveCellCount;
drawGrid();
if (isPlaying) {
togglePlay();
}
}
// Toggle cells on click
function handleCanvasClick(event) {
if (isPlaying) return;
const rect = canvas.getBoundingClientRect();
const x = Math.floor((event.clientX - rect.left) / CELL_SIZE);
const y = Math.floor((event.clientY - rect.top) / CELL_SIZE);
// Validate coordinates
if (x >= 0 && x < GRID_WIDTH && y >= 0 && y < GRID_HEIGHT) {
grid[y][x] = 1 - grid[y][x];
drawCell(x, y, grid[y][x] === 1 ? NEW_CELL_COLOR : DEAD_COLOR);
liveCellCount += grid[y][x] === 1 ? 1 : -1;
liveCellsDisplay.textContent = liveCellCount;
}
}
// Count live neighbors for a cell
function countNeighbors(x, y) {
let count = 0;
for (let dy = -1; dy <= 1; dy++) {
for (let dx = -1; dx <= 1; dx++) {
if (dx === 0 && dy === 0) continue;
const ny = y + dy;
const nx = x + dx;
if (ny >= 0 && ny < GRID_HEIGHT && nx >= 0 && nx < GRID_WIDTH) {
count += grid[ny][nx];
}
}
}
return count;
}
// Compute next generation
function computeNextGeneration() {
let nextLiveCellCount = 0;
for (let y = 0; y < GRID_HEIGHT; y++) {
for (let x = 0; x < GRID_WIDTH; x++) {
const neighbors = countNeighbors(x, y);
if (grid[y][x] === 1) {
// Cell is alive
if (neighbors === 2 || neighbors === 3) {
nextGrid[y][x] = 1; // Survival
nextLiveCellCount++;
} else {
nextGrid[y][x] = 0; // Death by underpopulation or overpopulation
}
} else {
// Cell is dead
if (neighbors === 3) {
nextGrid[y][x] = 1; // Reproduction
nextLiveCellCount++;
} else {
nextGrid[y][x] = 0; // Remain dead
}
}
}
}
// Swap grids for the next generation
for (let y = 0; y < GRID_HEIGHT; y++) {
for (let x = 0; x < GRID_WIDTH; x++) {
grid[y][x] = nextGrid[y][x];
}
}
liveCellCount = nextLiveCellCount;
generation++;
}
// The game loop
function gameLoop(timestamp) {
if (timestamp - lastUpdateTime > updateInterval) {
computeNextGeneration();
drawGrid();
generationDisplay.textContent = generation;
liveCellsDisplay.textContent = liveCellCount;
lastUpdateTime = timestamp;
}
animationFrameId = requestAnimationFrame(gameLoop);
}
// Start everything
window.addEventListener('load', setup);
</script>
</body>
</html>
```
This implementation of Conway's Game of Life includes:
1. A visually appealing dark theme with color gradients and glow effects
2. Pre-loaded Gosper Glider Gun pattern positioned in the grid
3. Paused state on initialization with clear "Paused" status indicator
4. Core gameplay controls: Start/Pause, Reset to initial pattern, Clear grid
5. Generation counter and live cell counter
6. Interactive canvas for drawing your own cells when paused
7. Simulation speed control with a slider
8. Clear visualization of the game rules as a reference
9. Responsive layout that works well on different screen sizes
10. Smooth animation using requestAnimationFrame
The Gosper Glider Gun pattern is pre-loaded when the page opens, demonstrating an interesting phenomenon in cellular automata where patterns can generate "gliders" indefinitely.
All functionality is implemented with vanilla JavaScript with no external dependencies.Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conway's Game of Life</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
}
h1 {
color: #333;
margin-bottom: 20px;
}
.controls {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
button {
padding: 8px 16px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
button:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
.generation-counter {
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
}
.grid-container {
background-color: white;
border: 2px solid #333;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.grid {
display: grid;
grid-template-columns: repeat(50, 12px);
grid-template-rows: repeat(30, 12px);
gap: 1px;
}
.cell {
width: 12px;
height: 12px;
background-color: #eee;
cursor: pointer;
}
.alive {
background-color: #333;
}
.cell:hover {
background-color: #ddd;
}
.alive:hover {
background-color: #555;
}
</style>
</head>
<body>
<h1>Conway's Game of Life</h1>
<div class="controls">
<button id="start-btn">Start</button>
<button id="pause-btn" disabled>Pause</button>
<button id="reset-btn">Reset</button>
<button id="clear-btn">Clear</button>
</div>
<div class="generation-counter">Generation: <span id="generation">0</span></div>
<div class="grid-container">
<div class="grid" id="grid"></div>
</div>
<script>
// Game configuration
const ROWS = 30;
const COLS = 50;
const CELL_SIZE = 12;
// Game state
let grid = Array(ROWS).fill().map(() => Array(COLS).fill(0));
let nextGrid = Array(ROWS).fill().map(() => Array(COLS).fill(0));
let isRunning = false;
let generation = 0;
let animationId = null;
// DOM elements
const gridElement = document.getElementById('grid');
const generationElement = document.getElementById('generation');
const startBtn = document.getElementById('start-btn');
const pauseBtn = document.getElementById('pause-btn');
const resetBtn = document.getElementById('reset-btn');
const clearBtn = document.getElementById('clear-btn');
// Initialize the grid
function initializeGrid() {
gridElement.innerHTML = '';
for (let row = 0; row < ROWS; row++) {
for (let col = 0; col < COLS; col++) {
const cell = document.createElement('div');
cell.className = 'cell';
cell.dataset.row = row;
cell.dataset.col = col;
cell.addEventListener('click', () => toggleCell(row, col));
gridElement.appendChild(cell);
}
}
resetGrid();
}
// Toggle cell state
function toggleCell(row, col) {
if (isRunning) return;
grid[row][col] = grid[row][col] ? 0 : 1;
updateCellDisplay(row, col);
}
// Update cell display
function updateCellDisplay(row, col) {
const cellIndex = row * COLS + col;
const cell = gridElement.children[cellIndex];
if (grid[row][col]) {
cell.classList.add('alive');
} else {
cell.classList.remove('alive');
}
}
// Reset grid to Gosper Glider Gun
function resetGrid() {
if (isRunning) return;
// Clear the grid
grid = Array(ROWS).fill().map(() => Array(COLS).fill(0));
// Gosper Glider Gun pattern
const gosperGliderGun = [
[0, 24, 1], [0, 25, 1], [1, 24, 1], [1, 25, 1],
[10, 24, 1], [10, 25, 1], [10, 26, 1], [11, 23, 1],
[11, 27, 1], [12, 22, 1], [12, 28, 1], [13, 22, 1],
[13, 28, 1], [14, 25, 1], [15, 23, 1], [15, 27, 1],
[16, 24, 1], [16, 25, 1], [16, 26, 1], [17, 25, 1],
[20, 22, 1], [20, 23, 1], [20, 24, 1], [21, 22, 1],
[21, 23, 1], [21, 24, 1], [22, 21, 1], [22, 25, 1],
[24, 20, 1], [24, 21, 1], [24, 25, 1], [24, 26, 1],
[34, 22, 1], [34, 23, 1], [35, 22, 1], [35, 23, 1]
];
// Place the pattern
gosperGliderGun.forEach(([row, col]) => {
if (row < ROWS && col < COLS) {
grid[row][col] = 1;
}
});
// Update display
updateAllCells();
generation = 0;
generationElement.textContent = generation;
}
// Clear the grid
function clearGrid() {
if (isRunning) return;
grid = Array(ROWS).fill().map(() => Array(COLS).fill(0));
updateAllCells();
generation = 0;
generationElement.textContent = generation;
}
// Update all cells display
function updateAllCells() {
for (let row = 0; row < ROWS; row++) {
for (let col = 0; col < COLS; col++) {
updateCellDisplay(row, col);
}
}
}
// Count live neighbors
function countLiveNeighbors(row, col) {
let count = 0;
for (let r = -1; r <= 1; r++) {
for (let c = -1; c <= 1; c++) {
if (r === 0 && c === 0) continue;
const newRow = row + r;
const newCol = col + c;
if (newRow >= 0 && newRow < ROWS && newCol >= 0 && newCol < COLS) {
count += grid[newRow][newCol];
}
}
}
return count;
}
// Compute next generation
function computeNextGeneration() {
nextGrid = Array(ROWS).fill().map(() => Array(COLS).fill(0));
for (let row = 0; row < ROWS; row++) {
for (let col = 0; col < COLS; col++) {
const neighbors = countLiveNeighbors(row, col);
const isAlive = grid[row][col];
if (isAlive) {
nextGrid[row][col] = neighbors === 2 || neighbors === 3 ? 1 : 0;
} else {
nextGrid[row][col] = neighbors === 3 ? 1 : 0;
}
}
}
// Swap grids
[grid, nextGrid] = [nextGrid, grid];
generation++;
generationElement.textContent = generation;
// Update display
updateAllCells();
// Continue if running
if (isRunning) {
animationId = requestAnimationFrame(() => {
setTimeout(computeNextGeneration, 100);
});
}
}
// Start the simulation
function startSimulation() {
if (!isRunning) {
isRunning = true;
startBtn.disabled = true;
pauseBtn.disabled = false;
computeNextGeneration();
}
}
// Pause the simulation
function pauseSimulation() {
isRunning = false;
startBtn.disabled = false;
pauseBtn.disabled = true;
if (animationId) {
cancelAnimationFrame(animationId);
animationId = null;
}
}
// Event listeners
startBtn.addEventListener('click', startSimulation);
pauseBtn.addEventListener('click', pauseSimulation);
resetBtn.addEventListener('click', resetGrid);
clearBtn.addEventListener('click', clearGrid);
// Initialize the game
initializeGrid();
</script>
</body>
</html>
```Drag to resize
```html
<!-- ======================= index.html ======================= -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Conway’s Game of Life – Gosper Glider Gun Demo</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Conway’s Game of Life</h1>
<div id="controls">
<button id="startPauseBtn">Start</button>
<button id="resetBtn">Reset (Glider Gun)</button>
<button id="clearBtn">Clear</button>
<span id="generation">Generation: 0</span>
</div>
<canvas id="gameCanvas"></canvas>
<script src="script.js"></script>
</body>
</html>
<!-- ======================= styles.css ======================= -->
* {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
background: #222;
color: #eee;
}
h1 {
margin-bottom: 10px;
}
#controls {
margin-bottom: 10px;
}
button {
margin-right: 8px;
padding: 6px 12px;
border: none;
border-radius: 4px;
background: #4caf50;
color: #fff;
cursor: pointer;
font-size: 14px;
}
button:hover {
background: #45a049;
}
button:disabled {
background: #777;
cursor: default;
}
#gameCanvas {
border: 1px solid #555;
background: #111;
}
#generation {
margin-left: 15px;
font-weight: bold;
}
@media (max-width: 620px) {
canvas {
width: 100% !important;
height: auto !important;
}
}
<!-- ======================= script.js ======================= -->
// ======== Configuration ========
const cellSize = 12; // Pixel size of each cell
const cols = 60; // Number of columns in the grid
const rows = 40; // Number of rows in the grid
const aliveColor = '#00FF76'; // Color for live cells
const deadColor = '#111'; // Canvas background (also set in CSS)
const intervalMs = 120; // Simulation speed
// ======== DOM Elements ========
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const startPauseBtn= document.getElementById('startPauseBtn');
const resetBtn = document.getElementById('resetBtn');
const clearBtn = document.getElementById('clearBtn');
const genCounter = document.getElementById('generation');
// Canvas size
canvas.width = cols * cellSize;
canvas.height = rows * cellSize;
// ======== Game State ========
let grid = createGrid(rows, cols);
let generation = 0;
let isRunning = false;
let timerId = null;
// ======== Initialize with Gosper Glider Gun ========
resetGridToGosper();
draw();
// ======== Event Listeners ========
startPauseBtn.addEventListener('click', () => {
isRunning ? pause() : start();
});
resetBtn.addEventListener('click', () => {
pause();
resetGridToGosper();
draw();
});
clearBtn.addEventListener('click', () => {
pause();
grid = createGrid(rows, cols);
generation = 0;
updateGenerationDisplay();
draw();
});
canvas.addEventListener('click', (e) => {
const rect = canvas.getBoundingClientRect();
const x = Math.floor((e.clientX - rect.left) / cellSize);
const y = Math.floor((e.clientY - rect.top) / cellSize);
if (x >= 0 && x < cols && y >= 0 && y < rows) {
grid[y][x] = !grid[y][x];
draw();
}
});
// ======== Core Functions ========
function createGrid(r, c) {
return Array.from({ length: r }, () => Array(c).fill(false));
}
function resetGridToGosper() {
grid = createGrid(rows, cols);
generation = 0;
updateGenerationDisplay();
// Gosper Glider Gun pattern (top-left origin)
// Coordinates for live cells (x, y)
const gun = [
[1, 5],[1, 6],[2, 5],[2, 6],
[11, 5],[11, 6],[11, 7],
[12, 4],[12, 8],
[13, 3],[13, 9],
[14, 3],[14, 9],
[15, 6],
[16, 4],[16, 8],
[17, 5],[17, 6],[17, 7],
[18, 6],
[21, 3],[21, 4],[21, 5],
[22, 3],[22, 4],[22, 5],
[23, 2],[23, 6],
[25, 1],[25, 2],[25, 6],[25, 7],
[35, 3],[35, 4],
[36, 3],[36, 4]
];
// Place pattern roughly centered horizontally
const offsetX = 2;
const offsetY = 2;
gun.forEach(([x, y]) => {
if (y + offsetY < rows && x + offsetX < cols) {
grid[y + offsetY][x + offsetX] = true;
}
});
}
function start() {
if (!isRunning) {
isRunning = true;
startPauseBtn.textContent = 'Pause';
timerId = setInterval(tick, intervalMs);
}
}
function pause() {
isRunning = false;
startPauseBtn.textContent = 'Start';
clearInterval(timerId);
}
function tick() {
grid = nextGeneration(grid);
generation++;
updateGenerationDisplay();
draw();
}
function updateGenerationDisplay() {
genCounter.textContent = `Generation: ${generation}`;
}
function nextGeneration(oldGrid) {
const newGrid = createGrid(rows, cols);
for (let y = 0; y < rows; y++) {
for (let x = 0; x < cols; x++) {
const alive = oldGrid[y][x];
const neighbors = countNeighbors(oldGrid, x, y);
if (alive && (neighbors === 2 || neighbors === 3)) {
newGrid[y][x] = true; // Lives on
} else if (!alive && neighbors === 3) {
newGrid[y][x] = true; // Reproduction
} else {
newGrid[y][x] = false; // Dies or remains dead
}
}
}
return newGrid;
}
function countNeighbors(grid, x, y) {
let count = 0;
for (let dy = -1; dy <= 1; dy++) {
for (let dx = -1; dx <= 1; dx++) {
if (dx === 0 && dy === 0) continue; // Skip self
const nx = x + dx;
const ny = y + dy;
if (nx >= 0 && nx < cols && ny >= 0 && ny < rows) {
if (grid[ny][nx]) count++;
}
}
}
return count;
}
function draw() {
ctx.fillStyle = deadColor;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = aliveColor;
for (let y = 0; y < rows; y++) {
for (let x = 0; x < cols; x++) {
if (grid[y][x]) {
ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
}
}
}
}
```Drag to resize
Here's the complete implementation across three files:
**index.html**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conway's Game of Life</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Conway's Game of Life</h1>
<div class="controls">
<button id="startPause">Start</button>
<button id="reset">Reset</button>
<button id="clear">Clear</button>
<div>Generation: <span id="generation">0</span></div>
</div>
<div id="grid" class="grid"></div>
</div>
<script src="script.js"></script>
</body>
</html>
```
**style.css**
```css
.grid {
display: grid;
grid-template-columns: repeat(36, 20px);
grid-template-rows: repeat(9, 20px);
gap: 1px;
margin: 20px auto;
border: 1px solid #ccc;
max-width: 740px;
}
.cell {
width: 20px;
height: 20px;
background-color: #fff;
border: 1px solid #ddd;
}
.cell.alive {
background-color: #000;
}
.controls {
margin: 20px 0;
text-align: center;
}
button {
padding: 8px 16px;
margin: 0 5px;
cursor: pointer;
}
.container {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
```
**script.js**
```javascript
// Game state variables
let grid = [];
let isRunning = false;
let intervalId = null;
let generation = 0;
// DOM elements
const startPauseBtn = document.getElementById('startPause');
const resetBtn = document.getElementById('reset');
const clearBtn = document.getElementById('clear');
const generationEl = document.getElementById('generation');
const gridEl = document.getElementById('grid');
// Initialize grid with Gosper Glider Gun pattern
function initializeGrid() {
const rows = 9;
const cols = 36;
grid = Array.from({ length: rows }, () => Array(cols).fill(false));
// Left side of the pattern
const leftCells = [
[0,0], [0,1], [1,0], [1,1], // 2x2 block
[0,10], [0,11], [1,10], [1,11], // Left block
[2,10], [2,11], // Left middle
[3,12], [3,13], [4,12], [4,13], [5,12], [5,13], // Left gun
[6,14], [7,14], [8,14] // Left tail
];
// Right side (mirror of left)
const rightCells = leftCells.map(([x, y]) => [35 - x, y]);
// Combine all cells
[...leftCells, ...rightCells].forEach(([x, y]) => {
if (y >= 0 && y < rows && x >= 0 && x < cols) {
grid[y][x] = true;
}
});
}
// Render grid to DOM
function renderGrid() {
gridEl.innerHTML = '';
const rows = grid.length;
const cols = grid[0].length;
for (let y = 0; y < rows; y++) {
for (let x = 0; x < cols; x++) {
const cell = document.createElement('div');
cell.className = `cell${grid[y][x] ? ' alive' : ''}`;
gridEl.appendChild(cell);
}
}
}
// Count live neighbors for a cell
function countNeighbors(x, y) {
const rows = grid.length;
const cols = grid[0].length;
let count = 0;
for (let dy = -1; dy <= 1; dy++) {
for (let dx = -1; dx <= 1; dx++) {
if (dx === 0 && dy === 0) continue;
const nx = x + dx;
const ny = y + dy;
if (nx >= 0 && nx < cols && ny >= 0 && ny < rows) {
if (grid[ny][nx]) count++;
}
}
}
return count;
}
// Compute next generation
function computeNextGeneration() {
const rows = grid.length;
const cols = grid[0].length;
const newGrid = Array.from({ length: rows }, () => Array(cols).fill(false));
for (let y = 0; y < rows; y++) {
for (let x = 0; x < cols; x++) {
const neighbors = countNeighbors(x, y);
const isAlive = grid[y][x];
if (isAlive) {
newGrid[y][x] = neighbors === 2 || neighbors === 3;
} else {
newGrid[y][x] = neighbors === 3;
}
}
}
grid = newGrid;
generation++;
generationEl.textContent = generation;
renderGrid();
}
// Event handlers
startPauseBtn.addEventListener('click', () => {
if (isRunning) {
clearInterval(intervalId);
startPauseBtn.textContent = 'Start';
} else {
intervalId = setInterval(computeNextGeneration, 100);
startPauseBtn.textContent = 'Pause';
}
isRunning = !isRunning;
});
resetBtn.addEventListener('click', () => {
initializeGrid();
generation = 0;
generationEl.textContent = generation;
renderGrid();
if (isRunning) {
clearInterval(intervalId);
isRunning = false;
startPauseBtn.textContent = 'Start';
}
});
clearBtn.addEventListener('click', () => {
grid = Array.from({ length: grid.length }, () => Array(grid[0].length).fill(false));
generation = 0;
generationEl.textContent = generation;
renderGrid();
if (isRunning) {
clearInterval(intervalId);
isRunning = false;
startPauseBtn.textContent = 'Start';
}
});
// Initial setup
initializeGrid();
renderGrid();
```
This implementation features:
1. A 36x9 grid with the Gosper Glider Gun pattern pre-loaded
2. Start/Pause, Reset, and Clear buttons
3. Generation counter
4. Proper Game of Life rules implementation
5. Responsive grid layout with CSS Grid
6. Clean UI with visual feedback for live/dead cells
The simulation starts paused, and the user can start it with the Start button. The grid maintains the Gosper Glider Gun pattern until modified by the user.Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Conway's Game of Life: Gosper Glider Gun Demo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Conway's Game of Life</h1>
<div class="controls">
<button id="start">Start</button>
<button id="pause" disabled>Pause</button>
<button id="reset">Reset</button>
<button id="clear">Clear</button>
<span class="generation">Generation: <span id="generation">0</span></span>
</div>
<div class="board-container">
<canvas id="gameCanvas" width="960" height="420"></canvas>
</div>
<p class="hint">
Initial pattern: <strong>Gosper Glider Gun</strong>.<br>
Click cells to toggle state while paused. Use the controls to run, pause, reset, or clear the grid.
</p>
<script src="app.js"></script>
</body>
</html>
```
```css
/* style.css */
body {
font-family: 'Segoe UI', 'Arial', sans-serif;
background: #f3f3f7;
color: #2d2d2d;
margin: 0;
padding: 0;
box-sizing: border-box;
text-align: center;
}
h1 {
margin-top: 30px;
margin-bottom: 10px;
letter-spacing: 1px;
}
.controls {
margin: 18px 0 12px 0;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
.controls button {
padding: 7px 20px;
font-size: 15px;
border: none;
background: #3192e0;
color: #fff;
border-radius: 5px;
cursor: pointer;
transition: background 0.13s;
outline: none;
}
.controls button:disabled {
background: #a8c8e7;
cursor: default;
}
.controls .generation {
font-weight: 600;
margin-left: 26px;
font-size: 16px;
}
.board-container {
max-width: 970px;
margin: 0 auto 20px auto;
box-shadow: 0 2px 12px #aaa4 ;
background: #fff;
padding: 4px 4px 12px 4px;
border-radius: 9px;
}
#gameCanvas {
background: #242328;
display: block;
margin: auto;
border-radius: 3px;
box-shadow: 0 1px 7px #0002;
cursor: pointer;
}
.hint {
color: #575687;
margin-top: 0;
}
```
```javascript
// app.js
// === CONFIGURATION ===
const ROWS = 30;
const COLS = 70;
const CELL_SIZE = 14; // pixels
const CANVAS_WIDTH = COLS * CELL_SIZE;
const CANVAS_HEIGHT = ROWS * CELL_SIZE;
const INTERVAL = 100; // milliseconds per generation
// === Utils ===
// Gosper Glider Gun pattern, as relative (row, col) offsets
// Reference: https://conwaylife.com/wiki/Gosper_glider_gun
const GOSPER_GLIDER_GUN_PATTERN = [
[5,1],[5,2],[6,1],[6,2],
[5,11],[6,11],[7,11],
[4,12],[8,12],
[3,13],[9,13],[3,14],[9,14],
[6,15],
[4,16],[8,16],
[5,17],[6,17],[7,17],
[6,18],
[3,21],[4,21],[5,21],
[3,22],[4,22],[5,22],
[2,23],[6,23],
[1,25],[2,25],[6,25],[7,25],
[3,35],[4,35],[3,36],[4,36]
];
// === DOM ELEMENTS ===
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const startBtn = document.getElementById('start');
const pauseBtn = document.getElementById('pause');
const resetBtn = document.getElementById('reset');
const clearBtn = document.getElementById('clear');
const genDisplay = document.getElementById('generation');
// === STATE ===
let grid = [];
let buffer = [];
let running = false;
let timer = null;
let generation = 0;
// === CORE LOGIC ===
// Initialize grid with all dead
function makeGrid(val = 0) {
return Array.from({length: ROWS}, () => Array(COLS).fill(val));
}
// Load Gosper Glider Gun, offset so it fits well on our grid
function loadGosperGliderGun(grid) {
// Offset so pattern is visible in upper left/middle (e.g. (row+1, col+1))
const rowOff = 1, colOff = 1;
GOSPER_GLIDER_GUN_PATTERN.forEach(([r, c]) => {
const rr = r + rowOff, cc = c + colOff;
if (rr >= 0 && rr < ROWS && cc >= 0 && cc < COLS)
grid[rr][cc] = 1;
});
}
// === RENDERING ===
function drawGrid() {
ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
// Draw alive cells
for (let r=0; r<ROWS; ++r) {
for (let c=0; c<COLS; ++c) {
if (grid[r][c]) {
ctx.fillStyle = '#24c743';
ctx.fillRect(c*CELL_SIZE, r*CELL_SIZE, CELL_SIZE, CELL_SIZE);
}
}
}
// Draw grid lines
ctx.strokeStyle = '#403e4a';
ctx.lineWidth = 1;
for (let r=0; r<=ROWS; ++r) {
ctx.beginPath();
ctx.moveTo(0, r*CELL_SIZE + 0.5);
ctx.lineTo(CANVAS_WIDTH, r*CELL_SIZE + 0.5);
ctx.stroke();
}
for (let c=0; c<=COLS; ++c) {
ctx.beginPath();
ctx.moveTo(c*CELL_SIZE + 0.5, 0);
ctx.lineTo(c*CELL_SIZE + 0.5, CANVAS_HEIGHT);
ctx.stroke();
}
// Optionally: draw lighter overlay for dead cells? Up to design.
}
// === SIMULATION ===
function countNeighbors(grid, row, col) {
let n = 0;
for (let dr=-1; dr<=1; ++dr) {
for (let dc=-1; dc<=1; ++dc) {
if (dr === 0 && dc === 0) continue;
let r2 = row + dr, c2 = col + dc;
if (r2 >= 0 && r2 < ROWS && c2 >= 0 && c2 < COLS)
n += grid[r2][c2];
}
}
return n;
}
function step() {
// Compute next state
for (let r=0; r<ROWS; ++r) {
for (let c=0; c<COLS; ++c) {
const alive = grid[r][c];
const n = countNeighbors(grid, r, c);
let next = 0;
if (alive) {
if (n === 2 || n === 3) next = 1;
else next = 0;
} else {
if (n === 3) next = 1;
}
buffer[r][c] = next;
}
}
// Swap buffers
[grid, buffer] = [buffer, grid];
++generation;
updateGenerationDisplay();
drawGrid();
}
// === UI CONTROLS ===
function startSimulation() {
if (running) return;
running = true;
startBtn.disabled = true;
pauseBtn.disabled = false;
timer = setInterval(step, INTERVAL);
}
function pauseSimulation() {
if (!running) return;
running = false;
startBtn.disabled = false;
pauseBtn.disabled = true;
if (timer) clearInterval(timer);
timer = null;
}
function resetGrid() {
pauseSimulation();
grid = makeGrid(0);
buffer = makeGrid(0);
generation = 0;
loadGosperGliderGun(grid);
updateGenerationDisplay();
drawGrid();
}
function clearGrid() {
pauseSimulation();
grid = makeGrid(0);
buffer = makeGrid(0);
generation = 0;
updateGenerationDisplay();
drawGrid();
}
function updateGenerationDisplay() {
genDisplay.textContent = generation;
}
// === INTERACTION ===
// Toggle cell on click (only when paused)
canvas.addEventListener('click', function(evt) {
if (running) return;
const rect = canvas.getBoundingClientRect();
const x = evt.clientX - rect.left, y = evt.clientY - rect.top;
const c = Math.floor(x / CELL_SIZE), r = Math.floor(y / CELL_SIZE);
if (r >= 0 && r < ROWS && c >= 0 && c < COLS) {
grid[r][c] = grid[r][c] ? 0 : 1;
drawGrid();
}
});
startBtn.addEventListener('click', startSimulation);
pauseBtn.addEventListener('click', pauseSimulation);
resetBtn.addEventListener('click', resetGrid);
clearBtn.addEventListener('click', clearGrid);
// === INITIALIZATION ===
function setup() {
canvas.width = CANVAS_WIDTH;
canvas.height = CANVAS_HEIGHT;
grid = makeGrid(0);
buffer = makeGrid(0);
generation = 0;
loadGosperGliderGun(grid);
drawGrid();
updateGenerationDisplay();
startBtn.disabled = false;
pauseBtn.disabled = true;
}
window.onload = setup;
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Conway's Game of Life – Gosper Glider Gun</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Conway’s Game of Life</h1>
<div id="controls">
<button id="startPauseBtn">Start</button>
<button id="resetBtn">Reset</button>
<button id="clearBtn">Clear</button>
<span id="generationLabel">Generation: <span id="generation">0</span></span>
</div>
<div id="grid-container"></div>
<script src="script.js"></script>
</body>
</html>
```
```css
/* styles.css */
:root {
--cell-size: 8px;
--grid-gap: 1px;
--bg-color: #f8f8f8;
--cell-alive: #0b5394;
--cell-dead: #ffffff;
--border-color: #cccccc;
--font-family: system-ui, sans-serif;
}
body {
margin: 0;
padding: 20px;
background: var(--bg-color);
font-family: var(--font-family);
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
margin: 0 0 12px 0;
font-size: 1.5rem;
}
#controls {
margin-bottom: 12px;
display: flex;
gap: 8px;
align-items: center;
}
button {
padding: 8px 14px;
font-size: 0.9rem;
cursor: pointer;
border: 1px solid var(--border-color);
background-color: white;
border-radius: 4px;
}
button:hover {
background-color: #f0f0f0;
}
#generationLabel {
font-weight: 600;
font-size: 0.9rem;
}
#grid-container {
display: inline-grid;
gap: var(--grid-gap);
border: 1px solid var(--border-color);
background: var(--border-color);
}
/* Cell styling via CSS grid's nth-child approach is possible, but easier via JS-class toggle. */
.cell {
width: var(--cell-size);
height: var(--cell-size);
background-color: var(--cell-dead);
}
.cell.alive {
background-color: var(--cell-alive);
}
```
```javascript
// script.js
const ROWS = 50;
const COLS = 80;
// Gosper Glider Gun pattern coordinates
const GOSPER_GUN = [
[5, 1],
[5, 2],
[6, 1],
[6, 2],
[5, 11],
[6, 11],
[7, 11],
[4, 12],
[3, 13],
[3, 14],
[8, 12],
[9, 13],
[9, 14],
[6, 15],
[4, 16],
[5, 17],
[6, 17],
[7, 17],
[6, 18],
[8, 16],
[3, 21],
[4, 21],
[5, 21],
[3, 22],
[4, 22],
[5, 22],
[2, 23],
[6, 23],
[1, 25],
[2, 25],
[6, 25],
[7, 25],
[3, 35],
[4, 35],
[3, 36],
[4, 36],
];
let grid = createEmptyGrid(ROWS, COLS);
let nextGrid = createEmptyGrid(ROWS, COLS);
let generation = 0;
let interval = null;
let running = false;
const gridContainer = document.getElementById('grid-container');
const startPauseBtn = document.getElementById('startPauseBtn');
const resetBtn = document.getElementById('resetBtn');
const clearBtn = document.getElementById('clearBtn');
const generationDisplay = document.getElementById('generation');
setupGrid();
loadGosperGun();
renderGrid();
startPauseBtn.addEventListener('click', startPause);
resetBtn.addEventListener('click', resetSimulation);
clearBtn.addEventListener('click', clearGrid);
/* ---------- Grid and Drawing ---------- */
function createEmptyGrid(rows, cols) {
return Array.from({ length: rows }, () => Array(cols).fill(0));
}
function setupGrid() {
gridContainer.style.gridTemplateColumns = `repeat(${COLS}, var(--cell-size))`;
gridContainer.innerHTML = '';
for (let r = 0; r < ROWS; r++) {
for (let c = 0; c < COLS; c++) {
const cell = document.createElement('div');
cell.classList.add('cell');
cell.dataset.row = r;
cell.dataset.col = c;
gridContainer.appendChild(cell);
}
}
}
function renderGrid() {
const cells = gridContainer.children;
for (let r = 0; r < ROWS; r++) {
for (let c = 0; c < COLS; c++) {
const idx = r * COLS + c;
cells[idx].classList.toggle('alive', grid[r][c] === 1);
}
}
}
/* ---------- Conway Logic ---------- */
function countLiveNeighbors(r, c) {
let count = 0;
for (let dr of [-1, 0, 1]) {
for (let dc of [-1, 0, 1]) {
if (dr === 0 && dc === 0) continue;
const nr = r + dr;
const nc = c + dc;
if (nr >= 0 && nr < ROWS && nc >= 0 && nc < COLS) {
count += grid[nr][nc];
}
}
}
return count;
}
function updateSimulation() {
for (let r = 0; r < ROWS; r++) {
for (let c = 0; c < COLS; c++) {
const neighbors = countLiveNeighbors(r, c);
const alive = grid[r][c] === 1;
if (alive && (neighbors === 2 || neighbors === 3)) {
nextGrid[r][c] = 1; // Lives on
} else if (!alive && neighbors === 3) {
nextGrid[r][c] = 1; // Born
} else {
nextGrid[r][c] = 0; // Dies or stays dead
}
}
}
// Swap grids
[grid, nextGrid] = [nextGrid, grid];
generation++;
generationDisplay.textContent = generation;
renderGrid();
}
/* ---------- Controls ---------- */
function startPause() {
if (running) {
clearInterval(interval);
startPauseBtn.textContent = 'Start';
} else {
interval = setInterval(updateSimulation, 100);
startPauseBtn.textContent = 'Pause';
}
running = !running;
}
function resetSimulation() {
if (running) startPause(); // pause if running
loadGosperGun();
generation = 0;
generationDisplay.textContent = generation;
renderGrid();
}
function clearGrid() {
if (running) startPause();
grid = createEmptyGrid(ROWS, COLS);
nextGrid = createEmptyGrid(ROWS, COLS);
generation = 0;
generationDisplay.textContent = 0;
renderGrid();
}
/* ---------- Patterns ---------- */
function loadGosperGun() {
grid = createEmptyGrid(ROWS, COLS);
nextGrid = createEmptyGrid(ROWS, COLS);
for (const [r, c] of GOSPER_GUN) {
if (r < ROWS && c < COLS) {
grid[r][c] = 1;
}
}
}
```Drag to resize
### Conway's Game of Life Implementation
Below is the implementation of Conway's Game of Life using HTML, CSS, and vanilla JavaScript. The code is divided into three distinct files: `index.html`, `style.css`, and `script.js`.
#### index.html
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conway's Game of Life</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="grid-container">
<canvas id="grid" width="800" height="600"></canvas>
<div class="controls">
<button id="start-pause-btn">Start</button>
<button id="reset-btn">Reset</button>
<button id="clear-btn">Clear</button>
<span id="generation-counter">Generation: 0</span>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
#### style.css
```css
.grid-container {
display: flex;
flex-direction: column;
align-items: center;
}
#grid {
border: 1px solid black;
}
.controls {
margin-top: 10px;
}
button {
margin: 0 5px;
}
#generation-counter {
margin-left: 10px;
}
```
#### script.js
```javascript
class GameOfLife {
constructor(canvasId, cellSize = 10) {
this.canvas = document.getElementById(canvasId);
this.ctx = this.canvas.getContext('2d');
this.cellSize = cellSize;
this.gridWidth = Math.floor(this.canvas.width / this.cellSize);
this.gridHeight = Math.floor(this.canvas.height / this.cellSize);
this.grid = this.initializeGrid();
this.generation = 0;
this.running = false;
this.initEventListeners();
this.loadGosperGliderGun();
this.drawGrid();
this.updateGenerationCounter();
}
initializeGrid() {
let grid = [];
for (let i = 0; i < this.gridHeight; i++) {
grid[i] = [];
for (let j = 0; j < this.gridWidth; j++) {
grid[i][j] = 0;
}
}
return grid;
}
loadGosperGliderGun() {
// Gosper Glider Gun pattern
let pattern = [
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1],
[0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1],
[1,1,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[1,1,0,0,0,0,0,0,0,0,1,0,0,0,1,0,1,1,0,0,0,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
];
let offsetX = Math.floor((this.gridWidth - pattern[0].length) / 2);
let offsetY = Math.floor((this.gridHeight - pattern.length) / 2);
for (let i = 0; i < pattern.length; i++) {
for (let j = 0; j < pattern[i].length; j++) {
this.grid[offsetY + i][offsetX + j] = pattern[i][j];
}
}
}
initEventListeners() {
document.getElementById('start-pause-btn').addEventListener('click', () => {
this.running = !this.running;
document.getElementById('start-pause-btn').textContent = this.running ? 'Pause' : 'Start';
if (this.running) {
this.runSimulation();
}
});
document.getElementById('reset-btn').addEventListener('click', () => {
this.reset();
});
document.getElementById('clear-btn').addEventListener('click', () => {
this.clear();
});
}
drawGrid() {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
for (let i = 0; i < this.gridHeight; i++) {
for (let j = 0; j < this.gridWidth; j++) {
if (this.grid[i][j] === 1) {
this.ctx.fillStyle = 'black';
this.ctx.fillRect(j * this.cellSize, i * this.cellSize, this.cellSize, this.cellSize);
}
}
}
}
countNeighbors(i, j) {
let count = 0;
for (let x = -1; x <= 1; x++) {
for (let y = -1; y <= 1; y++) {
let col = (j + y + this.gridWidth) % this.gridWidth;
let row = (i + x + this.gridHeight) % this.gridHeight;
count += this.grid[row][col];
}
}
count -= this.grid[i][j];
return count;
}
nextGeneration() {
let newGrid = this.initializeGrid();
for (let i = 0; i < this.gridHeight; i++) {
for (let j = 0; j < this.gridWidth; j++) {
let neighbors = this.countNeighbors(i, j);
if (this.grid[i][j] === 1 && (neighbors < 2 || neighbors > 3)) {
newGrid[i][j] = 0;
} else if (this.grid[i][j] === 0 && neighbors === 3) {
newGrid[i][j] = 1;
} else {
newGrid[i][j] = this.grid[i][j];
}
}
}
this.grid = newGrid;
this.generation++;
}
runSimulation() {
if (this.running) {
this.nextGeneration();
this.drawGrid();
this.updateGenerationCounter();
setTimeout(() => this.runSimulation(), 100);
}
}
reset() {
this.running = false;
document.getElementById('start-pause-btn').textContent = 'Start';
this.grid = this.initializeGrid();
this.loadGosperGliderGun();
this.generation = 0;
this.drawGrid();
this.updateGenerationCounter();
}
clear() {
this.running = false;
document.getElementById('start-pause-btn').textContent = 'Start';
this.grid = this.initializeGrid();
this.generation = 0;
this.drawGrid();
this.updateGenerationCounter();
}
updateGenerationCounter() {
document.getElementById('generation-counter').textContent = `Generation: ${this.generation}`;
}
}
let game = new GameOfLife('grid');
```
This code creates a Conway's Game of Life simulation with a grid size of 800x600 pixels, divided into cells of size 10x10 pixels. The Gosper Glider Gun pattern is loaded into the grid upon initialization. The user can start and pause the simulation, reset the grid to the initial state, and clear the grid. The current generation number is displayed and updated in real-time.Drag to resize