Conway's Game of Life · deepseek-r1
Run Conway's Game of Life on a full-screen canvas grid with click-and-drag to toggle cells, plus play/pause, step, randomize, and clear controls.
This one-shot run produced no runnable artifact.
agent produced no index.html
The transcript below shows what the model did — read it to see why the one shot fell short.
transcript · 2 messages
Run Conway's Game of Life on a full-screen canvas grid with click-and-drag to toggle cells, plus play/pause, step, randomize, and clear controls.
thinking
We are going to create a single HTML file (index.html) that contains:
- A full-screen canvas for the Game of Life grid.
- Controls: play/pause button, step button, randomize button, clear button.
- Click and drag to toggle cells (alive/dead).
We'll structure the HTML with:
- A container for the canvas and controls.
- The canvas will be set to 100% width and height of the viewport.
- We'll use JavaScript to handle the game logic and user interactions.
Important considerations:
- The grid will be represented as a 2D array in JavaScript.
- We'll use requestAnimationFrame for the animation loop when playing.
- We need to handle window resize to adjust the grid resolution appropriately?
But note: the grid is fixed in terms of cell count? Or should we adjust the grid to the canvas size?
- We'll make the grid fixed in terms of cell dimensions (e.g., each cell is 10x10 pixels) and then set the grid dimensions based on the canvas size.
Alternatively, we can set the grid dimensions (rows and columns) to match the canvas size divided by the cell size. We'll compute the number of rows and columns based on the current window size.
Steps:
1. HTML structure:
- A div for controls (buttons: play/pause, step, randomize, clear).
- A canvas element.
2. CSS:
- Set body margin to 0 to avoid scrollbars.
- Make the canvas full screen.
3. JavaScript:
- Define constants: cell size (e.g., 10 pixels).
- State variables:
grid (2D array),
nextGrid (for computing next state),
isPlaying (boolean),
animation frame ID.
- Functions:
initGrid(): create an empty grid (all dead) with dimensions based on canvas size.
randomizeGrid(): fill the grid randomly.
clearGrid(): set all cells to dead.
drawGrid(): draw the grid on the canvas.
nextStep(): compute the next generation.
update(): if playing, compute next generation and draw, then request next frame.
- Event listeners:
on buttons: play/pause, step, randomize, clear.
on canvas: mousedown, mousemove (for dragging), mouseup.
- Mouse handling:
When mouse is down, we toggle the cell under the mouse and then on drag we continue toggling.
- Grid update:
We'll use the standard Conway's Game of Life rules.
Implementation:
We'll write the entire code in one HTML file.
Note: We must not use external resources.
Let's write the index.html file.
I'll create a self-contained HTML file for Conway's Game of Life with all requested features. Here's the implementation: ```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 { margin: 0; overflow: hidden; background: #111; font-family: Arial, sans-serif; } #game-container { position: relative; width: 100vw; height: 100vh; } canvas { display: block; background: #000; } #controls { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; padding: 10px; background: rgba(0, 0, 0, 0.7); border-radius: 5px; } button { padding: 8px 15px; background: #444; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background 0.3s; } button:hover { background: #666; } #status { color: white; position: absolute; top: 10px; left: 10px; background: rgba(0, 0, 0, 0.7); padding: 5px 10px; border-radius: 4px; } </style> </head> <body> <div id="game-container"> <canvas id="game-canvas"></canvas> <div id="status">Paused | Generation: 0</div> <div id="controls"> <button id="play-pause">Play</button> <button id="step">Step</button> <button id="random">Randomize</button> <button id="clear">Clear</button> </div> </div> <script> // Constants const CELL_SIZE = 10; const ALIVE_COLOR = '#0f0'; const DEAD_COLOR = '#222'; // Game state let grid = []; let nextGrid = []; let isPlaying = false; let generation = 0; let animationId = null; let isDragging = false; let lastCell = { x: -1, y: -1 }; // DOM elements const canvas = document.getElementById('game-canvas'); const ctx = canvas.getContext('2d'); const playPauseBtn = document.getElementById('play-pause'); const stepBtn = document.getElementById('step'); const randomBtn = document.getElementById('random'); const clearBtn = document.getElementById('clear'); const statusDiv = document.getElementById('status'); // Initialize canvas function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; initGrid(); drawGrid(); } // Initialize grid function initGrid() { const cols = Math.floor(canvas.width / CELL_SIZE); const rows = Math.floor(canvas.height / CELL_SIZE); grid = Array(rows).fill().map(() => Array(cols).fill(0)); nextGrid = Array(rows).fill().map(() => Array(cols).fill(0)); } // Draw grid function drawGrid() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let y = 0; y < grid.length; y++) { for (let x = 0; x < grid[0].length; x++) { ctx.fillStyle = grid[y][x] ? ALIVE_COLOR : DEAD_COLOR; ctx.fillRect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE - 1, CELL_SIZE - 1); } } } // Compute next generation function computeNextGeneration() { for (let y = 0; y < grid.length; y++) { for (let x = 0; x < grid[0].length; x++) { const neighbors = countNeighbors(x, y); // Conway's Game of Life rules if (grid[y][x] === 1) { nextGrid[y][x] = (neighbors === 2 || neighbors === 3) ? 1 : 0; } else { nextGrid[y][x] = neighbors === 3 ? 1 : 0; } } } // Swap grids const temp = grid; grid = nextGrid; nextGrid = temp; generation++; updateStatus(); } // Count live neighbors 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 nx = (x + dx + grid[0].length) % grid[0].length; const ny = (y + dy + grid.length) % grid.length; count += grid[ny][nx]; } } return count; } // Toggle cell state function toggleCell(x, y) { if (x >= 0 && x < grid[0].length && y >= 0 && y < grid.length) { grid[y][x] = grid[y][x] ? 0 : 1; drawGrid(); } } // Update status display function updateStatus() { statusDiv.textContent = `${isPlaying ? 'Playing' : 'Paused'} | Generation: ${generation}`; } // Event handlers playPauseBtn.addEventListener('click', () => { isPlaying = !isPlaying; playPauseBtn.textContent = isPlaying ? 'Pause' : 'Play'; updateStatus(); if (isPlaying) { function gameLoop() { computeNextGeneration(); drawGrid(); animationId = requestAnimationFrame(gameLoop); } gameLoop(); } else if (animationId) { cancelAnimationFrame(animationId); } }); stepBtn.addEventListener('click', () => { if (!isPlaying) { computeNextGeneration(); drawGrid(); } }); randomBtn.addEventListener('click', () => { for (let y = 0; y < grid.length; y++) { for (let x = 0; x < grid[0].length; x++) { grid[y][x] = Math.random() > 0.7 ? 1 : 0; } } generation = 0; updateStatus(); drawGrid(); }); clearBtn.addEventListener('click', () => { grid = grid.map(row => row.map(() => 0)); generation = 0; updateStatus(); drawGrid(); }); canvas.addEventListener('mousedown', (e) => { isDragging = true; const rect = canvas.getBoundingClientRect(); const x = Math.floor((e.clientX - rect.left) / CELL_SIZE); const y = Math.floor((e.clientY - rect.top) / CELL_SIZE); toggleCell(x, y); lastCell = { x, y }; }); canvas.addEventListener('mousemove', (e) => { if (!isDragging) return; const rect = canvas.getBoundingClientRect(); const x = Math.floor((e.clientX - rect.left) / CELL_SIZE); const y = Math.floor((e.clientY - rect.top) / CELL_SIZE); // Only toggle if we moved to a new cell if (x !== lastCell.x || y !== lastCell.y) { toggleCell(x, y); lastCell = { x, y }; } }); canvas.addEventListener('mouseup', () => { isDragging = false; }); canvas.addEventListener('mouseleave', () => { isDragging = false; }); // Initialize window.addEventListener('resize', resizeCanvas); resizeCanvas(); updateStatus(); </script> </body> </html> ``` This implementation features: 1. Full-screen canvas grid that automatically resizes with the window 2. Click-and-drag to toggle cell states between alive/dead 3. Control buttons: - Play/Pause: Starts/stops the simulation - Step: Advances one generation manually - Randomize: Fills grid with random live cells - Clear: Resets all cells to dead 4. Status display showing current play state and generation count 5. Game follows standard Conway's Game of Life rules: - Live cells with 2-3 neighbors survive - Dead cells with exactly 3 neighbors become alive - All other cells die or remain dead The entire implementation is contained in a single HTML file with embedded CSS and JavaScript, requiring no external resources or network access.
TAKE IT TO CODE
This run produced no artifact — reuse the prompt with a different model or your own pi-agent run.