7岁小孩玩数学游戏，开发者用3行代码干掉了手机键盘

一个7岁孩子玩数学游戏时，最崩溃的瞬间是什么？不是算不出答案，而是刚要点输入框，手机键盘"啪"地弹起来，把整个游戏顶出屏幕外。独立开发者Rico Trevisan最近发布的Number Bonds游戏，用了一个反直觉的解法：干脆不要键盘。

这个决定背后，是一套"轻到离谱"的技术架构——没有游戏引擎，没有WebGL，连图片素材都省了。

用SVG画连线，省掉100张PNG

Number Bonds的玩法很经典：一个大圆圈（总数）连两个小圆圈（部分），孩子填出缺失的数字。传统做法是设计师导出几十张不同布局的PNG，开发者再按需加载。Trevisan算了笔账：响应式布局×不同屏幕尺寸×Retina屏适配，图片数量会指数级爆炸。

他的解法是用纯SVG动态绘制连线。CSS Grid负责定位三个输入框，绝对定位的SVG层垫在底下，用JavaScript实时计算坐标。代码极简——两条line元素，x1/y1/x2/y2用百分比写死，strokeLinecap="round"让线头圆润。

「无论4K大屏还是碎屏iPhone，几何关系都是像素级精准。」Trevisan在博客中写道。这套方案的文件体积？零字节图片资源。

确定性生成器：拒绝重复题目

教育游戏有个隐形杀手：随机出题可能重复，也可能生成无解场景。Trevisan写了一个确定性生成函数，逻辑分层很干净：

第一步，根据难度上限随机生成"总数"（whole）；第二步，把总数拆成两个随机"部分数"（part1/part2），确保part1在1到whole-1之间，part2由减法得出；第三步，随机选0/1/2决定哪个圆圈留空。

这套算法的核心约束是：所有数字必须落在教师设定的难度区间内，且保证有唯一整数解。Trevisan没用什么机器学习，Math.random()加基础算术就搞定了。

⚡ 干掉手机键盘的3行代码

移动端输入框的默认行为，是教育游戏开发者的噩梦。focus事件触发系统键盘，viewport被压缩，游戏元素位移，孩子直接懵掉。

Trevisan的解法堪称粗暴：输入框用div模拟，绑定onClick事件，弹出自定义数字键盘。关键CSS只有三行——pointer-events: none让系统忽略触摸，user-select: none禁用文本选择，再套一层touch-action: manipulation消除300ms点击延迟。

「孩子点击数字时，屏幕纹丝不动。」这种体验在原生App里常见，但在Web端实现需要绕过浏览器的默认意图。Trevisan没有发明新轮子，只是把已有API的组合用到极致。

为什么不用游戏引擎？

整个项目的技术栈是Next.js+Tailwind CSS+SVG，没有Phaser、没有Three.js、甚至没有Canvas 2D。Trevisan的解释很产品经理：「对于拼图类游戏，DOM元素和React状态足够了。」

这个判断有个隐含前提——他清楚自己不做实时物理、不做粒子特效、不做复杂动画。需求边界卡得死，技术选型就轻。重引擎的 overhead（额外开销）被完全规避，构建产物小到可以塞进免费托管层。

游戏现已上线7x.games，面向的群体是学龄儿童和他们的老师。Trevisan没有披露用户数据，但留下了一个产品细节：自定义键盘的按钮尺寸按WCAG 2.1 AA标准设计，44×44像素，刚好够小胖手指精准命中。

如果所有教育软件都按这个思路做减法，孩子的屏幕使用时间会不会反而更值钱？