**仓库档案** - 仓库：`gabrielecirulli/2048` - ⭐ Star：1.2万上下，Fork 数远高于 Star（据仓库页面） - 语言：JavaScript（纯原生，零框架零依赖） - License：MIT - 作者：Gabriele Cirulli，意大利开发者，写这游戏时 19 岁，个人项目 - 状态：玩法早已封版，仓库常年处于“完工不再动”的状态——对想抄作业的人来说，这反而是最好的状态 - 在线试玩：https://play2048.co 先说结论：如果你这辈子只想精读一个游戏仓库，学“怎么把一个玩法做到无法再删”，就选它。十一年过去，移动端小游戏市场上靠这套玩法吃饭的产品数以百计，而它们的祖师爷，是一个意大利年轻人用周末两天时间写出来练手的东西。 ## 这游戏是什么 一句话：4×4 的棋盘，往四个方向滑，数字相同的瓷砖撞在一起就合并翻倍，凑出 2048 就赢——然后你可以继续挑战更高的分。 它的出身比玩法还有名。2014 年 3 月，Cirulli 玩到一款 iOS 上的付费小游戏《1024》（往上追是 Asher Vollmer 的《Threes!》），觉得挺好玩，但自己手痒，想做一个带动画效果的网页版练练手。他后来在公开场合的原话大意是：我只是想给自己做个带动画的小版本，当作周末的编程练习。 两周之内，这个“练手项目”变成了一场全球性的数字瘟疫：办公室白领摸鱼、学生课堂传阅、媒体跟进报道、App Store 上冒出成百上千个借名字的克隆。Google 2014 年度搜索趋势里，它排在游戏类前列。一个没有推广、没有买量、没有美术资源的纯网页游戏，靠玩家的手手相传完成了这一切。 ## 玩家核心循环 ```mermaid flowchart LR A[滑动一次
全盘瓷砖倒向一边] --> B[系统随机投放
一块 2 或 4 的新砖] B --> C{还有空位或
可合并的邻居吗?} C -- 有 --> D[合并成功:数字翻倍
分数上涨+动画反馈] D --> E[离 2048 更近一步
大脑分泌一点多巴胺] E --> F[规划下一步
大数怎么靠边、小数怎么排] F --> A C -- 没有 --> G[棋盘锁死,游戏结束
结算分数,对比最高分] G --> H[就差一点点/这次能更好
不服,再来一局] H --> A ``` 注意这个循环里两个最精妙的阀门： **新砖投放是随机的**——你永远无法完全规划，只能“在随机里做最优”。这让每局都不一样，也让输棋有借口、赢棋有惊喜。 **失败是即时的、无惩罚的**——死局出现的那一刻游戏直接结束，没有生命值、没有体力条、没有等待。点一下“再来一局”，三秒后你又在一局新游戏里了。摩擦力小到近乎没有，这是它传播力的一半来源。 ## 为什么上头 拆开看，2048 把经典成瘾机制里的四样东西压缩到了一次滑动里： **即时反馈，频率高到变态。** 每滑一次，要么瓷砖移动、要么发生合并——没有一次操作是无效的。合并发生时，数字翻倍、瓷砖放大弹跳一下、分数跳涨。这个“弹跳”只是几行 CSS，但它给大脑的奖励信号是实打实的。对比那些点一下要转圈三秒的产品，2048 的反馈延迟是零帧。 **进度感有刻度，而且刻度是指数的。** 2、4、8、16……每次合并都让你“升一级”，而且越往上，每一级的视觉冲击越大——数字变大、颜色变深。玩家对“我这局最高合到过 512”有清晰的记忆点，这个数字就是这局的成就徽章。人类对指数增长没有直觉，所以每次翻倍都仍然新鲜。 **随机奖励，控制权又在你手里。** 新砖出现的位置不可控，但你怎么排布是你的决策。这是斯金纳箱和策略游戏的杂交：老虎机的随机性 + 象棋的深度。输了你不会觉得“运气游戏”，你会觉得“我刚才第 37 步不该把 128 放中间”。归因于自己，才会再来一局。 **社交攀比自带传播。** 分数是天然的比较物。“我 8900 分”“我 21000”，截图发群里，下一秒群里就少了一个人——他去下载了。2048 没做任何社交功能，但分数这个设计天然就是社交货币。传播不是它做了什么，而是它留了个口子。 还有一个常被忽略的设计：**它没有“通关即结束”**。合出 2048 会弹出胜利提示，但按钮写的是“继续玩”。胜利不是终点，是里程碑。多少独立游戏死在“通关了就卸载”，而 2048 把通关做成了一件只是顺路发生的事。 ## 技术拆解 这个仓库最大的特点是：**它是 2014 年前端的原生态标本，简单到可以直接背下来。** 文件结构一览（都在 `js/` 目录下）： - `game_manager.js` —— 游戏状态机，整个游戏的“大脑” - `grid.js` —— 4×4 棋盘的数据结构，管理格子与坐标 - `tile.js` —— 瓷砖对象，就一个数值加一个位置 - `html_actuator.js` —— 渲染层，把游戏状态画成 DOM - `keyboard_input_manager.js` —— 输入层，键盘、触屏手势统一包装成"移动事件” - `local_storage_manager.js` —— 存档，把棋盘、当前分、最高分塞进 localStorage - `application.js` —— 入口，把以上零件组装起来 没有构建工具，没有依赖，打开就能读。**全游戏的移动+合并算法大约一百多行**，思路值得完整讲一遍，因为它是可迁移资产： 1. 根据滑动方向算出一个**遍历向量**。往左滑时，格子要从左到右处理；往右滑时反过来。这个“处理顺序”是所有滑块类游戏的灵魂——先处理的瓷砖先占位，后面的瓷砖才能正确地一路滑到底。 2. 每块瓷砖先找到自己的**最远可达位置**（一路上都是空格就滑到头）。 3. 检查最远位置的下一格，如果数值相同且本回合**尚未合并过**，就合并——`merged` 标记保证一块 4 不能一口气变成 16，这是规则正确性的关键。 4. 全部移动完后，在随机空位投放一块新砖（90% 是 2，10% 是 4）。 就这四步。市面上所有 2048 变体、滑块合并类玩法，核心都是这四步。**这套算法今天用任何语言重写都是一两天的事**，你可以直接把它移植到微信小程序、Flutter、Godot，规则层完全不用动。 几个工程决策放到今天依然是教科书级别： **逻辑与渲染彻底解耦。** `game_manager` 只负责吐状态，`html_actuator` 只负责画。游戏核心对 DOM 一无所知。正因如此，后来社区把它移植到 React、Vue、Canvas、原生 App 的时候，规则层一行没改。你写任何小游戏，请照抄这个分层：规则、渲染、输入、存档四个模块，各自可以独立换掉。 **CSS 动画而非 JS 动画。** 瓷砖的滑动是绝对定位加 CSS transition，合并的弹跳是一个 class 切换。DOM 只动位置和 class，浏览器自己补帧。对小体量游戏来说，这比 requestAnimationFrame 手写插值便宜得多，而且效果是 60 帧丝滑。 **存档就一个 localStorage。** 没有账号体系，没有云同步，关掉浏览器再打开，棋盘还在原样。对一个局时长五分钟的游戏，这个设计刚好够用——多余的服务器一分钱不用花。 **离线可玩。** 当年用了 HTML5 AppCache（这个技术今天已废弃，别学），但"断网也能玩"这个目标本身值得记住：小游戏的传播场景经常是微信里点开一个链接，网络环境参差不齐，能离线就少一层流失。 顺带一提，这个玩法还养活了 AI 教学界：2048 是 expectimax 搜索和启发式评估的经典练习题，GitHub 上有一批求解器仓库，最高能稳定合出 16384。想给游戏加个“AI 代打”或者做个可视化教学视频，素材是现成的。 ## 变现观察 2048 的变现故事是一个**反向案例正面讲**的稀有样本——因为作者本人基本没从这游戏赚到直接的钱。 时间线是这样的：Threes! 团队打磨了一年半，定价 1.99 美元上架；1024 是它的移动端简化仿品；Cirulli 的 2048 又是 1024 的网页简化版，免费、开源、零广告。结果免费且最易获取的版本赢者通吃。Threes! 的设计师 Greg Wohlwend 当时公开表达过愤怒，大意是：我们花一年半做的游戏，输给了一个周末的克隆。这场“抄袭的抄袭的抄袭”链条后来成了游戏设计圈反复讨论的公案，核心争议至今没有答案：**玩法不受版权保护，那打磨玩法的成本谁来付？** 具体到钱，流向是这样的： - **Ketchapp 等移动端克隆**：借 2048 之名上架 iOS/Android，塞广告和内购，下载量千万级。MIT 协议完全不拦——它甚至不强制署名，只要求保留版权声明。这类克隆赚到的每一分钱，作者分文未得。 - **App Store 克隆海**：2014 年当年，App Store 里名字带 2048 的应用数以百计，大量是换皮加广告。免费小游戏 + 激励视频/插屏广告这条路径，被 2048 的克隆潮实打实验证了——门槛低到个人也能跑通。 - **作者本人**：Cirulli 没挂广告没收费。但 2048 成了他含金量最高的职业名片——一个全球现象级作品的作者。他后来进入 Medium 做前端，再之后加入做 Arc 浏览器的 The Browser Company。名气变现走的是职业道路，不是游戏内收入。 给个人开发者的启示有三层。第一层：**纯玩法创新留不住钱，但能买到入场券**——如果你做出一个像 2048 一样疯传的东西，真正的收益在你的下一个项目里。第二层：**克隆潮证明了这个玩法品类能吃广告变现**——你不必当祖师爷，当克隆潮里包装最好的那个就够了，后来“合成大西瓜”系列把这条路又走了一遍。第三层：**开源玩法类仓库的星标价值被普遍低估**——它带来的合作、工作机会和信任，折现率比广告高得多。 ## 给我的灵感 **点子一：换皮 + 成长线，做小程序小游戏（周末级 MVP，广告变现）。** 玩法层原样照抄那一百多行算法，主题换成有收集欲的物种：猫从奶猫合到巨型猫、修仙从练气合到大乘、汽车从二手奥拓合到超跑。每次升级配一张立绘和一句文案。成本几乎全在素材，逻辑零风险。上线微信/抖音小游戏，挂激励视频：死局时“看广告洗牌一次”、开局“看广告带一个词条”。同类玩法在小游戏平台有大量已验证流水，拼的是题材包装而不是算法。 **点子二：2048 + Roguelite 词条（1-2 周 MVP，适合 itch.io 或 Steam 抢先体验付费）。** 每局开局三选一词条：“4 号砖出现率 +20%"“开局自带一块 128"“每 1000 分获得一次撤销”。通关或达成分数解锁新词条池，构建出“这局我要玩撤销流还是大数流”的策略感。2048 的问题是一次性消费，词条系统直接给这个玩法续了五十小时命。这类“经典玩法+轻肉鸽”的重组是近两年独立游戏圈跑通过的付费公式，量级小、周期短，正适合个人。 **点子三：每日挑战 + 排行榜（约一周 MVP，网页广告+打赏）。** 固定每日随机种子，全世界玩家当天面对同一局——这是 Wordle 验证过的钩子，把单机玩法变成每日社交仪式。加一个极简每日排行榜，页面挂一条广告位，页面底部放打赏码。服务器只需要一个“生成今日种子 + 存分数”的接口，一台最低配的云函数就够。原版十年没人认真做这个，是个明显的空位。 **点子四（顺手赚的）：把求解器做成内容。** expectimax 求解 2048 的可视化视频、源码解析文章，国内外平台都还稀缺。不求直接变现，求的是给上面三个点子导流——技术和玩法解析内容，是独立开发者性价比最高的获客手段。 ## 上手 - 仓库：https://github.com/gabrielecirulli/2048 - 在线试玩：https://play2048.co - 建议的精读顺序：先玩三局感受节奏 → 读 `game_manager.js` 看 move 函数的四步拆解 → 读 `html_actuator.js` 看状态怎么变成动画 → 合上电脑，用你顺手的技术栈重写一遍规则层。重写得出来，这个仓库就归你了。 一个 19 岁年轻人在周末写下的一千行代码，十一年里被全世界抄了个遍。它没有让作者发财，但它证明了另一件事：一个足够小、足够锋利的玩法，本身就是一个可以环游世界的物种。你要做的不是复刻历史，是找到你的那把小刀。 > [!tip] 51学通信知识星球 > **星主：爱卫生**（微信：gprshome201101）——公众号「51学通信」创办者，19 年通信行业运维与讲师经验，著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书（各大电商平台有售）。 > **星球定位**：深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域，主打运维岗位与信令分析。 > **当前规模**：5200 篇主题 / 990 个回答，198 元/年。 > **加入福利**：加入星球后请加爱卫生微信，拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题，另有群内分享。 > **AI 加持**：51学通信知识星球已作为 skill 接入 WorkBuddy，使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例，做总结、找文档和 PPT 等场景全覆盖。