这里整理了 5 条纯前端开发提示词，涵盖 3D 交互、数据可视化、游戏化体验及复杂状态管理，旨在考察开发者对 WebGL、Canvas API 及现代前端架构的综合运用能力。这些提示词均无需后端支持，所有逻辑与数据均在本地完成，适合用于高阶前端能力评估或作品集构建。
1. 基于 Three.js 的交互式分子结构查看器
请使用 Three.js 构建一个单页应用，用于展示和交互复杂的分子结构模型。要求如下：
- 数据源：在 JS 中硬编码一个包含至少 50 个原子（节点）和化学键（连线）的数据结构，每个原子包含类型（如碳、氢、氧）、坐标位置及半径属性。
- 渲染要求：使用 SphereGeometry 渲染原子，CylinderGeometry 渲染化学键。不同元素类型的原子需使用不同的 PBR 材质颜色（如碳为深灰，氧为红色，氢为白色）。场景需包含环境光和平行光，以展现材质的立体感。
- 交互功能：
- 支持 OrbitControls 进行旋转、缩放和平移。
- 鼠标悬停在原子上时，该原子高亮显示（发光或变色），并显示一个 HTML Tooltip 标签，展示原子类型及坐标信息。
- 点击原子时，相机平滑过渡（使用 GSAP 或 TWEEN.js）到该原子的正前方视角。
- 性能优化：对于重复的原子几何体，必须使用 InstancedMesh 进行实例化渲染以降低 Draw Call。
- UI 界面：左上角提供一个控制面板，包含“重置视角”按钮和一个滑块，用于实时调整原子的整体大小比例。
- 交付要求：所有代码整合在一个 HTML 文件中，引入 Three.js 和 GSAP 的 CDN 链接，确保无外部资源依赖即可运行。
2. 实时音频频谱可视化仪表盘
请开发一个基于 Web Audio API 和 Canvas 的音频可视化工具，能够将用户上传的音频文件转化为动态粒子效果。具体要求如下：
- 核心功能：
- 提供文件输入框，允许用户本地选择 MP3 或 WAV 文件。
- 使用 Web Audio API 解析音频数据，提取低频、中频和高频三个频段的实时振幅数据。
- 使用 HTML5 Canvas 绘制可视化效果：
- 低频数据控制中心圆环的半径脉动。
- 中频数据控制围绕中心旋转的一圈柱状图的高度。
- 高频数据控制背景中随机粒子的运动速度和亮度。
- 视觉效果：
- 采用深色背景，粒子与图形使用霓虹色系（青色、品红、亮黄）。
- 粒子系统需包含至少 200 个粒子，每个粒子具有独立的生命周期和运动轨迹。
- 添加简单的后期处理效果，如通过 globalCompositeOperation 实现拖尾残影效果。
- 控制选项：
- 提供播放/暂停按钮。
- 提供灵敏度调节滑块，用于放大或缩小音频数据对视觉元素的影响幅度。
- 技术要求：纯原生 JavaScript 实现，不使用任何第三方库。代码需包含详细的注释，解释音频上下文初始化、频率数据获取及 Canvas 渲染循环的逻辑。
3. 复古风格像素风平台跳跃游戏 Demo
请使用 HTML5 Canvas 和原生 JavaScript 开发一个简易的横版平台跳跃游戏原型，致敬 8-bit 复古风格。要求如下：
- 游戏机制：
- 玩家控制一个方形角色，支持左右移动和跳跃。
- 物理系统：实现基础的重力加速度、摩擦力及碰撞检测。角色需能站在平台上，并在撞到墙壁时停止移动。
- 关卡设计：在 JS 数组中定义一个简单的关卡地图，包含地面、悬浮平台、尖刺陷阱和终点旗帜。
- 视觉表现：
- 不使用外部图片资源，所有图形（角色、平台、背景）均通过 Canvas API 绘制矩形或路径实现。
- 角色跳跃时具备简单的挤压拉伸动画效果。
- 背景采用视差滚动效果，分为远景（慢速移动的云层）和近景（快速移动的山脉）。
- 游戏状态：
- 包含开始屏幕、游戏进行中、游戏结束（触碰尖刺）和胜利（到达终点）四种状态。
- 记录并显示当前得分（基于存活时间或收集物）。
- 操作反馈：
- 键盘事件监听 WASD 或方向键。
- 移动端支持：屏幕左右两侧显示虚拟按键，适配触摸操作。
- 代码结构：采用模块化思维组织代码，将游戏循环、实体更新、渲染逻辑分离，即使在一个文件中也要保持结构清晰。
4. 智能任务看板与甘特图双视图管理器
构建一个功能完备的项目管理工具界面，支持在看板视图和甘特图视图之间无缝切换，所有数据持久化存储在 localStorage 中。
- 数据模型：
- 任务对象包含：ID、标题、描述、开始日期、结束日期、状态（待办/进行中/已完成）、优先级、所属阶段。
- 预生成 20 条模拟数据，跨度为一个月。
- 看板视图（Kanban）：
- 三列布局：待办、进行中、已完成。
- 支持拖拽排序和跨列拖拽（使用 HTML5 Drag and Drop API 或鼠标事件模拟）。
- 任务卡片显示标题、截止日期及优先级颜色标记。
- 拖拽过程中提供视觉反馈（如占位符、阴影效果）。
- 甘特图视图（Gantt）：
- 横向时间轴，按天刻度划分。
- 任务以条形图形式展示，长度对应持续时间，位置对应开始日期。
- 支持鼠标滚轮水平滚动时间轴。
- 任务条形图支持拖拽调整开始日期，拖动端点调整持续时间。
- 交互细节：
- 双击任务卡片/条形图弹出模态框，允许编辑任务详情。
- 顶部导航栏包含视图切换按钮、新增任务按钮及“清除所有数据”按钮。
- 所有操作（增删改查、拖拽结果）需实时同步更新 localStorage，刷新页面后数据不丢失。
- 样式要求：使用 CSS Grid 和 Flexbox 布局，界面简洁现代，支持深色模式切换（通过 CSS 变量实现）。
5. 程序化生成的分形艺术探索器
开发一个基于 Canvas 的分形图形生成器，允许用户通过调整参数实时探索数学之美。重点在于高性能渲染与交互体验。
- 核心算法：
- 实现 Mandelbrot 集或 Julia 集的渲染算法。
- 使用 WebGL (GLSL) 进行片段着色器计算，以确保在高分辨率下仍能保持 60 FPS 的流畅度。若使用 2D Canvas 需采用 Web Worker 避免阻塞主线程。
- 交互控制：
- 鼠标左键拖拽平移视图。
- 鼠标滚轮以光标位置为中心进行缩放。
- 右侧控制面板包含以下滑块：
- 迭代次数（影响细节精度）。
- 色彩偏移量（改变配色方案）。
- 复杂度参数（针对 Julia 集变化复数常数 c）。
- 视觉效果：
- 提供至少 3 种预设配色方案（如：火焰、海洋、霓虹），通过 Uniforms 传递至 Shader。
- 缩放过程中采用渐进式渲染策略：先低分辨率快速预览，停止操作后高分辨率重绘。
- 额外功能：
- “截图”按钮：将当前 Canvas 内容导出为 PNG 图片。
- “随机探索”按钮：随机生成一组有趣的参数组合并自动过渡到该视角。
- 技术要求：单 HTML 文件交付，Shader 代码以字符串形式嵌入 JS 中。代码需详细注释 GLSL 中的坐标映射与迭代逻辑。
