Canvas Tilemap Renderer

{"claude_md":"# Canvas Tilemap Renderer\n\nProcedural terrain generation with tile rendering, camera panning, and minimap overlay. Advanced HTML5 Canvas tutorial.\n\n## Quick Reference\n\n# Canvas Tilemap Renderer\n\n> **Difficulty:** Advanced | **Runtime:** HTML5 Canvas | **Output:** Interactive tilemap\n\nTeach an AI agent to generate procedural terrain, render it as a colored tile grid, implement camera panning, and display a minimap overlay — all in a single HTML file.\n\n## What You'll Build\n\nA self-contained HTML file featuring:\n- Procedural terrain generation using seeded random noise\n- Tile rendering with distinct terrain types (grass, water, sand, trees, mountains)\n- Arrow-key camera panning across a world larger than the viewport\n- A minimap overlay showing the full map with a camera indicator\n- Configurable world size and tile palette\n\n## Core Concepts\n\n### 1. Terrain Generation\n\nUse a simple value-noise approach:\n1. Create a 2D array of random values (seeded)\n2. Smooth with neighbor averaging\n3. Map value ranges to terrain types\n\n| Value Range | Terrain | Color |\n|------------|---------|-------|\n| 0.00–0.30 | Water | `#2563eb` |\n| 0.30–0.45 | Sand | `#eab308` |\n| 0.45–0.65 | Grass | `#16a34a` |\n| 0.65–0.80 | Trees | `#15803d` |\n| 0.80–1.00 | Mountain | `#78716c` |\n\n### 2. Camera System\n\nThe viewport shows a portion of the world:\n```\ncamera = { x: 0, y: 0 }\nvisible_cols = floor(canvas.width / TILE_SIZE)\nvisible_rows = floor(canvas.height / TILE_SIZE)\n```\n\nArrow keys shift the camera. Clamp to world bounds.\n\n### 3. Minimap\n\nA small (150x150) overlay in the corner:\n- Draws each tile as a 1-2px dot\n- Highlights the camera's current viewport as a white rectangle\n- Updates every frame\n\n### 4. Rendering Pipeline\n\nEach frame:\n1. Calculate visible tile range from camera position\n2. Draw only visible tiles (culling)\n3. Draw grid lines (optional)\n4. Draw minimap overlay\n5. Draw HUD (coordinates, terrain info)\n\n## Instructions\n\n1. Create the canvas and set up keyboard input\n2. Generate the world map using seeded noise\n3. Implement tile rendering with camera offset\n4. Add arrow-key panning with bounds checking\n5. Draw the minimap in the top-right corner\n6. Display camera coordinates as HUD\n\n## Parameters\n\n| Parameter | Default | Description |\n|-----------|---------|-------------|\n| `WORLD_W` | 100 | World width in tiles |\n| `WORLD_H` | 80 | World height in tiles |\n| `TILE_SIZE` | 12 | Tile size in pixels |\n| `SEED` | 42 | Random seed for terrain |\n| `SMOOTH_PASSES` | 3 | Noise smoothing iterations |\n\n## Agent Docs (read when relevant)\n\n| File | When to read |\n|------|-------------|\n| `agent_docs/tilemap.html` | tilemap |\n| `agent_docs/README.md` | README |\n","agent_docs":{"agent_docs/tilemap.html":"\n\n\n\nCanvas Tilemap Renderer\n\n\n\n

\n\n\n","agent_docs/README.md":"# Canvas Tilemap Renderer\n\nA procedurally generated tilemap with camera panning and minimap overlay.\n\n## Running\n\nOpen `tilemap.html` in any modern browser. Use arrow keys or WASD to pan the camera across the terrain.\n\n## Terrain Types\n\n| Color | Terrain |\n|-------|---------|\n| Blue | Water |\n| Yellow | Sand |\n| Green | Grass |\n| Dark Green | Trees |\n| Gray | Mountain |\n\n## Customization\n\nEdit the constants in the script:\n- `WORLD_W` / `WORLD_H` — world dimensions in tiles\n- `TILE_SIZE` — pixel size per tile\n- `seed` — change for different terrain layouts\n- `SMOOTH_PASSES` — more passes = smoother terrain"}}