一个独立开发者这周干了两件事：倒水排序，和方块消除。听起来像是小学生课间游戏，但背后全是硬核技术决策。
这是7x.games项目的一部分——目标是做150多个原创浏览器游戏，全部针对搜索引擎优化。本周上线的两款都是纯网页益智游戏：《Color Sort Puzzle》（颜色排序谜题）和《Block Blast》（方块爆破）。关键约束：不用游戏引擎，不用Canvas库，只用React和CSS。
先说说那个倒水的游戏。规则简单到一句话：把不同颜色的液体在试管间倒来倒去，最终让每个试管只有一种颜色。但开发者很快发现，"生成一个保证有解的关卡"比想象中难得多。
他的解决方案是回溯求解器。每生成一个关卡前，系统先模拟所有可能的倾倒序列，确认存在解才呈现给玩家。核心验证逻辑只有三行：源试管不能为空，目标试管不能满，顶部颜色必须匹配（或目标为空）。但就是这个简单约束的组合爆炸，让自动生成可解关卡成了算法题。
游戏还做了几个细节：完整的撤销栈（每一步都保存状态快照）、自动胜利检测、50多个按难度梯度生成的关卡。没有依赖任何游戏框架，状态管理全靠React。
第二个游戏《Block Blast》是俄罗斯方块变体：把各种形状的方块拖到8×8网格上，填满整行或整列就消除。这个项目的坑在交互。
标准拖拽逻辑是把光标位置映射到网格坐标。但在手机屏幕上，手指遮挡+视觉误差，差1像素就塞不进缝。开发者的解法是做3×3邻近搜索——手指松开时，扫描周围9个格子，自动吸附到最近的可放置位置。代码是个嵌套循环，计算欧几里得距离找最优解。他说这个改动让移动端可玩性提升了10倍。
音效方面更极端。没有加载任何音频文件，全部用Web Audio API实时合成。放置、消除、游戏结束三种音效，通过振荡器频率变化和增益包络实现。结果是0字节的音频资源占用。
最后一个技术细节关于移动端滚动冲突。页面需要正常滚动，但手指抓住方块时要冻结滚动。React的合成触摸事件默认是passive的，preventDefault无效。解法是在组件挂载时用ref注册非passive监听器，同步更新拖拽状态。
两个游戏，零外部依赖，全部源码控制在纯React+CSS范围内。开发者的结论是：浏览器原生API已经够用了，很多"需要游戏引擎"的场景其实可以拆解成具体的技术问题逐个解决。
热门跟贴