一、摘要
我是一名设计专业学生，在课程作业“重访幸福：交互”模块中，想制作一款表达“相遇与陪伴”的治愈系小游戏。借助 Trae CN 的 AI 编程能力，我将童年观察车窗雨滴赛跑的灵感，转化为一款完整的、可在线游玩的小游戏《雨滴同行》。整个过程从零代码基础到可部署上线的作品，只用了不到两周的课余时间，原需几周的前端开发工作量被压缩到了十几个小时。
二、背景
我的角色：设计专业学生
面临的挑战：
-
课程要求设计一个“触发幸福感”的交互媒介，需具备清晰的交互逻辑和可演示的原型
-
我不会编程，但希望做出真正可交互的游戏，而不是静态概念图
-
市面上的原型工具（Figma、ProtoPie）无法实现我想要的“吞噬融合”“水痕拖尾”等动态交互
-
最终需要提交演示视频和外链，别人能直接体验
三、实践过程
1. 任务拆解
我把整个项目拆成四个阶段：
| 阶段 | 任务 | Trae CN 负责的部分 |
|---|---|---|
| 概念验证 | 确定核心机制：水珠吞噬移动、融合分离 | 帮我分析玩法可行性，生成基础 p5.js 框架 |
| 功能迭代 | 逐步加入倒计时环、水痕轨迹、三连融合觉醒、鼠标方向追随等 | 每次我描述一个新机制，AI 直接写出可运行代码 |
| 视觉打磨 | 水珠立体高光、呼吸动画、精灵图动画、背景图替换 | AI 帮我优化绘制函数，导入外部素材 |
| 部署上线 | 生成外链，让老师和同学直接玩 | AI 指导我使用 GitHub Pages 部署 |
2. 关键 Prompt 示例
初期让 Trae 理解游戏核心机制：
“画面密集分布小水珠，主控水珠通过吞噬相邻水珠来向下/左移动。每 1.5 秒自动推进一次。玩家可用鼠标左右键选择吞噬方向……”
后期增加“三连融合觉醒”的复杂逻辑：
“主控水珠可同时与3个运动水滴处于融合状态。当融合数达到3时，移动方式从左右键切换为鼠标方向追随：从距离最近的5颗水珠中选与鼠标夹角最小的吞噬……”
解决背景图部署问题的排查：
“可以打开链接了，但是我的背景图加载不出来了”
Trae 精确定位到是路径大小写不一致的问题，并给出了逐行解决方案。
3. 踩过的坑
-
第1坑：本地图片加载不了
一开始我用完整路径C:\Users\...加载图片，结果浏览器出于安全策略阻止了。Trae 教会了我用相对路径 + 本地服务器的方式开发。 -
第2坑：部署到 GitHub Pages 后打不开
文件名是中文“雨滴同行.html”，服务器无法正确解析。Trae 建议我改成index.html，问题秒解决。 -
第3坑：上线后背景图消失
代码里写的文件夹名是assets/，我实际用的是images/。Trae 帮我统一了所有路径引用，并提醒我 GitHub 服务器严格区分大小写。
四、成果展示
在线游玩链接：https://shiyuemeng30-bot.github.io/raindrop-game4/
游戏核心体验：
-
玩家控制一滴车窗上的水珠，通过吞噬小水珠向下滑落
-
遇到其他移动水珠时，画面冻结 2 秒，可长按左键选择融合
-
融合 3 个伙伴后进入“觉醒状态”，移动改为鼠标方向追随
-
全程有水痕拖尾、立体高光、呼吸动画等视觉细节
代码仓库：https://github.com/shiyuemeng30-bot/raindrop-game4
五、效果与总结
提效成果：
-
原需数周的前端开发工作，我用 Trae 在约1周课余时间内完成
-
不会写 p5.js 的情况下，仅靠自然语言描述机制，就生成了 1000+ 行可运行代码
-
遇到 bug 或路径问题时，Trae 既是写代码的人，也是帮我 debug 的老师
我的思考：
-
AI 重新定义了“创作者”：以前“不会编程”是设计的边界，现在这个边界被彻底打破了。我负责创意和逻辑，AI 负责技术实现，各司其职。
-
好的 Prompt 需要结构化：我发现把机制拆成“触发条件 → 移动规则 → 候选筛选 → 停止条件”四个层次描述，AI 的产出质量最高。
-
AI 也是最好的学习伙伴：遇到不懂的（p5.js 是什么、为什么 404、同源策略），我可以直接问，它像一位随身的网页开发家教，耐心解释每个原理。
可复用的方法：
-
用“世界坐标 + 屏幕坐标”处理固定视点的地图逻辑
-
用
millis()做精确定时器，适合 UI 动画、游戏循环 -
交互项目的标准流程：先核心机制，再动画特效，最后视觉叠装
总结：《雨滴同行》是我第一次完全依靠 AI 编程完成的作品。它让我相信：设计者与 AI 协作，不是取代创意，而是把创意从技术壁垒中解放出来。 这次作业，我交出了一份“可玩”的幸福。