24 小时做了个识图小游戏：鹅腿猎人诞生记

鹅腿猎人

从一个热搜说起

前两天刷到一条热搜：北大鹅腿阿姨拿鸭腿冒充鹅腿。评论区一片哀嚎——吃了这么久的鹅腿，结果可能一直都是鸭腿。有人说自己从来就没分清过，有人说颜色不一样明显能分辨，还有人贴出对比图争论不休。而我突然想到：

鹅腿+测试有没有搞头？

产品定义：10 分钟想清楚的事

热点的保质期很短，第一天不做，第二天就凉了。所以我给自己定了几个硬约束：

约束	原因
24 小时内上线	热点不等人
AI 优先	尽量加速开发
利用已有技术积累，特别是“咱妈TI”	不重复造轮子
单页 HTML，不用构建工具	减少流程，改了就生效
10 道题，40 秒内完成	传播转化率最高的是短流程

产品名叫鹅腿猎人，其实这个没有太认真命名，定位是「你能分清鹅腿和鸭腿吗」的 H5 互动测试。核心玩法：

简单题（Q1-3）：左右两张图对比，选哪边是鹅腿
普通题（Q4-7）：单张烹饪后的腿，判断鹅腿还是鸭腿
挑战题（Q8-10）：特写/骨架/AI 生成图，三选一（甚至有 AI 生成选项）

技术架构：能简则简

整体架构直接复用了之前 MAMTI 咱妈TI 的纯前端模式：

组件	技术	理由
前端框架	无（Vanilla JS IIFE）	零构建，改了直接部署
样式	Tailwind CSS CDN + 自定义 CSS	快速出活，不纠结设计系统
海报生成	html2canvas	成熟库，一行搞定
本地统计	localStorage	零后端，个人最佳/历史记录
云端统计	Cloudflare Workers + KV	异步上报，每题全服正确率
部署	Cloudflare Pages（`public/` 目录）	免费够用，全球 CDN

文件结构也极简：

goose-hunter/
├── public/                  # 部署目录
│   ├── index.html           # 单页入口
│   ├── css/style.css        # 自定义样式 + 动画（187行）
│   └── js/
│       ├── app.js           # 主逻辑 + 状态机（525行）
│       ├── questions.js    # 10题题库 + 随机旋转（195行）
│       ├── scoring.js       # 加权评分 + 动态评语
│       ├── titles.js        # 5级称号体系
│       ├── poster.js        # 分享海报生成
│       ├── share.js         # Web Share API + 剪贴板降级
│       └── stats.js         # localStorage 个人统计
├── workers/                 # CF Workers 云端统计 API
└── docs/                    # 开发文档

JS 按模块拆分，但全部用 <script> 标签引入，不搞 module 系统。反正就一个页面，不需要打包。

最耗时的部分：找腿照！

是的，不是开发而是找鹅腿和鸭腿的照片。经历了以下阶段：

搜索：通过传统搜索引擎，但说实话搜出来的图片与文本说明的匹配程度我自己也不知道对不对，因为我也分不清。
AI生成：使用Image2生成一些照片，真实感挺差的，只能用于AI生成选项，不能以假乱真，如下：
万能的小红书：正好是因为热点时间，小红书上有很多鸭腿、鹅腿的对比照片，甚至还找到了骨架照片（感谢邢立达老师）：

初步的图片需要经过裁剪才能作为题目，我使用的是线上工具可画，有简单的AI消除，免费版也够用了。

整个搞下来，包括试错，差不多快2小时了。

几个有意思的细节

1. 难度加权评分

不是简单的「答对一题得 10 分」，而是按难度加权：

简单题 ×1，普通题 ×1.5，挑战题 ×2
最终归一化到 100 分

这意味着挑战题答对一道，相当于简单题答对两道。这也符合直觉——最后那道 AI 生成的图，能认出来的确实比前面的硬多了。

2. 随机旋转干扰

每张图加载时会随机旋转 0°/90°/180°/270°（挂架图和骨架图除外，旋转没意义）。这增加了辨别难度，让玩家不能只靠构图方向来猜。

3. 5 级称号体系

分数	称号	评价
0-39	🛒 阿姨VIP客户	见腿就买
40-59	🔍 鹅腿学徒	偶尔被骗
60-79	🏆 鉴腿专家	能在食堂独立生存
80-94	👑 鹅腿大师	鸭腿骗不过你
95-100	🥇 北大鉴腿王	建议应聘质检员

「阿姨VIP客户」这个称号是我最满意的——自嘲的同时又呼应了事件本身，天然有传播力。

4. 动态评价文案

结果页不是固定的评价，而是根据表现动态生成。会综合考虑：

最长连续答对数（8连对说「你是天生的鉴腿师」）
平均答题速度（< 1.5 秒说「几乎是直觉反应」）
挑战题正确率（全对说「可以去当质检员」）
简单题翻车情况（< 60% 说「建议先回食堂补课」）

这种动态文案比固定文本有更强的「被分析感」，用户更愿意分享。

5. 云端统计（Cloudflare Workers）

虽然核心功能是纯前端，但我还是加了一个轻量的云端统计：

用 Cloudflare Workers + KV 存储全局数据
每局结束异步上报（不阻塞流程）
结果页异步拉取真实击败百分比和每题全服正确率
API 不可用时静默降级，不影响用户体验

这是一个很好的设计模式：核心功能绝不依赖网络，增强功能异步加载。

传播设计：从玩法到分享

做热点 H5 的核心不是好玩，是传播。从第一行代码开始就要想：用户凭什么把这个链接发给别人？

我的答案是：称号 + 海报 + 好奇心驱动。

称号体系让人想晒自己的段位（「我居然是阿姨VIP客户」）
海报生成让传播有载体（不需要截图，直接保存分享）
好奇心驱动二次传播（「你能分清吗？来试试」）

分享功能做了两层降级：Web Share API → 剪贴板复制。微信内置浏览器不支持 Share API，所以剪贴板是必选项。

踩过的坑

网络问题：Cloudflare虽然是大善人，但在大陆访问还是多少有些网速和api稳定性的问题。特别是统计API，好像如果是使用CF原始的worker API地址会无法访问。最后我没有专门再设置新域名，因为KV的日put量只有1000，权衡后感觉不太必要。
html2canvas 的坑：某些 CSS 属性（如 backdrop-filter）html2canvas 不支持。海报模板尽量用基础 CSS，避免花哨效果。
占位图的 emoji 渲染：某些系统/浏览器的 SVG 内 emoji 渲染有差异，最终选择了最安全的 emoji 字符。

从想到上线：时间分配

阶段	耗时	内容
产品定义 + 素材收集	2h	规则、题库、文案、找图片
核心玩法开发	1h	答题流程、评分、标题体系
传播模块	1h	结果页、海报、分享
体验优化	1h	动画、样式、响应式
测试 + 部署	1h	全流程冒烟、CF Pages 部署
合计	~6h

实际比计划的 24 小时快了不少，核心原因是复用了 MAMTI 的架构模式——状态机、页面切换、海报生成这些模块几乎是搬过来的，只改了业务逻辑。

上线后

鹅腿猎人已部署在 gh.maigic.top，扫码或点击即可体验。

回头想想，做热点产品有个有趣的矛盾：越快越好，但也越快越容易出 bug。我的策略是——MVP 极致精简，宁可少做功能，也要确保核心流程无断点。

10 道题、40 秒、一个称号、一张海报。就这样。

分数海报

👇 你能分清鹅腿和鸭腿吗？来挑战：gh.maigic.top