本文详细记录了作者全程使用 Claude AI 辅助，在两天内从零开发并上线在线小游戏 ZooBlocks 的全过程。游戏融合方块消除与动物园经营双循环玩法，采用纯 HTML/CSS/JS 单文件部署，支持手机电脑即开即玩。适合对 AI 编程、独立游戏开发或轻量级产品快速上线感兴趣的开发者与爱好者参考。
Tags:
ZooBlocks：方块消除 × 动物园经营
从零到上线全记录
前言：为什么突然做了个游戏
大家好，我是哥飞。
做了这么多 AI 工具站，每天盯着 Google Ads 后台看 ROAS、盯着 Stripe 看收入，说实话有时候会有点疲。上周末突然想换换脑子，做点纯粹好玩的东西。
然后我就想起之前跟 Claude 聊过一个想法——用俄罗斯方块的思路做一个方块拼图游戏。当时还反复折腾了好几轮，从 4×4 棋盘拆分算法开始，到拖放交互，到算法死循环……对，就是那个让 Claude 写了一版又一版、我还吐槽「你简直是乱搞」的那个项目。
这次我决定从头来，但方向完全变了：不做拼图，做消除。而且不只是消除，我要做一个有长期留存的游戏——方块消除 + 动物园经营，双循环驱动。两天后，ZooBlocks.app 上线了。
今天这篇文章，我想跟大家完整地聊聊这个游戏从 0 到 1 的过程：怎么想到的、怎么设计的、怎么一步步迭代出来的、踩了哪些坑。希望对大家做自己的小产品有启发。
一、灵感来源：从俄罗斯方块到 ZooBlocks
故事要从更早说起。
去年我在 Claude 的 Artifact 里做过一个实验：能不能把一个 4×4 的棋盘填满后，合理拆分成俄罗斯方块形状的元件，打乱顺序让玩家重新拼回去？听起来简单，实际做起来坑巨多——算法会卡死、拆出来的形状太大、拖放交互在手机上根本不好用。
当然，我觉得最根本原因是，那时候的 Claude 模型的编程能力还没现在那么强。
那个项目虽然没做完，但让我开始思考：方块类游戏的核心乐趣到底是什么？
拼图的乐趣是「找到正确位置」，但自由度低，每一关只有一个解。而消除类游戏的乐趣是「在约束中创造可能性」——你不知道下一组方块是什么，但你要在当前棋盘上做出最优决策。这种「策略 + 随机」的组合才是经久不衰的。
所以 ZooBlocks 的方向就定了：消除，不是拼图。
但光做消除还不够。市面上的方块消除游戏太多了，1010! 、Wood Block Puzzle 等等一大堆。我需要一个差异点。于是我加入了第二层：动物园经营（Zoo Tycoon）。你在消除方块时赚钻石，钻石用来买动物、升级动物，动物会自动产钻石，反过来又提高你消除方块的收益倍率。这就形成了一个飞轮。
二、核心设计：两套消除系统
ZooBlocks 最核心的创新是双消除系统同时运行。
1. 行列消除（Line Clear）
填满某一行或某一列后，整行/列消除。和传统俄罗斯方块一样直观。但我在计分上做了指数增长：同时消 1 条线得 ×1，2 条得 ×4，3 条得 ×8，4 条得 ×16。这个指数倍率让高手和新手的得分差距可以拉开好几个数量级，也给了玩家追求「一口气消多条」的强烈动力。
2. 颜色匹配（Color Match）
每个方块都是一种动物（熊、狐狸、青蛙、兔子、猫、猫头鹰），颜色不同。放下方块后，如果新放的格子和已有的同色格子相邻，且连通区域 ≥ 3，就会消除。用 BFS 洪水填充算法找连通组。
这里有一个巧妙的限制：必须同时包含「新放的」和「原有的」格子才触发。也就是说，你不能放一个三格方块，自己消自己。这是为了鼓励玩家「做布局」——先在棋盘上铺同色的动物，等下一轮来了合适的块，一放上去就能触发大面积消除。
3. 双系统同步触发
关键来了：行列消除和颜色匹配是同时计算的。一次放置可以同时触发行消除和颜色消除，重叠区域的格子两套系统各算一次分。而且消除后还会递归检测连锁反应——消除了一批格子后，可能又形成新的三连，继续消。
Pro tip：在一行里留一个空格，同时在旁边布局同色动物。当你填上那个空格时，行消除和颜色消除同时炸裂——这是 ZooBlocks 的顶级操作。
三、迭代过程：从原型到上线
说完设计理念，来聊聊具体怎么做出来的。我全程用 Claude 辅助开发，以下是真实的迭代时间线。
Day 1 上午：基础原型
第一步是搭基础框架。我选择了最朴素的技术栈：纯 HTML + CSS + JavaScript，单文件，零依赖。没用 React，没用任何框架，连字体都只用了 Google Fonts 的 Fredoka One。
为什么？因为我要部署到 Cloudflare Pages，追求的是极致加载速度。一个 HTML 文件，全球 CDN 分发，秒开。
第一版很简陋：一个 8×8 的棋盘，底部三个随机方块，点击放置，填满一行就消除。基本的游戏循环跑通了。
Day 1 下午：动物角色诞生
这是最有意思的迭代环节。我决定不用图片，所有动物形象都用 SVG 代码画。一个 animalFace() 函数，传入动物类型，输出一个完整的 SVG。
六种动物，每种一个代表色：熊（橘棕）、狐狸（红橙）、青蛙（绿）、兔子（粉）、猫（黄）、猫头鹰（紫）。
第一版画出来的……怎么说呢，像老鼠。然后我就开始了漫长的视觉迭代：
「不够萌」→ 加大眼睛比例、提高额头
「颜色太杂乱」→ 统一规则：面部特征只用黑白灰（#fff, #222, rgba），不允许彩色鼻子、粉色瞳孔
「太复杂了」→ 去掉所有多余细节，每种动物只保留一个关键特征：熊是圆耳朵、狐狸是尖三角耳、青蛙是鼓出来的大眼睛、兔子是长椭圆耳、猫是三角耳+胡须、猫头鹰是圆眼+尖喙
反复调了大概十几轮，终于达到了我满意的效果：抽象，提取关键特征，萌。而且因为是纯代码生成的 SVG，在任何分辨率下都清晰锐利，不存在模糊问题。
Day 1 晚上：手机适配地狱
PC 上跑得好好的游戏，到手机上一看——底部托盘被浏览器的地址栏遮住了。
这是一个经典的移动端坑：100vh 在手机浏览器里包含了地址栏的高度，但实际可视区域比 100vh 矮。
最终用了三层修复方案：CSS 用 100dvh（dynamic viewport height），JavaScript 里读 window.visualViewport.height 做实时计算，再加一个 visualViewport.resize 事件监听器动态更新。三管齐下才彻底解决。
Day 2 上午：关卡系统和进度存储
我手动设计了前 5 个关卡，目的是教学关：
第 1 关在 4×4 小棋盘上，目标简单，让你熟悉放置操作。第 2 关扩大到 5×5，引入颜色匹配概念。第 3 关 6×6，开始需要策略。之后棋盘逐步扩大到 9×9，目标也越来越多样——消行、达到分数、消除特定动物、做出连击。
从第 6 关开始就是程序生成的无限关卡了。算法会根据当前棋盘大小和玩家等级，随机组合不同类型的目标。
进度用 localStorage 存储，两个 key：zb_level 和 zb_totalScore。打开游戏时如果检测到存档，开始界面会显示「Continue Level N」按钮。简单粗暴但够用。
Day 2 下午：动物园经营系统
这是 ZooBlocks 的第二条腿。切到 Zoo 标签页，你可以用消除赚来的钻石购买动物。每只动物买入后会自动每秒产钻石，形成被动收入。
12 种动物，从最便宜的熊到最贵的龙。每种动物可以无限升级。经济设计上，每一种新动物的产出是上一种的大约 10 倍。这意味着你永远应该把钻石投入最新解锁的动物，而不是反复升级老动物。
动物园的总产出还会反过来成为消除模式的得分倍率（Puzzle Multiplier）。你的动物园越强，每一关消除赚的钻石就越多，形成一个越玩越爽的飞轮。
Day 2 晚上：分享海报和收尾
游戏做好了，得让玩家能炫耀。我做了一个分享海报功能：用 Canvas 生成一张 540×960 的图片，上面显示你的分数、等级、统计数据，以及六只动物方块。
这里踩了个技术坑：要把 SVG 画到 Canvas 上，需要先把 SVG 转成 Blob URL，再用 drawImage() 绘制。但直接转会报错——得给 SVG 加上 xmlns 属性，还得去掉 CSS 里的 position:absolute。调了两轮才搞定。
手机端用 Web Share API 实现原生分享（可以直接分享到微信、WhatsApp 等 App），桌面端 fallback 到文件下载。
最后我还重新生成了 OG 图片（2400×1260），确保在社交媒体分享时有好看的预览卡片。
四、一些关键的技术决策
为什么是单文件 HTML？
整个游戏大约 2500 行代码，HTML + CSS + JS 全在一个 index.html 里。没有构建工具，没有 npm，没有打包。好处是部署极其简单——往 Cloudflare Pages 一扔就完事。加载速度也快，一个文件搞定一切。
为什么用 SVG 画动物而不是用图片？
三个原因：不需要额外的图片请求、任何尺寸都清晰不模糊、方便在不同地方复用（游戏棋盘、托盘、Logo、开始界面、分享海报里的动物全是同一个函数生成的）。
为什么用 Web Audio API 做音效？
同样是为了零依赖。用代码合成音效，不需要加载任何音频文件。放置方块时的「嗒」声、消除时的「叮」声、升级时的奖励音效，全是 JavaScript 实时生成的。
为什么做四语言支持？
英文、中文、日文、韩文。因为这个游戏的玩法是全球通用的，不需要理解任何文字就能玩。加多语言支持成本很低（就是几组文案翻译），但能显著扩大潜在用户群。
五、几点反思
1. AI 辅助开发的真实体验
整个项目我全程用 Claude 写代码。老实说，Claude 的代码能力已经强到可以当半个全栈工程师用了。我说需求，它写代码，我测试，发现问题就截图或者描述现象，它再改。这个循环非常高效。
但也有它不够好的地方：视觉设计需要我不断给反馈（「不够萌」「像老鼠」），它没办法自己判断好不好看；复杂的游戏逻辑偶尔会有 bug，需要我自己理解代码后才能精准定位问题。
总结就是：AI 写代码很强，但产品决策和审美判断还是得人来做。
2. 从拼图到消除的转变
之前做俄罗斯方块拼图那个项目，折腾了很久最后放弃了。回头看，不是技术问题，是方向问题。拼图游戏的每一关只有一个解，重玩性差。而消除游戏每次都不一样，天然有无限重玩性。
有时候做产品，与其在一个有问题的方向上死磕，不如退一步想想方向对不对。
3. 增长飞轮的设计
ZooBlocks 里，消除赚钻石 → 钻石买动物 → 动物产钻石 → 钻石提高消除倍率 → 消除赚更多钻石。这个循环让玩家始终有目标感。
这跟我做 AI 工具站的逻辑其实是一样的：好产品 → 用户付费 → 收入投广告 → 更多用户 → 更多收入。飞轮的核心是每个环节都能正向强化下一个环节。
六、试试看
ZooBlocks 现在已经上线，地址是 ZooBlocks.app 。手机和电脑都能玩，浏览器打开就行，不用下载。完全免费，没广告，没内购。
如果你玩了觉得有意思，欢迎分享给朋友。如果你觉得哪里可以改进，也欢迎在群里跟我说。
最后，这个项目也再次证明了我一直在说的一件事：
做网站，做产品，不用想太多，先做出来。
两天时间，一个人，一个 AI 助手，就能从零做出一个有双循环驱动、支持四语言、部署在全球 CDN 上的在线游戏。
这个时代做产品的门槛已经低到不能再低了。缺的不是技术，是动手。
Ship Fast, Ship More.
以上这篇 Claude 写的文章怎么样，震撼到了你了吗？
没有评论:
发表评论