疯狂的球

---

第 01 步 场景创建

😀 给我用 three.js 做一个球在3D场景中游走的游戏demo，单html文件

第 02 步 相机调整

😀 调整下相机的位置，让场景在屏幕中左右对称

第 03 步 无限场景

😀 把观众看向屏幕的这个方向的场景做成无限延伸的，球在前进和后退的过程中，才加载出来，控制好内存

第 04 步 色调优化

😀 现在的版本：蓝色的球、绿色的地、灰色的网格线、黑色的背景板，要多丑有多丑。你知道吗？你在我心中一直是个前端美化大师啊，快给我找找相关的skill，然后优化一下现在的场景，把整体色调调整到大众的审美！

第 05 步 边界判定

😀 加个边界判定，球在X轴移动的时候不能走出地面

第 06 步 受力系统

😀

受力系统

【核心逻辑】模拟真实受力效果，让小球运动更加真实和丝滑 【交互操作1】按 W 键施加一个Z向前的力 【交互结果1】力转化为Z方向的加速度，加速度根据时间换算速度，地面有摩擦力，所以速度有上限，达到上限以后小球做Z方向的匀速运动。 【交互操作2】按 S 键取消这个力 【交互结果2】取消力以后只剩摩擦力，所以做减速运动。直到小球停止 【3D效果表现】加速过程中球加上一个拖尾效果，拖尾的粒子特效做的炫酷点；减速的效果你看着办吧 【屏幕特效】运动过程，屏幕周围显示漫画风格的辐射状冲刺特效 【UI提示】加速过程展示一个好看的UI提示；匀速过程提示消失 【总时间】加速过程持续1.5秒，减速过程的时间你自己换算

第 07 步 障碍系统

😀

障碍系统

【核心逻辑】让玩家在游玩的时候，不会那么顺利，有障碍物挡住玩家的去路 【交互操作】球在前进的过程中…… 【交互结果】在Z方向离球较远的位置，随机刷新出障碍物，障碍物是比它更大的黑色球，如果两球发生碰撞，则直接死亡，弹出一个失败界面，点击后重新开始游戏 【3D效果表现】碰撞时屏幕出现抖动效果，并且有球爆炸的特效 【UI提示】道路上方，也就是屏幕中上方显示目前行走的距离，用一个比较好看的字体展示，给玩家一个直观可见的目标，并且随着球的移动，动态的变化（采用补间动画） 【总时间】碰撞时间 2 秒后弹出失败界面

第 08 步 天降铁球

😀

天降铁球

【核心逻辑】让黑铁球的出现更加的自然，并且让玩家有反应的时间 【交互操作】主角的球在前进的过程中…… 【交互结果】生成的黑铁球原本是直接出现的，现在要求从天上掉下来，并且有一个重力，大球先落地，碰到地面以后，屏幕产生一个震动效果，和自觉球的碰撞还是采用之前的逻辑即可。 【3D效果表现】碰撞时屏幕出现抖动效果，并且有球爆炸的特效 【总时间】从天上掉到地面总共耗时1秒时间

第 09 步 无敌系统

😀

无敌系统

【核心逻辑】在地面上随机刷出，加到以后，主角球无敌20秒，并且速度翻倍。 【交互操作】主角球和无敌道具碰撞 【交互结果】无敌道具消失，主角球进入无敌状态，显示左侧UI提示 【3D效果表现】无敌道具类似超级玛丽里的那颗星星，具体模型你可以想想，你因为你是一个建模专家，我相信你一定比我专业，能够想出来什么模型是能代表无敌的（要让观众一目了然就能意识到哦），加到以后无视任何攻击和黑球的碰撞。 【UI提示】屏幕左中位置，显示一个炫酷的无敌倒计时 【总时间】无敌时间5秒

第 10 步 合成系统

😀

合成系统

【核心逻辑】增加一个球体的合成功能，四个低等级的球，合成一个高等级的球，球的等级分为 1、2、3、4、5、6、7，颜色分别为白、绿、蓝、紫、橙、金、红，每提升一级，球的半径提升20%。主角不再只有一个球，而是根据路边刷新的球碰撞以后，得到一些不同等级球的数组，摄像机跟着等级最高的球，等级低的球分散在左右两边。向前运动时构成一个向前的箭头效果。 【刷新逻辑】路边随机刷新出球，刷新频率和无敌道具一致。生成的球的等级，请控制在 当前球等级，当前球等级-1，当前球等级-2 这三个里面选择，概率分布为 10%，50%，40% 【交互操作1】主角球 和 路边球 碰撞 【交互结果1】路边球 添加至主角球列表。 【3D效果表现1】碰撞过程播放一个粒子特效，然后路边球 动态划入主角球的身边，如果有四个一样的球，则四个一样的球合成为一个更高等级的球，并且继续做判定，合成过程要有一个炫酷动画。 【UI提示1】屏幕右上角位置的调试界面去掉，显示一个画面(三个主角球、一个箭头、更高等级的球)；并且碰撞时，如果没有发生合成，则显示 Yes，如果发生合成，则显示 Good；如果合成两次，显示Perfect；合成三次，显示 Comb x 3，合成 四次显示 Comb x 4 【交互操作2】主角球 和 黑铁球 碰撞 【交互结果2】碰到的球直接破碎，没有碰到的保留； 【总时间】碰撞动画展示时间1秒

第 11 步 游戏目标

😀

游戏目标

【核心逻辑】为游戏增加一个明确的游戏目标系统，让玩家有一个追求 【交互操作】主角的球在前进的过程中…… 【交互结果】当玩家成功合成出蓝色球时，系统应立即检测到该事件并触发胜利条件 【3D效果表现】 胜利后需显示明确的胜利提示界面，包含胜利信息和适当的庆祝效果 【UI提示】在游戏界面右上角位置添加一个固定的游戏目标显示区域，该区域需保持清晰可见且不遮挡主要游戏内容。游戏目标内容设定为："合成出一个蓝色的球即可获得游戏胜利"，不要用文字，用图标清晰展示即可。界面设计需与游戏整体风格保持一致，视觉效果协调统一

【总时间】动画共耗时1秒时间

第 12 步 关卡系统

😀

关卡系统

【核心逻辑】关卡系统是给玩家以阶段性目标 【交互操作】主角的球在前进的过程中…… 【交互结果】当玩家成功合成出当前关卡需要的球的要求时，系统应立即检测到该事件并触发胜利条件，点击确定以后进入下一关 【3D效果表现】 胜利后需显示明确的胜利提示界面，包含胜利信息和适当的庆祝效果 【UI提示】界面左上角的操作说明去掉，并且展示目前是第几关

【关卡详情】 第一关：没有黑铁球障碍物、没有无敌道具。目标：合成出一个绿球、天空盒是嫩绿色万物复苏的春天色调； 第二关：没有黑铁球障碍物、没有无敌道具。目标：合成出一个蓝球、天空盒是晴空万里的天蓝色调； 第三关：出现黑铁球障碍物，最多一次性掉 1 个、没有无敌道具。目标：合成出一个紫球、天空盒是紫色色调； 第四关：出现黑铁球障碍物，最多一次性掉 5 个、没有无敌道具。目标：合成出一个橙球、天空盒是橙色色调； 第五关：出现黑铁球障碍物、最多一次性掉 15 个、出现无敌道具。目标：合成出一个金球、天空盒是落叶凋零的黄金秋天色调； 第六关：出现黑铁球障碍物、出现无敌道具。目标：合成出一个红球、天空盒是非常漂亮的黄昏的红色色调；