OpenClaw:用AI开发像素鸟游戏

山寨一个游戏：一次完整的AI辅助开发实录

夜深了，又是调戏 OpenClaw 的时候了。之前试过让它处理一些复杂实验性项目，踩了不少坑（主要还是zai/glm-4.7不太行）；这次降低预期，找了个目标明确的小项目——从零开发一个经典的 Flappy Bird Web 游戏。还算比较顺利，游戏已经上线可玩（https://ai.mahanzhou.com/flappy-bird）。

整个过程我只负责提需求、发现问题、给出反馈——实际的代码编写、调试、部署，全部由 OpenClaw 调用 code-assistant 代理（一个负责帮我写代码的子 Agent，底层模型：zai/glm-4.7）完成。

开发过程分为四个阶段：

第一阶段：基础构建与部署。 我给出一句话需求，AI 迅速搭好了整套技术栈：Node.js/Express 后端、HTML Canvas 前端游戏逻辑、Nginx 反向代理、Let's Encrypt HTTPS 证书、systemd 服务保活，以及带日志滚动的请求记录中间件。这部分执行得相当流畅，几乎没有需要干预的地方。

第二阶段：静态文件路径错误。 游戏部署在 /flappy-bird 子路径下，AI 生成的 HTML 使用了裸相对路径（game.js、style.css），浏览器无法正确解析。我指出问题后，AI 将路径修正为 ./game.js 和 ./style.css，问题立刻解决——这是一个典型的"AI 在子路径部署场景下的盲点"。

第三阶段：开始游戏按钮失效。 页面能加载，但点击"开始游戏"按钮没有反应。AI 的排查方式是：向 game.js 注入大量 console.log 日志，逐步定位初始化流程中的断点，同时给静态文件加上缓存破坏参数（?v=2）强制浏览器重新拉取。这个调试过程展示了 AI 在无法直视浏览器控制台时的应对策略——以日志换可见性。

第四阶段：移动端触控失效。 PC 端一切正常，手机上却无法操作。根本原因在于 touch 事件处理逻辑与按钮点击事件存在冲突，且 canvas 区域缺少正确的 CSS touch-action 属性设置。AI 将按钮和 canvas 的触控处理拆分开来，并补充了 -webkit-tap-highlight-color、最小点击区域等移动端适配细节，版本号同步升至 ?v=3。

总体感受： 用 OpenClaw 建站，并没有想象中那么"零门槛"。以第二阶段的路径问题为例，是我主动翻看生成的代码才发现的——AI 不会自己意识到这里有坑。类似地，每个阶段的提示词该怎么写、问题出在哪里、该往哪个方向排查，背后都需要一定的技术直觉。AI 在初始构建和明确问题的修复上效率极高；但那些"隐形的"假设——比如子路径部署的路径规则、真实手机上的触控行为——它无法自己感知到。这些问题，只有真实用过、碰壁了，才能被发现和反馈。某种意义上，人的作用不是写代码，而是充当 AI 与真实世界之间的那层感知。

现在，去玩一把

游戏已部署上线，手机和电脑均可畅玩。

游戏地址：

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

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

操作说明：

• 电脑端：
   点击按钮开始；游戏中按空格键跳跃
• 手机端：
   点击按钮开始；游戏中点击画面跳跃

完整开发记录

调戏AI的全过程全在下面了，包括我的指令和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. 添加大量 console.log 用于调试：

• 窗口加载事件
• Canvas 初始化
• 按钮检测与事件监听挂载
• 开始按钮点击事件
• 游戏循环执行

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. 路径解析：
    部署到子目录时，相对路径务必添加 ./ 前缀
2. 移动端触控：
    将 canvas 触控处理与按钮处理拆分，避免事件冲突
3. 缓存管理：
    开发调试阶段使用版本参数（?v=X）强制浏览器刷新
4. 调试思路：
    完善的 console.log 日志是定位客户端问题的核心手段
5. 触控属性：
    正确配置 CSS touch-action 属性，是移动端 Web 游戏的关键细节

使用的技术

• 后端：
   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 完整构建 Flappy Bird Web 应用的全过程。