Conway's Game of Life · qwen3-coder-30b-a3b-instruct
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.
```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> * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #1a1a1a; color: #e0e0e0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; overflow: hidden; height: 100vh; display: flex; flex-direction: column; } header { text-align: center; padding: 15px; background-color: #2d2d2d; border-bottom: 2px solid #444; } h1 { font-size: 2.2rem; margin-bottom: 8px; color: #4fc3f7; text-shadow: 0 0 8px rgba(79, 195, 247, 0.5); } .subtitle { font-size: 1rem; opacity: 0.8; } .container { display: flex; flex: 1; padding: 20px; gap: 20px; } .canvas-container { flex: 1; display: flex; justify-content: center; align-items: center; background-color: #222; border-radius: 8px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); overflow: hidden; } canvas { background-color: #000; cursor: cell; } .controls { width: 250px; background-color: #2d2d2d; border-radius: 8px; padding: 20px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; gap: 15px; } .control-group { background-color: #3a3a3a; padding: 15px; border-radius: 6px; } .control-group h2 { font-size: 1.2rem; margin-bottom: 12px; color: #4fc3f7; } .btn { background: linear-gradient(to bottom, #4a5568, #2d3748); color: white; border: none; padding: 12px 15px; border-radius: 4px; cursor: pointer; font-size: 1rem; transition: all 0.2s; width: 100%; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; } .btn:hover { background: linear-gradient(to bottom, #5a67d8, #4a5568); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); } .btn:active { transform: translateY(0); } .btn.play { background: linear-gradient(to bottom, #48bb78, #38a169); } .btn.play:hover { background: linear-gradient(to bottom, #68d391, #48bb78); } .btn.clear { background: linear-gradient(to bottom, #f56565, #e53e3e); } .btn.clear:hover { background: linear-gradient(to bottom, #fc8181, #f56565); } .stats { margin-top: 10px; font-size: 0.9rem; opacity: 0.8; } .instructions { font-size: 0.9rem; line-height: 1.5; margin-top: 10px; padding: 10px; background-color: #3a3a3a; border-radius: 4px; } .instructions ul { padding-left: 20px; margin-top: 8px; } .instructions li { margin-bottom: 5px; } @media (max-width: 768px) { .container { flex-direction: column; } .controls { width: 100%; } } </style> </head> <body> <header> <h1>Conway's Game of Life</h1> <div class="subtitle">A cellular automaton simulation</div> </header> <div class="container"> <div class="canvas-container"> <canvas id="gameCanvas"></canvas> </div> <div class="controls"> <div class="control-group"> <h2>Simulation Controls</h2> <button id="playPauseBtn" class="btn play"> <span>⏸ Pause</span> </button> <button id="stepBtn" class="btn"> <span>▶ Step</span> </button> <button id="randomBtn" class="btn"> <span>🎲 Randomize</span> </button> <button id="clearBtn" class="btn clear"> <span>🗑 Clear</span> </button> </div> <div class="control-group"> <h2>Simulation Stats</h2> <div class="stats"> <div>Generation: <span id="generationCount">0</span></div> <div>Live Cells: <span id="liveCellsCount">0</span></div> </div> </div> <div class="control-group"> <h2>How to Use</h2> <div class="instructions"> <ul> <li>Click on cells to toggle them on/off</li> <li>Drag to toggle multiple cells</li> <li>Click Play/Pause to start/stop simulation</li> <li>Use Step to advance one generation</li> <li>Randomize for a random starting pattern</li> <li>Clear to reset the grid</li> </ul> </div> </div> </div> </div> <script> // Game configuration const CELL_SIZE = 10; const GRID_WIDTH = Math.floor(window.innerWidth / CELL_SIZE); const GRID_HEIGHT = Math.floor((window.innerHeight - 150) / CELL_SIZE); // Canvas and context setup const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); // Set canvas dimensions canvas.width = GRID_WIDTH * CELL_SIZE; canvas.height = GRID_HEIGHT * CELL_SIZE; // Game state let grid = createEmptyGrid(); let nextGrid = createEmptyGrid(); let isRunning = false; let animationId = null; let generation = 0; let isDrawing = false; let isErasing = false; // DOM elements const playPauseBtn = document.getElementById('playPauseBtn'); const stepBtn = document.getElementById('stepBtn'); const randomBtn = document.getElementById('randomBtn'); const clearBtn = document.getElementById('clearBtn'); const generationCount = document.getElementById('generationCount'); const liveCellsCount = document.getElementById('liveCellsCount'); // Initialize grid with empty state function createEmptyGrid() { return Array(GRID_HEIGHT).fill().map(() => Array(GRID_WIDTH).fill(false)); } // Generate a random grid function randomizeGrid() { for (let y = 0; y < GRID_HEIGHT; y++) { for (let x = 0; x < GRID_WIDTH; x++) { grid[y][x] = Math.random() > 0.7; } } generation = 0; updateStats(); drawGrid(); } // Clear the grid function clearGrid() { grid = createEmptyGrid(); generation = 0; updateStats(); drawGrid(); } // Count live cells function countLiveCells() { let count = 0; for (let y = 0; y < GRID_HEIGHT; y++) { for (let x = 0; x < GRID_WIDTH; x++) { if (grid[y][x]) count++; } } return count; } // Update statistics display function updateStats() { generationCount.textContent = generation; liveCellsCount.textContent = countLiveCells(); } // Draw the grid function drawGrid() { ctx.clearRect(0, 0, canvas.width, canvas.height); // Draw cells for (let y = 0; y < GRID_HEIGHT; y++) { for (let x = 0; x < GRID_WIDTH; x++) { if (grid[y][x]) { ctx.fillStyle = '#4fc3f7'; ctx.fillRect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE); // Add a subtle 3D effect ctx.fillStyle = 'rgba(255, 255, 255, 0.2)'; ctx.fillRect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, 2); ctx.fillRect(x * CELL_SIZE, y * CELL_SIZE, 2, CELL_SIZE); } } } // Draw grid lines ctx.strokeStyle = '#333'; ctx.lineWidth = 0.5; // Vertical lines for (let x = 0; x <= GRID_WIDTH; x++) { ctx.beginPath(); ctx.moveTo(x * CELL_SIZE, 0); ctx.lineTo(x * CELL_SIZE, GRID_HEIGHT * CELL_SIZE); ctx.stroke(); } // Horizontal lines for (let y = 0; y <= GRID_HEIGHT; y++) { ctx.beginPath(); ctx.moveTo(0, y * CELL_SIZE); ctx.lineTo(GRID_WIDTH * CELL_SIZE, y * CELL_SIZE); ctx.stroke(); } updateStats(); } // Get cell coordinates from mouse position function getCellFromMousePosition(e) { const rect = canvas.getBoundingClientRect(); const x = Math.floor((e.clientX - rect.left) / CELL_SIZE); const y = Math.floor((e.clientY - rect.top) / CELL_SIZE); return { x, y }; } // Handle mouse down function handleMouseDown(e) { const { x, y } = getCellFromMousePosition(e); if (x >= 0 && x < GRID_WIDTH && y >= 0 && y < GRID_HEIGHT) { isDrawing = true; isErasing = !grid[y][x]; grid[y][x] = !grid[y][x]; drawGrid(); } } // Handle mouse move function handleMouseMove(e) { if (!isDrawing) return; const { x, y } = getCellFromMousePosition(e); if (x >= 0 && x < GRID_WIDTH && y >= 0 && y < GRID_HEIGHT) { grid[y][x] = !isErasing; drawGrid(); } } // Handle mouse up function handleMouseUp() { isDrawing = false; isErasing = false; } // Count 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 nx = (x + dx + GRID_WIDTH) % GRID_WIDTH; const ny = (y + dy + GRID_HEIGHT) % GRID_HEIGHT; if (grid[ny][nx]) count++; } } return count; } // Compute next generation function computeNextGeneration() { for (let y = 0; y < GRID_HEIGHT; y++) { for (let x = 0; x < GRID_WIDTH; x++) { const neighbors = countNeighbors(x, y); const isAlive = grid[y][x]; // Apply Conway's Game of Life rules if (isAlive && (neighbors < 2 || neighbors > 3)) { nextGrid[y][x] = false; // Dies } else if (!isAlive && neighbors === 3) { nextGrid[y][x] = true; // Born } else { nextGrid[y][x] = isAlive; // Stays the same } } } // Swap grids [grid, nextGrid] = [nextGrid, grid]; generation++; } // Game loop function gameLoop() { if (isRunning) { computeNextGeneration(); drawGrid(); animationId = requestAnimationFrame(gameLoop); } } // Start/stop simulation function toggleSimulation() { isRunning = !isRunning; playPauseBtn.innerHTML = isRunning ? '<span>⏸ Pause</span>' : '<span>▶ Play</span>'; if (isRunning) { gameLoop(); } else if (animationId) { cancelAnimationFrame(animationId); } } // Step to next generation function stepSimulation() { if (!isRunning) { computeNextGeneration(); drawGrid(); } } // Event listeners canvas.addEventListener('mousedown', handleMouseDown); canvas.addEventListener('mousemove', handleMouseMove); canvas.addEventListener('mouseup', handleMouseUp); canvas.addEventListener('mouseleave', handleMouseUp); // Button event listeners playPauseBtn.addEventListener('click', toggleSimulation); stepBtn.addEventListener('click', stepSimulation); randomBtn.addEventListener('click', randomizeGrid); clearBtn.addEventListener('click', clearGrid); // Initialize clearGrid(); drawGrid(); // Handle window resize window.addEventListener('resize', () => { // Recalculate grid dimensions const newWidth = Math.floor(window.innerWidth / CELL_SIZE); const newHeight = Math.floor((window.innerHeight - 150) / CELL_SIZE); // Resize canvas canvas.width = newWidth * CELL_SIZE; canvas.height = newHeight * CELL_SIZE; // Adjust grid dimensions GRID_WIDTH = newWidth; GRID_HEIGHT = newHeight; // Reset the grid with new dimensions grid = createEmptyGrid(); nextGrid = createEmptyGrid(); generation = 0; updateStats(); drawGrid(); }); </script> </body> </html> ```
TAKE IT TO CODE
This run produced no artifact — reuse the prompt with a different model or your own pi-agent run.