
基础规则和传统拼图类似:
一张图片被切成 N × N 的碎片并打乱
通过拖拽交换位置
在限定时间内还原完整图片即可过关
目前做了 20 个关卡,难度从 3×3 到 7×7 ,图片都是偏 Y2K 美学(千禧年金属质感、未来感 UI 、亮面塑料那种风格)。
一个我自己挺喜欢的机制:融合
和普通拼图不太一样的是,我加了一个“融合”机制:
当相邻碎片都处于正确位置时,会自动合并成一个更大的块。 合并后的块可以整体拖动,不需要再逐个微调。
也就是说:
前期是零散移动
中期开始出现小块联动
后期可以大块大块移动
节奏会比传统拼图更快一些,也更有“越拼越顺”的感觉。
这个机制我自己觉得挺有意思,但不太确定大家实际玩起来的体验如何。
React + TypeScript + Vite
Tailwind CSS
拖拽用原生 touch / mouse 事件实现(没用拖拽库)
部署在 Vercel
算是一个比较纯前端的小项目。
如果有时间可以玩一下,欢迎拍砖。 不管是 bug 、手感问题、关卡节奏,还是对“融合机制”的看法,都很想听听大家真实反馈
1 Varvel 1 天前 我之前想做一个在线拼图来着,可以参考拼图难度预设图片切割形状。 |
2 Razio 1 天前 因为有融合机制,并且没有空位,拖拽操作,感觉缺了个拖拽排序的动态效果、然后拖拽异形图块互相挤压自动排序的那种感觉。 |
3 kphcdr 1 天前 我感觉挺不错,喜欢 |
4 LIPOLIS 1 天前 我觉得融合了以后 应该让它不可以被分开 |