进阶纯前端游戏 Prompt 精选：策略、节奏与物理模拟

在游戏化前端开发中，除了传统的动作游戏，策略算法、音频同步及复杂物理模拟也是高阶能力的体现。以下5条 Prompt 涵盖了 塔防逻辑 、 Web Audio API 节奏游戏 、 卡牌构建 、 车辆动力学 及 Canvas 流体特效 ，完全符合“0-1 纯前端”规范，适用于评估开发者在算法实现、多媒体处理及高性能渲染方面的能力。

1. 【游戏-复杂】HTML5 Canvas 塔防游戏（路径寻路与波次管理）

难度定位 ：复杂游戏前端。重点考察 A 或 BFS 路径寻路算法、敌人波次生成逻辑、塔的攻击范围计算及游戏状态机。
技术栈 ：HTML5 Canvas, Vanilla JS (ES6+)

Prompt 内容：
text
使用 HTML5 Canvas 和原生 JavaScript 开发一个单文件的“极简塔防”游戏。
核心玩法：
1. 地图与路径：
预设一个固定地图，包含起点、终点和可建造塔的网格区域。
敌人从起点出发，沿固定路径移动至终点。若敌人到达终点，玩家生命值减少。
使用 BFS（广度优先搜索）或预定义路径点数组计算敌人移动轨迹。
2. 防御塔系统：
支持三种塔：箭塔（单体高伤）、冰塔（减速效果）、炮塔（范围溅射）。
玩家点击网格消耗金币建造塔。
塔自动检测进入攻击范围的最近敌人，并发射投射物。
3. 敌人与波次：
实现波次管理器（Wave Manager），每波敌人数量、血量、速度递增。
敌人类型：普通怪（快血少）、坦克怪（慢血多）、Boss（极慢血极厚）。
4. 经济与UI：
击杀敌人获得金币。
顶部 HUD 显示：生命值、金币、当前波次。
游戏结束条件：生命值为0。
5. 视觉表现：
使用 Canvas 绘制几何图形代表塔和敌人（如圆形、方形），不同颜色区分类型。
投射物为小圆点，击中时产生简单粒子效果。
6. 代码规范：
单文件 HTML。
代码结构模块化：Map, Tower, Enemy, Projectile, WaveManager, GameLoop。
路径寻路或攻击范围检测算法需添加详细中文注释。

2. 【游戏-中等】Web Audio API 节奏方块下落游戏（音频同步与判定）

难度定位 ：中等游戏前端。重点考察 Web Audio API 基础使用、时间戳同步、键盘事件响应及视觉反馈。
技术栈 ：HTML5 Canvas, Web Audio API, Vanilla JS

Prompt 内容：
text
使用 HTML5 Canvas 和 Web Audio API 开发一个简易的“节奏方块”下落游戏。
核心功能：
1. 音频生成：
不使用外部 MP3 文件，而是使用 Web Audio API 的 OscillatorNode 实时生成简单的电子节拍（如 120 BPM 的 Kick 和 Snare 循环）。
确保音频播放流畅，无卡顿。
2. 游戏玩法：
屏幕底部有4个判定轨道（对应 D, F, J, K 键）。
方块从顶部随节拍下落，当方块底部接触判定线时，用户按下对应按键。
判定等级：Perfect（精确匹配）、Good（轻微偏差）、Miss（未按下或偏差过大）。
3. 视觉反馈：
方块下落动画需与音频节拍严格同步（基于 AudioContext.currentTime 计算位置）。
判定成功时，轨道显示发光特效；Miss 时显示红色叉号。
连击数（Combo）显示在屏幕中央，Miss 时重置。
4. 性能优化：
使用 requestAnimationFrame 进行渲染，确保动画与音频时钟同步。
5. 代码规范：
单文件 HTML。
音频上下文初始化、节拍调度逻辑需添加中文注释。
注意处理浏览器自动播放策略（需用户点击开始按钮后初始化 AudioContext）。

3. 【游戏-复杂】Roguelike 卡牌战斗 Demo（状态管理与随机生成）

难度定位 ：复杂游戏前端。重点考察复杂对象状态管理、随机卡组生成、回合制逻辑及 UI 状态同步。
技术栈 ：React (or Vue3), TailwindCSS

Prompt 内容：
text
使用 React (或 Vue3) 开发一个单文件的“Roguelike 卡牌战斗”Demo，无后端依赖。
核心玩法：
1. 战斗流程：
玩家 vs 单个敌人。轮流回合制。
玩家回合：抽取手牌（最多5张），使用能量点打出卡牌（攻击、防御、增益）。
敌人回合：根据简单 AI 逻辑（如随机攻击或蓄力）行动。
2. 卡牌系统：
预设 10 种基础卡牌（如“打击”、“防御”、“重击”、“愈合”等），每张卡有费用、效果描述。
卡组随机生成：每局游戏从卡池中随机选取 10 张组成初始卡组。
抽牌堆、弃牌堆逻辑：牌打完重新洗牌。
3. 状态管理：
玩家/敌人属性：生命值、护盾、能量。
实时 UI 更新：血条、能量球、手牌区域、战场日志。
4. 视觉效果：
卡牌悬停放大，打出时有飞入战场的动画（CSS Transition）。
受到伤害时屏幕震动效果。
5. 代码规范：
单文件 HTML（通过 CDN 引入 React/Vue, Babel, Tailwind）。
使用 Context API 或 Pinia/Redux 管理全局战斗状态。
卡牌效果逻辑（如计算伤害、应用护盾）需添加中文注释。

4. 【游戏-中等】Canvas 2D 赛车漂移演示（向量物理与轨迹渲染）

难度定位 ：中等游戏前端。重点考察向量运动学、摩擦力模拟、轮胎轨迹绘制及相机跟随。
技术栈 ：HTML5 Canvas, Vanilla JS

Prompt 内容：
text
使用 HTML5 Canvas 开发一个“2D 顶视角赛车漂移”演示程序。
核心功能：
1. 车辆物理：
模拟简单的车辆动力学：加速度、转向角、横向摩擦力。
当转向角较大且速度较快时，车辆产生“漂移”效果（车身方向与移动方向不一致）。
2. 控制：
WASD 或箭头键控制油门、刹车、转向。
空格键手刹（增加横向滑动系数）。
3. 视觉效果：
轮胎轨迹 ：漂移时在地面留下黑色的轮胎印记，痕迹随时间淡出。
相机跟随：相机平滑跟随车辆中心，保持车辆在屏幕中央。
车辆模型：使用矩形代表车身，车头方向指示朝向。
4. 场景：
一个简单的封闭赛道（由灰色路面和绿色草地组成）。
草地上行驶阻力更大，速度降低。
5. 代码规范：
单文件 HTML。
物理更新逻辑（速度向量分解、摩擦力应用）需添加详细中文注释。
使用 requestAnimationFrame 确保流畅渲染。

5. 【3D/动效-中等】Three.js 交互式流体粒子背景（Shader 基础与鼠标交互）

难度定位 ：中等 3D/动效前端。重点考察 Three.js Points 系统、顶点着色器（Vertex Shader）基础应用及鼠标力场交互。
技术栈 ：Three.js, GLSL (ShaderMaterial)

Prompt 内容：
text
使用 Three.js 创建一个“交互式流体粒子”背景效果，用于科技感官网首页。
核心要求：
1. 粒子系统：
创建 5000+ 个粒子，排列成平面网格或随机分布。
使用 ShaderMaterial 自定义着色器，而非默认 PointsMaterial。
2. 动态效果：
粒子在垂直方向上进行正弦波波动，形成“海浪”或“布料”般的起伏效果。
波动速度和幅度可通过 Uniforms 动态调整。
3. 鼠标交互：
鼠标移动时，附近的粒子受到排斥力或吸引力，产生局部扰动。
扰动效果随距离衰减，鼠标停止后粒子缓慢恢复原位。
4. 视觉风格：
深色背景，粒子颜色为青色到紫色的渐变（基于高度或速度）。
启用 AdditiveBlending 混合模式，使重叠粒子更亮。
5. 性能优化：
所有计算在 GPU（Shader）中完成，避免 CPU 遍历粒子。
6. 代码规范：
单文件 HTML，引入 Three.js CDN。
Vertex Shader 和 Fragment Shader 代码需内嵌在 JS 字符串中，并添加中文注释解释数学公式（如 sin/cos 波动逻辑）。
确保窗口 resize 时相机和 renderer 正确更新。

 

💡 提示词设计说明（符合规范 V3）

1. 纯前端界定 ：所有 Prompt 均明确禁止后端 API，游戏逻辑、音频生成、物理模拟均在客户端完成，符合 0-1 纯前端 定义。
2. 类型差异化 ：
Prompt 1： 策略塔防 （算法导向：寻路、波次管理）。
Prompt 2： 音乐节奏 （多媒体导向：Web Audio API、时间同步）。
Prompt 3： 卡牌 Roguelike （状态管理导向：复杂数据结构、回合制逻辑）。
Prompt 4： 赛车物理 （物理导向：向量运动、摩擦力、轨迹渲染）。
Prompt 5： Shader 动效 （图形学导向：GLSL、GPU 计算、粒子系统）。
*注：Prompt 5 虽归类为 3D/动效，但因其侧重 Shader 编程而非传统游戏逻辑，故作为动效类补充，符合“3D/动效/游戏”大类。*
3. 难度达标 ：
复杂类 ：Prompt 1（塔防算法）、Prompt 3（卡牌状态机）。
中等类 ：Prompt 2（音频同步）、Prompt 4（向量物理）、Prompt 5（Shader 基础）。
4. 技术栈合规 ：使用了 Canvas, Web Audio API, React, Three.js (ShaderMaterial) 等现代技术，避免了陈旧组合。
5. 细节充实 ：每个 Prompt 都包含了具体的机制描述、技术实现要点（如“不使用外部 MP3”、“GPU 计算”）和代码规范，确保了可落地性和评测价值。