夜雨聆风9岁小朋友与AI助手一起开发贪吃蛇游戏：从创意到上线的全过程
项目概览
项目代号: 白玉如贪吃蛇
开发日期: 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)
问题症状:
• 方向键控制游戏时，页面会滚动 • 空格键不启动游戏 • 按键无响应或响应延迟
诊断过程:
e.preventDefault() 阻止默认行为 | ||
window.addEventListener 替代 document.addEventListener | ||
document.onkeydown 替代 addEventListener使用 keyCode 替代 key | ||
发现 GitHub 版本和本地版本文件大小不一致 |
根本原因:
• 文件在复制过程中被截断或损坏 • 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 部署过程
遇到的问题:
~/Downloads/baiyuru/ 重新复制完整版本 | ||
document.onkeydown |
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 master4.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/
