## 仓库档案 - **仓库**：[nebez/floppybird](https://github.com/nebez/floppybird) - **是什么**：Flappy Bird 的 HTML5 开源复刻，纯 HTML/CSS/JavaScript，零构建、零框架依赖，克隆下来双击 index.html 就能玩 - **作者**：Nebez Briefkani（个人账号 nebez），前端工程师，这是一个典型的“周末作品”级个人项目 - **语言**：JavaScript（配少量 CSS 与素材文件） - **License**：MIT - **在线 Demo**：（就挂在 GitHub Pages 上，零服务器成本） - **更新状态**：属于“写完即封版”的完成品，多年没什么大改动（动态数据以仓库页面为准） 先把话说在前头：这是本期第一次遇到核查通道全挂的局面，Star 数这类实时数据没能逐一复核，凡涉及具体数字的地方我都标注了来源或直接省略，不编数。但这个仓库的价值根本不在星数——它是**游戏史上最著名变现案例的开源标本**，你随时可以打开 Demo 玩上一局验证下面说的每一条。 ## 这游戏是什么 一句话：屏幕上一只鸟，你点一下它往上扇一下翅膀，不点它就往下掉，你要控制它在成排的绿色管道缝隙里穿行，撞到任何东西即死，死完一秒内重开。 没有关卡，没有道具，没有剧情，没有教学。全部操作是“点”。全部规则一句话讲完。2013 年底，正是这个玩法让原版 Flappy Bird 在全球 iOS 免费榜上屠榜，作者阮哈东（Dong Nguyen，越南独立开发者，工作室 dotGears 只有几个人）在采访里说，巅峰期游戏靠底部广告条**一天进账约 5 万美元**——然后他在 2014 年 2 月 10 日亲手把它下架，理由是“它太容易上瘾了”。下架之后，预装了这款游戏的二手 iPhone 在 eBay 上被炒到上千美元，各应用商店一夜之间冒出成百上千个换皮版抢广告费。 而 floppybird 就是把这个印钞标本的解剖图，原样摊开在了 GitHub 上。 它的核心循环长这样： ```mermaid flowchart LR A["点一下屏幕/空格
翅膀扇一下"] --> B["重力把它往下拽"] B --> C{"撞上管道或地面?"} C -- "没撞" --> D["穿过缝隙 +1分
音效即时奖励"] D --> B C -- "撞了" --> E["啪一声坠地
本局结束"] E --> F["亮出分数和历史最高
就差一点点"] F -- "重开不到一秒
再来一局" --> A ``` 注意这个循环里没有一个环节是“等待”：不用读条、不用过场、不用点确认。死亡动画放完的瞬间，你已经站在下一局的开局画面里了。这个“重开延迟趋近于零”的设计，是后面所有上头机制的放大器。 ## 为什么上头 Flappy Bird 类玩法经常被当作“简单”的反面教材，但拆开看，它几乎是行为设计教科书： **1. 学习成本为零，精通成本无穷。** 第 0 秒玩家就已经掌握了全部操作，但第 100 局还在死。规则一句话，肌肉修炼一辈子。这保证任何一个路人点进来都没有“要不要学一下”的犹豫——网页游戏最贵的就是进来的前 3 秒，它一分都没浪费。 **2. 即时反馈密度拉满。** 每一次点击，鸟立刻上升；每穿过一根管道，“叮”一声加一分。你的每个输入在 0.1 秒内都有明确回报，你的每次失误在 0.5 秒内都有明确惩罚。大脑对这种“动作—结果”的高频闭环毫无抵抗力，跟捏泡泡纸是同一套神经回路。 **3. 恒定难度 + 随机微扰。** 管道缝隙大小不变，但出现的垂直位置随机。这让玩家永远觉得“上把是我失误，这把能行”——失败原因永远可以归咎于“刚才手抖”，而不是“游戏变难了”。这种归因方式让人极难放弃。 **4. 近失效应（near-miss）。** 死的时候你几乎总是差一点点：差一根管道、差一次点击。老虎机行业一百年前就懂，差一点点的失败比惨败更让人想再来一次。Floppy Bird 把每一局失败都设计成近失。 **5. 分数即社交货币。** 当年朋友圈、微博、Twitter 全是“我过了 30 分”的截图和哀嚎，规则简单到可以口头传播——“就是个躲管道的”——听的人 10 秒后就能加入攀比。可攀比的极简分数，比任何成就系统都利于病毒传播。 **6. 损失厌恶的钩子。** 死在 7 分你无所谓，死在 47 分你浑身发痒。而随着你变强，你的“最高分”越来越高，每局的沉没成本也水涨船高。“都冲到这个分了，再来一把”——这句话就是这类游戏一半的留存。 这六条里，1、2、4、6 是玩法自带的，3、5 可以被你后天设计（随机微扰的幅度、分数的可晒性）。这也是我把它挖出来的原因：**它是全部机制可以被一句话复述、又全部机制都值得抄的少数样本。** ## 技术拆解 floppybird 的技术栈朴素到令人发指，而这正是它作为“抄作业模板”的价值： - **零构建纯前端**：HTML + CSS + 原生 JS（借助 jQuery 做事件与 DOM 操作），没有 webpack、没有 npm、没有框架。你 clone 下来用浏览器直接打开 index.html 就能跑。对一个想快速验证玩法的人来说，“零工具链”意味着所有时间都花在玩法本身上。 - **渲染不走 Canvas**：它的鸟、管道、地面都是 DOM 元素 + CSS 切换雪碧图帧动画，位置由 JS 每帧更新。碰撞检测是朴素的矩形相交判断。这个选择在当年让代码更好读——你现在打开主逻辑文件 main.js，几十行就能看懂一个完整游戏循环是怎么搭的：初始化 → 监听输入 → 每帧更新位置 → 检碰撞 → 更新分数 → 死亡处理 → 重开。 - **输入三通道**：空格/上方向键、鼠标点击、触屏，各写了几行监听。手机上能玩，是它比大多数开源小游戏传播广的原因之一。 - **存档就一行**：历史最高分存 localStorage。没有账号系统、没有后端。但请注意——这一个 localStorage 就撑起了“损失厌恶”钩子的全部数据基础。存档系统不需要复杂，只需要**让玩家舍不得清掉它**。 - **素材直接取自原作雪碧图**：鸟的扇翅、管道、地面滚动，全是原版素材。这在教学演示上无可厚非，但**商用必炸**——这既是技术拆解也是法律拆解，后面变现一节细说。 可直接复用的组件清单：一个 60 帧的游戏循环骨架、矩形碰撞检测函数、localStorage 最高分读写、多输入事件统一入口、死亡与重开的状态机切换。这五件东西加起来几百行，是一个“能玩的小游戏”和“能上头的小游戏”共用的地基。你下一步做任何一键/两键小游戏，都可以从这里开刀。 ## 变现观察 这个仓库本身没有变现痕迹（MIT 开源、免费 Demo、无广告），但它指向的原型是**移动游戏史上最干净的广告变现案例**，值得单独记一笔账： - **原型的账本**：Flappy Bird 免费 + 底部横幅广告，阮哈东自述峰值日入约 5 万美元。没有内购，没有抽卡，没有体力值。这个案例证明了超休闲赛道的铁律：**玩法上头 × 单用户广告价值 × 传播速度，三者相乘就是印钞机**，而第一条完全由你的设计决定。 - **下架窗口的故事**：2014 年 2 月原版下架后，App Store 里立刻挤满 Splashy Fish、Ironpants 之类的“平替”，有几款在几周内冲进免费榜前列，广告费接到手软。换皮抢窗口期是一门真实存在过的生意——虽然粗糙，但它验证了“上头玩法可复制，流量可截胡”。 - **今天你能走的路**： 1. **网页 + AdSense/横幅**：floppybird 这种体量，挂 GitHub Pages 或 Cloudflare Pages 零成本，靠短视频引流、页面挂广告，是门槛最低的起步方式（单页广告收益很薄，本质是练手 + 攒案例）。 2. **微信/抖音小游戏**：这是当下中文世界对超休闲最友好的土壤——平台代接入广告 SDK（激励视频 eCPM 远高于网页横幅），你只管交玩法。一键类玩法在小游戏平台历来是买量/自然流的硬通货。 3. **itch.io / 应用商店**：免费上架 + 广告，或 1 美元买断去广告。超休闲买断不多见，但可以作为“支持作者”的补充收入。 - **必须提醒的版权红线**：floppybird 用了原版美术素材和音效，名称也贴着 Flappy Bird——作为开源教学演示没问题，**你拿去商用就是另一回事**。“玩法”不受版权保护（你可以做躲管道的游戏），但美术、音效、名称、角色形象全受保护。换皮复刻，皮和名字必须是你自己的。 ## 给我的灵感 **点子一：换皮一键游戏，直投小游戏平台（MVP 约 1-2 周）。** floppybird 的逻辑代码量小到你可以一周内吃透并重写。骨架不动（点击=上升、重力、管道、死亡、重开、最高分），皮整个换掉：题材选中文流量密码——“挤地铁”（人往上挤、早高峰人群是管道）、“抢红包”（红包从天上掉、点一下往上蹦）、“外卖电动车钻车缝”。变现走微信/抖音小游戏的激励视频：死了以后“看广告原地复活一次”，这一条机制在超休闲品类里的广告收益占比通常超过一半——Floppy Bird 时代只有横幅，现在激励视频是给“再来一局”明码标价。 **点子二：每日一题 + 固定种子排行榜（MVP 约 2-3 周）。** 给躲避玩法加一层 Hello Wordl 式的稀缺钩子：每天全网同一套管道布局（用日期做随机数种子即可，技术上五行代码），每人每天一次正式成绩，结束生成分享图。这一改动同时解决三件事——玩家间可攀比（同题才可比）、可传播（晒图自带入口）、可留存（明天还有一题）。网页版挂广告 + 可选打赏，玩法还是那几百行。 **点子三：“一百行写一只鸟”的教程生意（MVP 约 1 周）。** 如果只想低成本试水，把 floppybird 当教材：自己从零写一个纯 Canvas 版躲管道游戏，过程录成图文/视频——“100 行 JavaScript 写出史上最上头的游戏”。这类内容在 B 站/公众号的完播和收藏率历来好得离谱，导流到 Gumroad/爱发电的付费小册，或直接作为你接外包、找工作的作品集。教学变现的特点是：游戏的收入可以平庸，但“我拆过最上头的游戏”这个内容本身能变现。 ## 上手 - **仓库**：（MIT 协议，可自由改版，商用记得换皮换名） - **在线玩**：，打开就能玩，建议先死十次再读代码——你会对 main.js 里每一行“为什么这么写”有体感。 一句话收尾：史上最疯的一只鸟早就证明过，上头的核心循环可以小到几百行代码；floppybird 把这份答卷原样开源了，剩下的题目——换什么皮、加什么钩子、去哪个平台收钱——才是你的部分。 > [!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 等场景全覆盖。