A vs B：手写‘贪吃蛇’网页 vs Cursor+Claude生成版——我赌赢了19小时，还顺手接了编程启蒙课助教单
上周，我和朋友打了个赌：谁先做出一个带暂停/加速/分数记录的贪吃蛇网页，谁请对方喝喜茶。
他选手写：VS Code + JavaScript + Canvas API → 周五晚8点开工
我选AI：Cursor + Claude 3.5 + 一条Prompt → 周五晚8:07上线
结果？他周日晚上还在调“蛇头转向延迟”，而我的页面已嵌入本地少儿编程机构官网，成为体验课入口。
这不是贬低手写——而是告诉你：当‘完成度’和‘交付速度’决定副业收入时，AI不是替代者，是你的杠杆。
下面，我们从5个维度硬核对比：
---
⏱️ 维度1：开发耗时（实测）
| 项目 | 手写版（朋友） | AI生成版（我） |
|------|----------------|----------------|
| 基础功能（移动/碰撞/计分） | 4h12min | 2min（Prompt运行+保存） |
| 暂停/继续按钮 | +2h05min（事件绑定bug） | +17s（追加Prompt：“加一个⏸️按钮，点击切换运行/暂停状态”） |
| 本地存储最高分 | +1h33min（localStorage调试） | +8s（追加：“自动保存最高分到localStorage，刷新不丢”） |
| 响应式适配手机 | +3h28min（viewport+rem重写） | 0（Claude默认输出
| 总耗时 | 11h18min | 2min48s |
✅ 我赢了19小时（含他返工重写）
---
📜 维度2：代码量与可读性
关键差异：
setInterval控制帧率，易卡顿；AI版用requestAnimationFrame+时间戳计算，丝滑度提升40%sessionStorage，关页即丢；AI版默认localStorage，且加了try/catch防报错---
🛠️ 维度3：可维护性（重点！）
朋友的代码：
// 注释写着“这里逻辑有问题，但先提交”
if (snakeX === foodX && snakeY === foodY) { /* … */ }
我的代码（Claude生成）：
/**
* 检测蛇头是否与食物重叠
* 使用曼哈顿距离容差（避免像素级误差）
* @returns {boolean}
*/
function isEating() {
const dx = Math.abs(snake[0].x - food.x);
const dy = Math.abs(snake[0].y - food.y);
return dx < GRID_SIZE && dy < GRID_SIZE;
}
👉 结论：AI生成的代码，天然带工程思维——因为它学的是百万份优质开源代码。
---
🚀 维度4：扩展性（接单关键）
机构提出3个新增需求，我们分别实测：
| 需求 | 手写版改动 | AI版操作 |
|------|------------|-----------|
| 加微信分享按钮 | 重构整个UI层，+3h | 在Prompt末尾加：“在底部加‘📣 分享到微信’按钮，点击弹出当前分数海报（用canvas生成）” → 重生成，58秒 |
| 换主题色（蓝→橙） | 全局搜索替换12处#3498db | Prompt追加：“主色调改为#FF6B35，包括蛇身、食物、按钮” → 重生成，21秒 |
| 接入班级排行榜 | 需后端API，放弃 | 改用「腾讯云开发」轻量版，Claude生成完整云函数+前端调用代码（+1 prompt） |
✅ 最终，我以499元/次的价格，承接了该机构3个班级的定制需求
---
💡 维度5：教育价值（反常识真相）
很多人担心：“用AI做游戏，孩子学不到编程？”
错。真正教会孩子的，从来不是for循环，而是：
> 我现在带的体验课，第一节课就是：让孩子改Prompt里的数字（如GRID_SIZE=20→15），看蛇变胖还是变瘦。 他们叫这节课“魔法调参课”。
---
📥 附：我的贪吃蛇Prompt全文（可直接复用）
请生成一个单文件HTML贪吃蛇游戏：
画布占满视口，网格大小15px，蛇身绿色，食物红色
WASD/方向键控制，空格键暂停/继续
实时显示分数，最高分存localStorage
游戏结束时显示‘Game Over’+最终分数+‘再玩一次’按钮
添加加速模式：长按Shift键，蛇速提升50%，松开恢复
所有资源内联，适配手机触控，禁止外部CDN
代码结构清晰，中文注释，变量名语义化
---
最后提醒：别把AI当黑箱。每次生成后，花2分钟读注释——你会惊讶于Claude对requestAnimationFrame原理的阐释，比很多教程更透。