迷宫生成与求解

请直接输出一个完整可运行的**单文件 HTML**（内联 CSS + 原生 JS）。 --- 做一个**迷宫生成与求解可视化器**，让用户能看到迷宫是如何被"挖"出来的，以及路径搜索算法是如何一步步找到出口的。 **功能要求：** 1. **迷宫生成**： - 使用递归回溯（Recursive Backtracking）或 Prim 算法随机生成迷宫 - 生成过程要有**动画**——能看到算法逐步"打通"墙壁的过程，而不是瞬间出现一个完整迷宫 - 起点在左上角，终点在右下角（用明显的颜色标记） 2. **迷宫求解**： - 提供至少两种求解算法：**BFS（广度优先搜索）** 和 **DFS（深度优先搜索）** - 求解过程要有动画——能看到算法探索过的格子（用一种颜色标记已访问）和最终找到的路径（用另一种醒目颜色高亮） - BFS 和 DFS 的探索模式应该有明显的视觉差异（BFS 像水波扩散，DFS 像蛇形深入） 3. **可调参数**： - 迷宫大小可调（如 10×10 到 50×50，用滑块或输入框） - 动画速度可调（慢速看细节，快速看全貌） 4. **控制按钮**： - 「生成迷宫」：触发迷宫生成动画 - 「求解」：在已生成的迷宫上运行选中的求解算法 - 「重置」：清除求解痕迹但保留迷宫结构（方便用另一种算法重新求解对比） - 「全部清除」：清除一切，回到空白状态 - 算法选择（BFS / DFS 切换） 5. **视觉区分**： - 墙壁：深色 - 通道：浅色/白色 - 已访问（探索中）：浅蓝或浅黄 - 最终路径：醒目的亮色（如橙色或绿色） - 起点/终点：特殊标记（如绿色/红色圆点） **UI 要求：** - 迷宫用网格（grid）渲染，每个格子大小适中，墙壁和通道清晰可辨 - 控制面板和迷宫区域布局分明 - 页面整体干净，配色协调 - 基本响应式适配（小屏幕上迷宫自动缩小） **技术约束：** - 不允许使用任何外部图片资源 - 不允许引入外部 JS 库（纯 Vanilla JS） - 可以用 Canvas 或 DOM 网格渲染迷宫，自行选择

请直接输出一个完整可运行的**单文件 HTML**（内联 CSS + 原生 JS）。 --- 做一个**迷宫生成与求解可视化器**，让用户能看到迷宫是如何被"挖"出来的，以及路径搜索算法是如何一步步找到出口的。 **功能要求：** 1. **迷宫生成**： - 使用递归回溯（Recursive Backtracking）或 Prim 算法随机生成迷宫 - 生成过程要有**动画**——能看到算法逐步"打通"墙壁的过程，而不是瞬间出现一个完整迷宫 - 起点在左上角，终点在右下角（用明显的颜色标记） 2. **迷宫求解**： - 提供至少两种求解算法：**BFS（广度优先搜索）** 和 **DFS（深度优先搜索）** - 求解过程要有动画——能看到算法探索过的格子（用一种颜色标记已访问）和最终找到的路径（用另一种醒目颜色高亮） - BFS 和 DFS 的探索模式应该有明显的视觉差异（BFS 像水波扩散，DFS 像蛇形深入） 3. **可调参数**： - 迷宫大小可调（如 10×10 到 50×50，用滑块或输入框） - 动画速度可调（慢速看细节，快速看全貌） 4. **控制按钮**： - 「生成迷宫」：触发迷宫生成动画 - 「求解」：在已生成的迷宫上运行选中的求解算法 - 「重置」：清除求解痕迹但保留迷宫结构（方便用另一种算法重新求解对比） - 「全部清除」：清除一切，回到空白状态 - 算法选择（BFS / DFS 切换） 5. **视觉区分**： - 墙壁：深色 - 通道：浅色/白色 - 已访问（探索中）：浅蓝或浅黄 - 最终路径：醒目的亮色（如橙色或绿色） - 起点/终点：特殊标记（如绿色/红色圆点） **UI 要求：** - 迷宫用网格（grid）渲染，每个格子大小适中，墙壁和通道清晰可辨 - 控制面板和迷宫区域布局分明 - 页面整体干净，配色协调 - 基本响应式适配（小屏幕上迷宫自动缩小） **技术约束：** - 不允许使用任何外部图片资源 - 不允许引入外部 JS 库（纯 Vanilla JS） - 可以用 Canvas 或 DOM 网格渲染迷宫，自行选择 请严格按照下方提供的 Frontend Design Skill 指导你的设计决策。 ```` ## Design Thinking Before coding, understand the context and commit to a BOLD aesthetic direction: - **Purpose**: What problem does this interface solve? Who uses it? - **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction. - **Constraints**: Technical requirements (framework, performance, accessibility). - **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember? **CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity. Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is: - Production-grade and functional - Visually striking and memorable - Cohesive with a clear aesthetic point-of-view - Meticulously refined in every detail ## Frontend Aesthetics Guidelines Focus on: - **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font. - **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. - **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise. - **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density. - **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays. NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character. Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations. **IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well. Remember: You are capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision. ````