![]()
一个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像素,刚好够小胖手指精准命中。
如果所有教育软件都按这个思路做减法,孩子的屏幕使用时间会不会反而更值钱?
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.