《matter.js》合成大西瓜的隐形引擎

2021年初，朋友圈被一个“合成大西瓜”的小游戏刷了屏：两个葡萄碰一起变橘子，两个橘子变菠萝，一路合到西瓜。全网都在熬夜合瓜，商家在数广告费。三年后，任天堂 Switch 上一款叫《西瓜游戏》的日本小品，靠同一套“水果下落、相同合并”的物理玩法，又在全球卖了几百万份（公开报道）。这两次爆红隔了两年、隔了一整个太平洋，但扒开它们的皮，底下转的是同一台机器——一个开源的 JavaScript 物理引擎，matter.js。

今天要挖的就是这个仓库。它本身不是一款游戏，而是一台“上头制造机”的核心部件：过去十年，无数网页小游戏、营销页里乱飞的小球、被你拖来拖去的布娃娃，背后都是它在算。作者是个人开发者 Liam Brummitt（GitHub 账号 liabru），一人写的、一人维护，纯 JavaScript、零依赖，MIT 协议。对一个想靠小游戏赚零花钱的个人开发者来说，这类“底层积木”仓库的价值非常直接——它把你和一个完整产品之间的距离，缩短到一个周末。

仓库档案

这是什么

一句话：matter.js 是一个跑在浏览器里的 2D 刚体物理引擎——你告诉它“这里有个圆、那里有块板、这边有重力”，它负责把之后的一切算明白：下落、碰撞、堆叠、弹开、翻滚。

它自己不定义玩法，玩法是你往上搭的。合成大西瓜这类游戏，核心循环用 matter.js 搭出来是这样的：

flowchart TD
    A[拖动瞄准下一颗水果] --> B[松手投放]
    B --> C[matter.js 接管：重力下落、碰撞、堆叠]
    C --> D[两个相同水果相碰]
    D --> E[合并成更大水果，分数上涨，粒子特效]
    E --> F{水果堆过警戒线?}
    F -- 没有 --> G[发放下一颗水果]
    G --> A
    F -- 逼近 --> H[紧张感拉满：每一颗都决定生死]
    H --> A
    F -- 超线 --> I[游戏结束，弹出分数结算]
    I --> J[复活钩子：看一次广告原地清一层]
    J --> A

注意这个循环里真正“上头”的部分——物理模拟、碰撞判定、堆叠反馈——全是引擎的活。你自己要写的，只有“投放”、“检测碰撞事件”、“触发合并”三段胶水代码，加起来百来行。这就是这台机器可怕的地方：它把游戏开发里最难的那部分（物理）变成了家电。

为什么上头

合成玩法已经反复被验证，但值得拆的是：为什么“物理”这个成分一加进来，上头程度就翻倍？

第一，零学习成本的拟真。 水果会滚、会塌、会卡缝里——这些不用教学，玩家在现实里已经玩了几十年沙子和积木。matter.js 算出来的运动足够接近直觉，玩家第一秒就“会玩”，上手成本是零。对比任何需要读教程的游戏，这就是转化率上的降维打击。

第二，混沌与可控的配比。 你只控制一件事：这颗水果投在哪。落下去之后，翻滚、碰撞、连锁合并全是引擎算的，不由你控制。但结果又被你的那一下投放深刻影响。这种“我只出了一半力，结果却全算我头上”的体验，正好卡在人类最沉迷的区间：完全随机是赌博，完全可控是工作，七分天注定三分靠打拼才是游戏。

第三，每一帧都在给反馈。 物理世界的画面永远是活的：水果在滚、塔在晃、缝在变紧。哪怕玩家什么都不做，屏幕也在制造期待感。这比“回合制等待反馈”密了一个数量级。合成成功那一下的缩放动画加分数跳动，只是在这个持续反馈流上又叠了一层确定性奖励。

第四，失败也是演出。 堆过警戒线的那一刻，不是弹一个"Game Over"就完了——整座水果塔会在物理引擎里塌给你看。崩溃本身就是烟花。玩家看着自己“作”出来的灾难翻滚落定，情绪峰值反而出现在失败瞬间，这就是“再来一局”按钮被点得最快的时候。

第五，“就差一点”的缺口。 因为物理是连续的而不是离散的，失误永远是渐变的：差一点没对齐、差一毫米卡在缝里。下次开局，玩家坚信“这把我能控制住手”。这个缺口在物理游戏里是无限刷新的。

技术拆解

对象模型极简。 核心就五样：Engine（世界+求解器）、Body（刚体）、Composite（容器）、Constraint（约束/关节）、MouseConstraint（鼠标抓取）。建一个弹球是三行代码：Bodies.circle 给坐标和半径，Composite.add 扔进世界，Engine.run 跑起来。对周末项目来说，学习曲线几乎不存在，官方 Playground 的 demo 全是几十行的短例子，复制出来改参数就是自己的原型。

逻辑与渲染彻底解耦。 Matter.Render 只是它自带的默认画布渲染器，你可以完全不用它——引擎可以无头（headless）跑，自己接 Canvas、Pixi 甚至 Three.js 做渲染，或者干脆把物理放在服务端算、客户端只做表现。这一点对做多人的合成/堆叠游戏（同步的正是物理状态）是刚需。

碰撞是事件驱动。 广相碰撞筛选出候选对，窄相算出精确接触，然后以 collisionStart、collisionActive、collisionEnd 事件抛给你。合成大西瓜的全部游戏逻辑，本质就是在 collisionStart 里查“两个 body 的水果等级是否相同”，是就移除两个、生成一个大的。几十行代码，一个爆款玩法的核心就写完了。

睡眠机制是堆叠游戏的命。 物体静止后自动休眠、不再参与求解，几百个水果堆在一起才不会把手机算热。做堆叠类小游戏时这个开关必须打开，这是仓库里最容易被人忽略但最值钱的一个配置。

能力边界要心里有数。 它适合几十到几百个刚体的场景——合成、堆叠、弹球、布娃娃、拆迁都在舒适区；上千刚体的大场面就要换空间划分方案或者干脆换引擎。另外它的物理不是严格确定性的，同一份输入重放可能有细微偏差，做回放和联机时要按“帧同步+容错”或者干脆只同步关键事件来设计。

可直接搬走的东西：投放器（MouseConstraint 加角度限制）、按等级合并的事件处理器、警戒线检测、水果缩放出生动画的时序控制。这套组合就是合成类小游戏的全部骨架。

变现观察

matter.js 本体一分钱不收，但它这条生态链上，钱是真实流动过的。

最直接的样本就是合成大西瓜。 2021 年那波刷屏，本体是网页 H5，商业模式是广告：看激励视频复活、看广告翻倍结算。据当时公开报道，其广告流水相当可观，随后应用商店里塞满换皮版本，进一步验证了这个玩法“免费玩+广告变现”的印钞能力。而网上铺天盖地的复刻教程里，相当一部分直接拿 matter.js 当物理层——换句话说，你今天用这个仓库写合成玩法，走的是被验证过无数次的路线。

付费市场的天花板也被捅破过。 Switch 上的《西瓜游戏》（Aladdin X）证明物理合成玩法在买断制市场照样能卖：几百万份销量（公开报道）。再往前，Peglin 把“弹珠物理+肉鸽”焊在一起，抢先体验阶段就卖出上百万份（公开报道）。物理玩法不挑商业模式，挑的是你把它包装成什么。

对个人开发者的现实路径，按门槛从低到高：其一，网页/小游戏平台（微信、QQ、抖音小游戏），matter.js 纯前端零依赖，打包即上线，变现靠激励视频广告，这是合成大西瓜的原生 habitat；其二，itch.io 出小玩具，物理解压类（拆房子、叠叠乐、沙盒布娃娃）一直有稳定的打赏和小额付费；其三，Steam 买断制，物理+肉鸽/物理+解谜的组合拳，Peglin 路线，工作量最大但客单价最高。

matter.js 自己的变现几乎没有——MIT 白送。它给作者带来的是另一种资产：上万星级的行业声誉和它撑起来的整个使用生态。这是“开源底层、赚钱在上层”策略的典型样本，和 mindustry 式“游戏本体开源、Steam 收钱”是两条都走得通的路。

给我的灵感

点子一：中文梗版合成大西瓜（MVP：1-2 周）。 玩法一层不动，素材和文案全部换成中文互联网的集体记忆：麻将牌合成（一万筒到清一色）、干饭合成（米饭→盖浇饭→满汉全席）、打工人合成（便利贴→需求文档→PPT→“已读不回”）。合成大西瓜验证的是玩法，不是水果；梗自带传播力，分享图就是获客渠道。变现走小游戏平台激励视频，复活位和结算翻倍位照抄。

点子二：物理+肉鸽的 Peglin 本土化（工作量：3-4 周）。 弹珠打怪：发射一颗球，在布满钉子和怪物的棋盘里弹射，撞到什么触发什么。肉鸽部分是每局捡增益卡（+1 弹跳、分裂球、穿透）。matter.js 的 collisionStart 天然就是“球碰到不同格子触发不同效果”的实现层。这个组合在 Steam 有百万销量先例，而中文题材的弹珠+肉鸽目前还没有统治级产品。itch.io 先卖 early access 试水，再上 Steam。

点子三：把合成骨架做成模板生意（工作量：2-3 周）。 用 matter.js 写一套通用的“物理合成”模板：投放器、合并逻辑、警戒线、排行榜、广告位接口全部参数化。一套挂上 CrazyGames/GameDistribution 这类 H5 游戏分发平台吃广告分成，一套打包去卖源码（游戏源码交易市场一直有这类模板的稳定需求）。你卖的不是一款游戏，是“下一个合成大西瓜”的入场券。

上手

这个仓库最诚实的地方在于：它不承诺你做出爆款，它只负责把“物理”这个最劝退的环节变成三行代码。爆款那半，是玩法、题材和你对手感的理解——也就是合成大西瓜和它无数平庸换皮之间，真正的差别。