Minecraft Clone

Prompt

## Prompt for an AI‑generated Minecraft‑style Web Clone \n*(No code output – only a complete, detailed specification and plan for implementation)* \n\n---\n\n### 1. High‑level Overview \n\n**Goal**: Build a minimal, web‑based Minecraft clone that supports *block creation* and *block destruction* in a 3‑D voxel world. \n- **Platform**: Browser (desktop & mobile). \n- **Tech stack**: \n - Front‑end rendering: **Three.js** (WebGL) or **Babylon.js** (pick one). \n - State management: **Redux** or **Vuex** (depending on chosen framework). \n - Backend (optional for persistence): **Node.js + Express** with **SQLite** or **IndexedDB** for local storage. \n - Build tool: **Webpack** or **Vite**. \n - UI framework: **React**, **Vue**, or **Svelte** (pick one). \n- **Core Features**: \n 1. Procedurally generated terrain (simple noise‑based heightmap). \n 2. Real‑time block placement (right‑click) and removal (left‑click). \n 3. Basic first‑person controls (WASD + mouse look). \n 4. Collision detection & simple physics (no gravity, just ground). \n 5. Optional: simple UI for selecting block types. \n\n---\n\n### 2. Detailed Feature Breakdown \n\n| Feature | Description | Key Implementation Points |\n|---------|-------------|---------------------------|\n| **World Generation** | Generate a 2‑D height map that is used to create a 3‑D voxel grid. | • Use Perlin/simplex noise for terrain. <br>• Divide world into **chunks** (e.g., 16x16x16 blocks). <br>• Store chunk data as 3‑D arrays of block IDs. |\n| **Block Types** | A small palette (e.g., dirt, grass, stone, water, wood). | • Map each type to a unique ID. <br>• Store textures in a texture atlas. |\n| **Rendering** | Render visible blocks only. | • Use Three.js voxel renderer (custom shader or `Mesh` per chunk). <br>• Culling faces that are adjacent to another block. |\n| **Controls** | FPS style navigation. | • Keyboard: `WASD` for movement. <br>• Mouse: yaw & pitch. <br>• Click: left to destroy, right to place. |\n| **Block Interaction** | Place/Destroy within reach (e.g., 3 blocks). | • Ray‑cast from camera into world. <br>• On hit, determine block face; offset to adjacent cell for placement. |\n| **Collision** | Prevent walking through solid blocks. | • Axis‑aligned bounding boxes (AABB). <br>• Simple collision check against neighboring block voxels. |\n| **UI** | Minimal block picker and HUD. | • 2‑D overlay with block icons. <br>• Show player health (if added later). |\n| **Persistence (Optional)** | Save world state locally. | • Use IndexedDB or localStorage to store chunk data. <br>• Load on startup, auto‑save on change. |\n| **Extensibility** | Architecture should allow adding new blocks, biomes, or multiplayer later. | • Separate data layer (chunk storage) from rendering. <br>• Expose an API for block updates. |\n\n---\n\n### 3. System Architecture \n\n```\n┌─────────────────────────────┐\n│ Browser UI │\n│ (React/Vue/Svelte) <───────┘\n└─────────────┬───────────────┘\n │\n ┌──────────▼───────────┐\n │ State & Store │\n │ (Redux/Vuex) │\n └──────────┬───────────┘\n │\n ┌──────────▼───────────┐\n │ Render Engine (Three.js)│\n │ • Chunk Meshes │\n │ • Block Textures │\n └──────────┬───────────┘\n │\n ┌──────────▼───────────┐\n │ Input/Interaction │\n │ • Ray‑cast logic │\n │ • Control binding │\n └──────────┬───────────┘\n │\n ┌──────────▼───────────┐\n │ World Data Layer │\n │ • Chunk storage │\n │ • Persistence (opt.)│\n └──────────────────────┘\n```\n\n---\n\n### 4. Data Structures \n\n| Data | Type | Notes |\n|------|------|-------|\n| **Chunk** | 3‑D array (`[x][y][z]`) of block IDs | Size 16×16×16 or adjustable |\n| **Block Palette** | Map (`ID -> {type, textureCoord, isSolid}`) | Central reference |\n| **World Map** | Map (`chunkCoord -> Chunk`) | Key could be `\"x:y:z\"` string |\n| **Player State** | {position: Vec3, rotation: Euler, velocity: Vec3} | For movement & collision |\n\n---\n\n### 5. Algorithmic Highlights \n\n#### 5.1 Chunk Generation \n```text\nfor each chunkCoord in worldBounds:\n generate heightmap = noise(chunkCoord.x, chunkCoord.z)\n for each (x, z) within chunk:\n y = heightmap(x,z)\n for i=0..y:\n set block to ground type (stone, dirt, grass)\n for i=y+1..y+waterDepth:\n set block to water\n```\n\n#### 5.2 Rendering Culling \n```text\nfor each block in chunk:\n if block.isSolid:\n for each of 6 faces:\n if neighboring cell is empty:\n add face to mesh\n```\n\n#### 5.3 Interaction Ray‑cast \n```text\nray = camera.getRay(mousePosition)\nfor t from 0 to maxReach step stepSize:\n point = ray.origin + ray.direction * t\n blockCoord = floor(point)\n if world.hasBlock(blockCoord):\n return hitInfo (blockCoord, faceNormal)\n```\n\n#### 5.4 Block Placement / Destruction \n- **Place**: Add block ID to adjacent empty cell. \n- **Destroy**: Set block ID to empty (e.g., 0). \n- After update: \n - Re‑generate meshes for affected chunk and neighboring chunks (for face culling). \n - Update world data store. \n - (Optional) Persist change.\n\n---\n\n### 6. User Interface Mock‑Up \n\n1. **Block Palette** \n - Horizontal bar at bottom with icons (grass, dirt, stone). \n - Click to select current block type. \n\n2. **HUD** \n - Crosshair at center. \n - Current block type indicator. \n\n3. **Mobile Touch Controls** (if desired) \n - Virtual joystick for movement. \n - Tap‑and‑hold to look. \n - Long press to place / destroy (two‑finger for alternate).\n\n---\n\n### 7. Development Roadmap \n\n| Sprint | Tasks |\n|--------|-------|\n| 1 | Set up project skeleton (framework, Three.js, build tool). |\n| 2 | Implement world data layer + chunk generation. |\n| 3 | Build voxel renderer (mesh creation + culling). |\n| 4 | Add player controls & basic physics. |\n| 5 | Implement block interaction (ray‑cast, place/destroy). |\n| 6 | Add UI (palette, HUD). |\n| 7 | Optional: persistence, mobile adaptation. |\n| 8 | Polish, test, and bundle. |\n\n---\n\n### 8. Deliverables (what the AI should produce) \n\n1. **Technical Specification Document** \n - Complete description of features, architecture, data structures, and algorithms. \n\n2. **Design Diagrams** \n - System architecture, class diagram for world/chunk, state diagram for player. \n\n3. **Implementation Plan** \n - Step‑by‑step tasks, time estimates, and potential pitfalls. \n\n4. **Sample Data Files** \n - Example block palette JSON, texture atlas plan. \n\n5. **Testing Strategy** \n - Unit tests for world generation, interaction logic. \n - End‑to‑end tests for player movement and block placement. \n\n6. **Deployment Guide** \n - Build commands, hosting options (Netlify, Vercel). \n\n---\n\n### 9. Additional Considerations (for future expansion) \n\n- **Multiplayer**: WebSocket server, state synchronization. \n- **Crafting / Inventory**: Simple drag‑and‑drop UI. \n- **Biome System**: Different block palettes per biome. \n- **Lighting**: Simple directional light or per‑chunk light map. \n- **Performance**: Chunk streaming, frustum culling, LOD. \n\n---\n\n### 10. Final Prompt for the AI\n\n> **You are an experienced game‑development AI.** \n> **Task:** Produce a complete, code‑free design and implementation plan for a web‑based Minecraft clone that supports basic block creation and destruction. \n> **Requirements:** \n> - Use Three.js or Babylon.js for rendering. \n> - Implement first‑person controls (WASD + mouse). \n> - Support chunked world storage, simple heightmap terrain, and a palette of at least 5 block types. \n> - Include collision detection, face culling, and a minimal UI for block selection. \n> - Provide data structures, algorithms, architecture diagrams, and a 2‑week development roadmap. \n> - Output only textual documentation—no code snippets. \n\n> **Deliverables:** \n> 1. Technical specification. \n> 2. System architecture diagram (textual or ASCII). \n> 3. Detailed implementation plan with timelines. \n> 4. Testing and deployment strategy. \n> 5. Optional extensions for future work. \n\n> **End of prompt.** \n\n--- \n\nThis prompt gives the AI everything it needs to produce a full‑blown design for a web‑based Minecraft clone without actually writing