纯前端高阶实战：涵盖3D、音频可视化与复杂交互的开发命题

这里整理了 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 中的坐标映射与迭代逻辑。