这是一个真实的人机协作故事：9岁的白玉如小朋友（白想的女儿）与 OpenClaw AI 助手一起，用不到2小时的时间，从零开始开发并上线了一个完整的贪吃蛇游戏。本文记录了这次有趣的人机协作开发全过程。

项目概览

项目代号: 白玉如贪吃蛇
开发日期: 2026-03-20
开发时长: 约 2 小时（20:40 - 22:50）
核心团队:

• 👧 白玉如（9岁）- 产品经理、创意总监、首席测试官
• 🤖 OpenClaw - 技术顾问、代码实现者、部署工程师

技术栈: HTML5 + CSS3 + JavaScript + Canvas
部署平台: GitHub Pages
在线试玩: https://baixiaoustc.github.io/snake/

一、项目起源：一个爸爸与女儿的创意火花

1.1 初始需求

时间: 20:40
触发点: 白玉如的爸爸（白想）在微信上收到了女儿发来的两张照片

图片内容:

• 图片1: 白玉如发送消息「好的」（时间：昨天 17:47）
• 图片2: 白玉如分享了一张她刚拍的照片并说「今天刚拍的」（时间：昨天 17:42）

爸爸的念头: 「我想用女儿的照片做点什么特别的送给她」

用户指令: 保存图片，基于这些图片创建网页

💡 有趣的事实: 这个项目最初只是一个爸爸想给女儿做个小礼物，没想到最后变成了一个完整的游戏项目！

1.2 第一步执行

操作:

1. 创建目录: ~/Downloads/baiyuru/
2. 保存两张图片到该目录
3. 根据用户要求，删除56KB的小图，保留151KB的照片作为背景

当前文件状态:

~/Downloads/baiyuru/
├── e6ca4381-1ac4-4b76-a92e-31f5b9f4b126.jpg (151KB, 背景图)
└── index.html (待创建)

二、网页开发阶段

2.1 创建基础网页 (20:43)

需求: 使用背景图片，显示文字”白玉如你好”

实现:

• HTML5 基础结构
• CSS 背景图片设置
• 文字居中显示，添加半透明遮罩
• 响应式设计

代码特点:

body {
    background: url('e6ca4381-1ac4-4b76-a92e-31f5b9f4b126.jpg') no-repeat center center;
    background-size: cover;
}

2.2 添加贪吃蛇游戏 (20:45)

需求: 在网页中添加可玩的贪吃蛇游戏

核心功能实现:

游戏循环代码:

function gameLoop() {
    update();  // 更新游戏状态
    draw();    // 绘制游戏画面
}
setInterval(gameLoop, 100);  // 每100毫秒执行一次

三、奇妙的协作：9岁产品经理 vs AI 程序员

3.1 人机协作模式

这次开发最有趣的部分，是人类小朋友与AI助手之间的协作模式。

白玉如（9岁产品经理）的职责：

• ✅ 提出创意和需求：「我想要一个用我照片做背景的贪吃蛇游戏」
• ✅ 产品测试：每次更新后都要玩几遍，发现各种问题
• ✅ 提出改进意见：「我觉得速度太快了」「能不能用不同的水果？」
• ✅ 最终验收：「这个版本我可以接受！」

OpenClaw（AI 程序员）的职责：

• ✅ 技术实现：把所有想法变成可运行的代码
• ✅ 问题诊断：当出现bug时，分析原因并修复
• ✅ 技术建议：提出更好的实现方案
• ✅ 文档记录：把整个过程记录下来

3.2 有趣的对话片段

场景1：需求讨论

白玉如：「我想要一个贪吃蛇游戏！」
OpenClaw：「好的！你有什么特别的要求吗？比如颜色、大小？」
白玉如：「要用我的照片做背景！」
OpenClaw：「没问题，我们可以把你发的照片设置为游戏背景。」

场景2：测试反馈

白玉如：「我玩了，但是蛇跑得太快了，我跟不上！」
OpenClaw：「明白，我们可以添加速度调节功能。按1是慢速，2是中速，3是快速，这样你可以自己选择。」
白玉如：「好的，我要试试！」

场景3：移动端适配

白玉如：「我在手机上打不开…」
OpenClaw：「因为手机上没有方向键。我来添加触摸按钮，你可以在屏幕上点击上下左右来控制。」
白玉如：「那我可以躺在床上玩了！」

3.3 键盘控制问题 (20:53 - 21:45)

问题症状:

• 方向键控制游戏时，页面会滚动
• 空格键不启动游戏
• 按键无响应或响应延迟

诊断过程:

根本原因:

• 文件在复制过程中被截断或损坏
• GitHub 版本 9535 字节 vs 本地版本 19411 字节
• 多次修改导致代码混乱

最终解决方案:

• 放弃修复复杂的双人模式
• 回退到单人版本
• 使用简单可靠的键盘控制代码

修复后的键盘控制代码:

document.onkeydown = function(e) {
    var code = e.keyCode;
    
    // 阻止方向键和空格键的默认行为
    if((code >= 37 && code <= 40) || code === 32) {
        if(e.preventDefault) e.preventDefault();
        return false;
    }
    
    // 空格键 (32) - 开始/暂停
    if(code === 32) {
        if(!isGameRunning) startGame();
        else pauseGame();
        return false;
    }
    
    // 方向键控制
    if(code === 38 && dy === 0) { dx = 0; dy = -1; }  // 上
    else if(code === 40 && dy === 0) { dx = 0; dy = 1; }  // 下
    else if(code === 37 && dx === 0) { dx = -1; dy = 0; }  // 左
    else if(code === 39 && dx === 0) { dx = 1; dy = 0; }  // 右
    
    return false;
};

四、GitHub Pages 部署

4.1 部署准备 (21:45)

文件清单:

• snake.html - 游戏主页面 (9535 字节，修复后版本)
• e6ca4381-1ac4-4b76-a92e-31f5b9f4b126.jpg - 背景图片 (151KB)

目标路径:

~/Python/github.com/baixiaoustc/baixiaoustc.github.io/
├── snake.html
├── e6ca4381-1ac4-4b76-a92e-31f5b9f4b126.jpg
└── ...

4.2 部署过程

遇到的问题:

Git 操作记录:

# 第一次提交 - 游戏页面
git add snake.html
git commit -m "Add snake game"
git push origin master

# 第二次提交 - 背景图片
git add e6ca4381-1ac4-4b76-a92e-31f5b9f4b126.jpg
git commit -m "Add snake game background image"
git push origin master

# 修复提交 - 重新上传完整版本
git add snake.html
git commit -m "Fix snake game - restore correct version"
git push origin master

4.3 部署验证

访问地址: https://baixiaoustc.github.io/snake/

验证清单:

• ✅ 页面正常加载
• ✅ 背景图片正确显示
• ✅ 游戏画布渲染正常
• ✅ 开始按钮可点击
• ✅ 空格键开始游戏
• ✅ 方向键控制蛇移动
• ✅ 水果食物正确显示
• ✅ 分数统计正常
• ✅ 游戏结束判定正确

五、项目成果

5.1 功能清单

5.2 访问信息

游戏链接: https://baixiaoustc.github.io/snake/

操作说明:

• 空格键：开始/暂停游戏
• ↑ ↓ ← →：控制蛇的移动方向
• 吃掉水果得分，撞墙或撞到自己游戏结束

5.3 技术亮点

1. 纯前端实现: 无需后端服务器，直接运行在浏览器中
2. Canvas 绘图: 高性能游戏画面渲染
3. 响应式设计: 适配不同屏幕尺寸
4. GitHub Pages 部署: 零成本静态网站托管
5. Emoji 创意: 使用水果 emoji 作为食物，增添趣味性

六、经验教训

6.1 成功经验

1. 快速原型开发: 从需求到可玩游戏仅用 2 小时
2. 迭代优化: 先实现核心功能，再逐步完善
3. 版本控制: 使用 Git 管理代码，方便回溯
4. 文档记录: 及时记录开发过程和问题解决方案

6.2 改进空间

1. 代码质量: 初期代码结构较乱，后期需要重构
2. 测试覆盖: 缺乏自动化测试，主要依靠手动验证
3. 错误处理: 边界情况处理不够完善
4. 性能优化: 未进行性能分析和优化

6.3 最佳实践

1. 先备份再修改: 避免修改错误后无法恢复
2. 小步提交: 每次提交一个完整的功能点
3. 及时验证: 每次修改后立即测试
4. 记录问题: 详细记录遇到的问题和解决方案

七、后续计划

7.1 短期优化（1周内）

• 重构代码，优化结构
• 添加音效和背景音乐
• 实现本地最高分记录
• 优化移动端触摸控制

7.2 中期功能（1个月内）

• 添加关卡系统
• 实现双人模式（本地对战）
• 添加道具系统（加速、减速、穿墙等）
• 实现排行榜功能

7.3 长期愿景（3个月内）

• 开发在线对战模式
• 实现用户账号系统
• 添加皮肤系统（自定义蛇的外观）
• 开发关卡编辑器

八、结语：当9岁小朋友遇上AI助手

这个项目的特别之处，不仅在于技术的实现，更在于这是一次真实的人机协作。

8.1 项目的真正主角

在这个项目中：

• 👧 9岁的白玉如是产品经理、创意总监、首席测试官
• 🤖 OpenClaw是技术顾问、代码实现者、部署工程师

这不是一个AI独立完成的 demo，也不是一个传统的编程教学案例，而是一个真实的需求 → 设计 → 开发 → 测试 → 上线的完整协作过程。

8.2 什么是真正的”AI协作”

传统的编程教育是：老师教学生写代码。
这次的项目是：小朋友提需求，AI助手负责实现，小朋友负责验收。

这就像现实中的产品经理和程序员的关系：

• 产品经理不需要会写代码，但需要知道用户想要什么
• 程序员需要理解需求，然后实现它

AI不是替代了人类，而是让人类可以专注于更有创造力的部分。

8.3 给读者的启示

如果你也是一个想要学习编程的小朋友：

• ✅ 你不需要先学一大堆语法才能开始
• ✅ 你可以直接说出你的想法，让AI帮你实现
• ✅ 在协作中学习，比独自啃书本更有效

如果你是一位家长：

• ✅ 你的孩子可能比你想象的更有创造力
• ✅ AI可以成为孩子的学习伙伴，而不是替代品
• ✅ 重要的不是”会不会写代码”，而是”能不能把想法变成现实”

8.4 感谢

感谢白玉如小朋友的创意和耐心测试，感谢OpenClaw的技术支持，感谢每一位读到这里的读者。

希望这个项目能给你带来一些启发：

在AI时代，最重要的能力不是”我会什么”，而是”我能想象什么”。

项目资源

• 🎮 在线试玩: https://baixiaoustc.github.io/snake/
• 💻 源代码: GitHub 仓库
• 📝 开发文档: 本文即为完整开发记录

文档信息

• 初始编写: 2026-03-20 22:50
• 最后更新: 2026-03-22
• 编写人: OpenClaw & 白玉如（9岁）
• 版本: v2.0
• 项目链接: https://baixiaoustc.github.io/snake/