vibecoding-3.30
爱心数独
第 01 步 环境安装
第 02 步 新建项目
第 03 步 选择模型
第 04 步 画个爱心
😀 前端实现具有3D视觉效果的立体爱心,右键拖拽可旋转。
第 05 步 调教一下
😀 你这TM也不是爱心啊。
第 06 步 爱心粒子
😀 把爱心变成一个个相同的小球,所有小球组成一个完整爱心。
第 07 步 爱心分块
😀 帮我把这个由球组成的爱心,切割成完整的 81 块,这81块完整的相对位置不变,整体进行往外扩散。
第 08 步 爱心组装
😀 引入鼠标操作,每次点击,让其中一个扩散块(总共81个)飞入它的原始位置,经过81次点击,得到一个完整爱心。
第 09 步 加点难度
第 10 步 做个数独
😀 之前的爱心碎片作为数独游戏的辅助(所有分解的碎片规则和 3d-heart 保持一致别瞎改),放在屏幕左边,屏幕中间则是一个 9x9 网格,3x3 子网格 的数独游戏,数独游戏始终是正交视角面向玩家,每次游戏开始,生成一个带空缺的数独,每个空缺位置支持点击,点击以后可以选择数字。数独的每个格子的位置,对应的是一个爱心碎片,也就是说:这个位置如果是已确定状态,或者被玩家选对了,那么爱心碎片就归位,否则就不归位;所以当整个数独正确以后,得到的爱心也是完整的;如果选错了支持重选。帮我实现这个数独,数独也是游离在3D空间中的一个棋盘,并且有厚度~看着有质感。
第 11 步 答错惩罚
😀 在屏幕中上位置,加入一个血条,总共100滴血,每次回答错误,扣除10滴血,扣血的过程是一个缓动动画,血条是一个内部从 红橙黄绿青蓝紫 的圆角矩形,外部还有一个红色外框。血条扣到0以后,游戏直接结束,显示 Game Over,点击屏幕任意位置,开启新的游戏。
第 12 步 答对奖励
😀 答对一次加5点血,并且每个格子只有一次加血的机会。
第 13 步 倒数计时
😀 游戏开始以后,每秒扣1点血,增加玩家的紧迫感。并且去掉 Health 的显示。
第 14 步 加个后门
😀 按下键盘的 D 键,自动找到一个正确的位置填下。
第 15 步 结算界面
😀 整个数独通关以后,所有的爱心珠子,往上抛不同的高度,然后做自由落体后发散,等到所有珠子消失(大概2秒左右),原本爱心位置,显示五个金灿灿的大字 "爱你一万年"
接下来加入音效:
1、正确填入数字的音效
2、填错数字的音效
3、点击格子要有音效
4、爱心的碎片飞入中心的音效