五子连珠消消看大家应该都玩过,那 3D 版的你试过吗?
用 GLM 4.7 Vibe Coding 了一个 3D 版的五子连珠消消看,感兴趣的话可以来挑战一下。
视频里完整记录了整个制作过程,有任何问题欢迎留言评论!
另外在 Trae 里,GLM 4.7 目前还没法自动启动测试,希望之后能优化一下。
完整提示词
请用 Three.js 开发一款 3D 五子连珠消除游戏。 游戏规则 1. 棋盘是 6×6×6 的透明立方体网格,共 216 个位置 2. 珠子有 6 种颜色:红、橙、黄、绿、蓝、紫 3. 玩家点击选中一颗珠子,再点击空位移动它(必须有连通路径,只能走空格,不能斜走) 4. 移动后检测 13 个方向(3轴向 + 6平面对角线 + 4立体对角线),5个及以上同色连线自动消除 5. 消除得分 = 珠子数量的平方(5连得25分,6连得36分...) 6. 若移动未产生消除,系统在随机空位添加 3 颗新珠子 7. 棋盘填满游戏结束 视觉风格 风格明亮通透。背景柔和渐变色。 棋盘设计 1. 立方体外框白色发光线条描边 2. 底部有网格线帮助定位 3. 空位用微弱光点标识 4. 选中珠子后可到达的空位高亮闪烁 珠子设计 1. 晶莹剔透的玻璃球质感,内部发光核心 2. 6种颜色饱和鲜艳,各有独特光晕 3. 待机时轻微浮动 + 呼吸灯效果 4. 选中时放大 + 脉动光环 5. 移动时沿路径飞行,有拖尾光轨 6. 消除时闪耀膨胀后粒子爆散 交互方式 1. 左键点击选中珠子,再点击目标空位移动 2. 右键拖拽旋转棋盘,滚轮缩放 3. 双击重置视角 4. 选中珠子后显示到悬停位置的路径预览 界面元素 1. 顶部显示当前得分和历史最高分 2. 左侧显示下回合将出现的 3 颗珠子预览 3. 显示剩余空位数量 4. 底部层级切换按钮 1-6 和全部显示 5. 游戏结束显示最终得分和重新开始按钮 请确保路径寻找正确(BFS算法),消除检测覆盖所有 13 个方向,动画流畅。
