AI开发实战：用OpenClaw从零构建像素鸟游戏，解决子路径部署与移动端触控问题

夜深了，又到了让OpenClaw干活的时间。之前试过让它处理一些复杂的实验性项目，踩了不少坑（主要还是底层模型不太行）。这次我决定降低预期，找一个目标明确的小项目练手——从零开始开发一个经典的Flappy Bird网页游戏。整个过程还算顺利，游戏最终成功上线，你可以在这里试玩：https://ai.mahanzhou.com/flappy-bird。

在整个开发中，我只需要提出需求、发现问题和给出反馈。而实际的代码编写、调试和部署工作，全部由OpenClaw调用其内部的code-assistant代理（一个负责写代码的子Agent）自动完成。这次经历让我对AI编程的边界有了更深的体会。

开发过程的四个关键阶段

整个项目大致可以划分为四个阶段，每个阶段都遇到了不同的问题，也展示了AI在不同场景下的能力与局限。

第一阶段：基础构建与部署

我给出了一句明确的需求，AI很快搭建好了整套技术栈：包括Node.js/Express后端、基于HTML Canvas的前端游戏逻辑、Nginx反向代理、Let's Encrypt HTTPS证书、systemd服务保活，以及带日志滚动的请求记录中间件。这部分执行得相当流畅，几乎不需要我进行任何干预。AI展现出了在框架搭建和初始配置上的高效性。

第二阶段：静态文件路径错误

游戏被部署在 /flappy-bird 这个子路径下。这时问题出现了：AI生成的HTML文件使用了裸相对路径（如 game.js、style.css），导致浏览器在子路径下无法正确解析这些资源。

我指出问题后，AI迅速将路径修正为 ./game.js 和 ./style.css，问题立刻得到解决。这暴露了一个典型的“AI盲点”——它在生成代码时，默认了根目录部署的场景，对于子路径部署的路径规则缺乏感知。这个坑，需要具备Web部署经验的人类开发者才能一眼看出。

第三阶段：开始游戏按钮失效

页面能正常加载了，但点击“开始游戏”按钮却没有任何反应。AI采取了经典的调试策略：它向 game.js 中注入了大量的 console.log 日志，逐步定位初始化流程中的断点。同时，它还给静态文件加上了缓存破坏参数（?v=2），强制浏览器重新拉取最新代码。

这个过程很有趣，它展示了AI在无法直接“看到”浏览器开发者控制台时的应对逻辑——用详尽的日志来换取运行时的可见性。

第四阶段：移动端触控失效

PC端一切正常后，我用手机测试，却发现游戏根本无法操作。根本原因在于，touch事件处理逻辑与按钮的click事件存在冲突，而且canvas区域缺少正确的CSS touch-action属性设置。

针对这个问题，AI的修复方案很到位：

1. 将按钮和canvas的触控处理逻辑拆分开。
2. 补充了 -webkit-tap-highlight-color、最小点击区域等移动端适配细节。
3. 将静态资源的版本号同步更新至 ?v=3，确保移动端浏览器能加载到修复后的代码。

总体感受与经验

用AI辅助开发，并没有传说中那么“零门槛”。以第二阶段的路径问题为例，是我主动去检查生成的代码才发现的——AI自己并不会意识到这里有坑。类似地，每个阶段该如何描述问题、该引导AI往哪个方向排查，背后都需要一定的技术直觉。

AI在初始构建和对明确问题的修复上效率极高。但它无法自己感知那些“隐形的”假设，比如子路径部署的规则、真实手机上的触控行为差异。这些问题，只有当你真正去使用、去碰壁时，才会被发现和反馈。

某种意义上，人的核心作用不再是写代码，而是充当AI与真实物理世界、复杂业务场景之间的那层“感知器”和“决策器”。如果你想查看更多关于利用AI进行开源实战的案例和心得，不妨来云栈社区逛逛，这里有很多开发者在分享类似的实践。

---

现在，去玩一把

游戏已经完全部署上线，无论是在手机还是电脑上都能畅玩。

游戏地址：

https://ai.mahanzhou.com/flappy-bird

点击上方链接直接跳转，或长按复制链接后在浏览器中打开。

操作说明：

• 电脑端： 点击“开始游戏”按钮；游戏中按空格键控制小鸟跳跃。
• 手机端： 点击“开始游戏”按钮；游戏中点击屏幕任意位置控制小鸟跳跃。

---

完整开发记录

下面是本次AI辅助开发的全过程记录，包含我的原始指令和AI的回应。原始对话为英文，已由AI翻译为中文。使用英文指令主要是为了输入方便，并且感觉AI对英文的理解有时会更精准一些。

初始需求

用户指令：

让 code-assistant 编写一个 Flappy Bird 的 Web 应用版本，完成构建、测试并发布。URL：https://ai.mahanzhou.com/flappy-bird，内部端口：3006。添加请求日志（按天滚动）。持续通知我进度。

项目需求分解

1. 游戏功能：

   • 完整的 Flappy Bird Web 应用克隆版
   • 充分的构建与测试
   • 部署到指定 URL
   • 响应式设计

2. 技术规格：

   • Node.js/Express 服务器
   • 单页 HTML/CSS/JavaScript 前端
   • 内部端口：3006
   • 按日滚动的请求日志

3. 基础设施：

   • Nginx 反向代理配置
   • Let's Encrypt HTTPS 证书
   • systemd 服务保持持久运行

构建过程详解

阶段一：初始部署

code-assistant 代理接到任务后，完成了以下初始构建：

创建的内容：

1. 后端（Node.js/Express）：

   • 服务运行在 3006 端口
   • 自定义请求日志中间件
   • systemd 服务配置

2. 前端文件：

   sites/flappy-bird/public/
   ├── index.html    (957 字节)
   ├── style.css     (2.3 KB)
   └── game.js       (8 KB)

3. 游戏功能：

   • 经典 Flappy Bird 玩法（点击/空格键操控）
   • 桌面端与移动端响应式设计
   • 使用 localStorage 记录最高分
   • 基于 Canvas 的流畅动画渲染
   • 小鸟、管道、云朵与地面图形

4. 请求日志：

   • 按天进行日志滚动
   • JSON 格式，含时间戳
   • 日志路径：sites/flappy-bird/logs/requests-YYYY-MM-DD.log

日志示例：

{"timestamp":"2026-03-18 09:27:24","method":"GET","path":"//game.js","ip":"::ffff:127.0.0.1","userAgent":"curl/8.5.0"}

阶段二：文件引用路径问题

问题反馈：

“game.js 和 style.css 的引用方式有误。例如，裸引用 game.js 无法被解析为 https://ai.mahanzhou.com/flappy-bird/game.js。请修复。”

根本原因： HTML 文件使用了不带 ./ 前缀的相对路径，导致浏览器在访问 /flappy-bird 子路径时路径解析错误。

修复方案：

• 将 href="style.css" 改为 href="./style.css"
• 将 src="game.js" 改为 src="./game.js"

修复结果：

• ✅ https://ai.mahanzhou.com/flappy-bird/（HTML - 200 OK）
• ✅ https://ai.mahanzhou.com/flappy-bird/style.css（CSS - 200 OK）
• ✅ https://ai.mahanzhou.com/flappy-bird/game.js（JavaScript - 200 OK）

阶段三：开始按钮失效

问题反馈：

“点击‘开始游戏’按钮后无法启动游戏，找出原因并修复。”

初步排查：

• JavaScript 语法正确
• 无明显控制台报错
• 事件监听器已正确挂载

修复方案：

1. 添加调试日志： 在代码关键节点（窗口加载、Canvas初始化、按钮事件绑定、游戏循环等）注入大量 console.log 语句。
2. 强制刷新缓存： 为静态文件添加版本参数，强制浏览器重新加载。
   • script 标签更新为 game.js?v=2
   • CSS 链接更新为 style.css?v=2

阶段四：移动端触控问题

问题反馈：

“在 PC 端正常，在手机上无法使用。”

根本原因： 移动设备上的触控事件处理不当。现有的 touchstart 处理器阻断了按钮点击，且 canvas 的点击跳跃也无法正常触发。

修复方案：

1. JavaScript 触控处理优化：

   // 独立的 canvas 点击处理器
   function handleCanvasTap(e) {
       if (e.target.id === 'gameCanvas' && gameState === 'playing') {
           e.preventDefault();
           jump();
       }
   }
   
   // 为按钮同时添加 touch 和 click 事件监听
   startBtn.addEventListener('click', startGame);
   startBtn.addEventListener('touchstart', function(e) {
       e.preventDefault();
       startGame();
   }, { passive: false });

2. CSS 触控优化：

   body {
       touch-action: manipulation;  /* 禁止缩放 */
   }
   
   #gameCanvas {
       touch-action: none;  /* 禁用 canvas 默认触控行为 */
   }
   
   .screen button {
       touch-action: manipulation;
       -webkit-tap-highlight-color: transparent;
       min-width: 200px;
       min-height: 60px;
   }

3. 缓存破坏更新： 将静态资源版本号升至 v=3，强制移动端浏览器重新加载修复后的代码。

最终技术细节

项目目录结构

sites/flappy-bird/
├── public/
│   ├── index.html
│   ├── style.css
│   └── game.js
├── logs/
│   └── requests-YYYY-MM-DD.log
├── server.js
├── package.json
└── README.md

Nginx 配置

location /flappy-bird {
    proxy_pass         http://127.0.0.1:3006/;
    proxy_http_version 1.1;
    proxy_set_header   Host              $host;
    proxy_set_header   X-Real-IP         $remote_addr;
    proxy_set_header   X-Forwarded-For   $proxy_add_x_forwarded_for;
    proxy_set_header   X-Forwarded-Proto $scheme;
    proxy_buffering off;
}

服务管理命令

systemctl status flappy-bird.service   # 查看状态
systemctl restart flappy-bird.service  # 重启服务
journalctl -u flappy-bird.service -f   # 查看日志

游戏操控说明

桌面端

• 开始/重新开始： 点击“开始游戏”按钮或按空格键。
• 游戏中： 按空格键或点击游戏画面控制小鸟跳跃。

移动端

• 开始/重新开始： 点击“开始游戏”按钮。
• 游戏中： 点击屏幕任意位置控制小鸟跳跃。

经验总结

1. 路径解析： 将Web应用部署到子目录时，HTML中引用静态资源的相对路径务必添加 ./ 前缀。
2. 移动端触控： 必须将Canvas的触控处理与UI按钮的触控处理逻辑拆分开，避免事件冲突，并正确配置CSS的touch-action属性。
3. 缓存管理： 在开发调试阶段，使用版本查询参数（如 ?v=X）是强制浏览器刷新缓存的有效手段。
4. 调试思路： 当无法直接访问运行时环境（如浏览器控制台）时，在代码中预设完善的 console.log 日志是定位客户端问题的核心方法。
5. AI协作模式： AI擅长执行明确指令和修复已识别的问题，但对于部署环境、真实设备交互等“上下文假设”，仍需人类开发者进行监督和补全。

使用的技术栈

• 后端： Node.js、Express
• 前端： HTML5、CSS3、原生JavaScript、Canvas API
• Web 服务器： Nginx（反向代理）
• SSL： Let‘s Encrypt
• 服务管理： systemd
• AI 工具： OpenClaw，使用 code-assistant 代理（底层为DeepSeek模型）

最终状态

✅ 功能完整，已部署上线 ✅ 桌面端与移动端均已适配 ✅ 按天滚动的请求日志 ✅ 响应式设计 ✅ systemd 服务持久保活

线上地址： https://ai.mahanzhou.com/flappy-bird 🐦

本文档记录了借助 AI 从零完整构建并部署一个可玩 Web 游戏的全过程。