用Claude Code一小时完成贪吃蛇开发：AI编程实战全记录

1. 挑战前的环境准备Claude Code 安装与基本配置1.1 Claude Code 是什么以及为什么选它来做这个挑战Claude Code 是 Anthropic 推出的一款命令行编程助手简单说就是在终端里跑起来的 AI 编程搭档。它不像普通聊天机器人那样只给你贴段代码而是可以直接读写你当前项目文件、执行命令、跑测试、改 bug全程用自然语言对话驱动。用“一小时内写贪吃蛇”当挑战题其实是我想验证一个很实际的问题在不写一行代码、只靠对话指挥 AI 的前提下一个熟悉业务但你不想碰细节的开发者到底能把一个完整小游戏做到什么程度。贪吃蛇这个选题很适合当试金石规则人尽皆知、逻辑不复杂、又涉及游戏循环、碰撞检测、键盘事件、页面渲染这些经典要素做出来的效果一眼就能看出靠不靠谱。这篇文章适合两类人看。一是刚接触 AI 编程助手、想找个具体项目上手的读者可以照着我的流程把环境搭起来看我用到的指令模式二是已经在用类似工具、但觉得“AI 写的代码只能糊弄 demo”的读者我想用这场 60 分钟实测告诉你只要把需求拆得足够清楚AI 产出的不只是 demo而是能直接打开玩的成品。1.2 安装步骤从零到能跑起来需要多久我的环境是 macOS终端用的 iTerm2Node.js 版本 18。安装 Claude Code 的常规路径是先确保 Node.js 环境正常然后用 npm 全局安装node -v npm -v npm install -g anthropic-ai/claude-code安装完成后需要确认装没装好。注意新版安装完默认的命令还是claude直接输入验证版本即可claude --version如果显示类似2.1.272这样的版本号说明 CLI 本体装好了。接下来首次运行需要在终端里执行一次登录或 API Key 配置流程。官方方式是执行claude后会进入引导按提示完成认证。我自己更习惯用环境变量的方式指定 API Key好处是后续切换服务地址也方便export ANTHROPIC_API_KEY你的key也可以把这句话写进 shell 的配置文件比如~/.zshrc或~/.bashrc再执行source ~/.zshrc生效。还有一个在很多群里被反复问到的点如果没有 Anthropic 官方渠道的订阅或 Key能不能跑起来实测是可以的前提是走兼容 Anthropic API 格式的第三方服务用环境变量指定接口地址即可。我的建议是不要卡在“没有官方 Key”这一步先随便用一个能连通的 API 源跑通整个流程再说。工具顺手以后换 Key 只是改一行环境变量的事。首次启动后Claude Code 会进入交互模式终端会显示欢迎语。我习惯先问它一句“你现在能读取当前目录下的文件吗”确认它具备文件操作能力。这一步很有必要因为后续所有“打开某文件改某函数”的指令都依赖这个基础权限。2. 动手前的思路设计一小时内开发贪吃蛇的边界与策略2.1 为什么选“Web 单文件”而不是 Godot 或 Python确定要写贪吃蛇后第一件要决定的事不是怎么让 AI 写而是用什么技术栈。我身边有朋友用 Godot 4 做也有用 Python 配 pygame 做的效果都不差但在一小时的极限挑战里我毫不犹豫选了“单文件 HTML CSS JavaScript”。原因有三。第一零依赖。一个.html文件双击就能在浏览器里跑不需要装编辑器、不需要配虚拟环境、不需要管包管理器。中间如果 AI 写出来的代码有 bug我开个浏览器按 F12 就能看报错排查路径最短。第二AI 对 Web 开发的训练数据最充分。Claude 之类的模型在 HTML/JS 代码上见过足够多的样本生成质量远比冷门框架稳定。第三验证成本低。改一行代码、刷新一下页面效果立竿见影这对需要快速反馈的极限开发太重要了。Godot 和 pygame 当然也行但安装引擎、创建工程、导入资源这一套流程在倒计时面前太奢侈了。这个选择背后其实是一个通用原则挑战时间越短越要把环境不确定性降到最低把 AI 的训练优势发挥到最大。技术栈选型不在于哪个更“高级”而在于哪个能最快出结果。2.2 先画游戏需求清单再让 AI 动手见过太多人用 AI 写项目上来就一句“帮我做个贪吃蛇”然后 AI 给了一版能跑的基础款用户玩两分钟发现自己想要的是另外一回事于是再提新需求AI 改来改去把代码改散了。这属于典型的“没有需求清单就开工”。我在让 Claude Code 动手之前先花三分钟写了一个需求清单分了三档核心功能必须有游戏能开始、蛇能动、吃掉食物后蛇变长、撞墙或撞到自己游戏结束、分数实时显示、支持重新开始。体验优化最好有方向键和 WASD 都支持随着分数增加蛇的移动速度逐渐提升食物不会生成在蛇身上。加分项有时间再做最高分记录、游戏暂停、深色主题的视觉效果。这个清单最大的价值不是给 AI 看的而是给我自己画清楚底线核心功能是必须守住的地板加分项是弹性空间。60 分钟的开发过程中一旦时间不够用我优先砍加分项再砍体验优化绝不碰核心功能。这条“功能优先级”意识比任何提示词技巧都重要。另外一个容易被忽略的需求是“不做清单”。我在挑战里明确告诉自己不搞关卡、不搞音效、不搞皮肤商店、不做移动端适配。不是这些功能不好而是它们在本轮挑战里不值得占用上下文。“不做清单”能有效防止 AI 在生成时自由发挥把代码结构弄复杂。3. 实战我用 Claude Code 一小时完成贪吃蛇的全过程3.1 第一句指令让骨架先跑起来环境就绪后我在一个空目录里启动了 Claude Code。第一条指令我没有啰嗦直接给了完整目标请在当前目录创建一个 snake.html 单文件贪吃蛇游戏要求使用原生 HTMLCSSJavaScript用 Canvas 渲染。功能包括方向键控制蛇的移动、蛇吃到食物后长度加一且分数加一、碰壁或撞到自己时游戏结束、页面提供开始按钮和分数显示。代码要一次写完保持结构清晰关键逻辑加注释。注意这条指令里包含了四个关键信息技术约束单文件、Canvas、功能清单四条、输出格式要求结构清晰、加注释、质量标准一次写完。AI 对这类明确指令的响应质量通常远高于“帮我写个贪吃蛇”这种开放式请求。Claude Code 很快就生成了一个完整文件。我直接执行open snake.html在浏览器里打开页面已经能跑起来蛇在画布上慢慢移动方向键可以控制方向吃到红色方块后蛇和分数都会增长撞墙会弹“游戏结束”。第一版整体可用但我立刻发现了几个明显不舒服的点蛇的初始速度太慢等食物等到犯困按了方向键之后蛇不能立刻响应总感觉有半拍延迟食物生成的位置偶尔会落在蛇身上。这些问题都不是“不能玩”的级别却决定了这个游戏能不能算“好玩”。我把这些问题打包成第二条指令。3.2 第一轮改版从能玩到顺手第二轮的指令我写得很具体游戏目前能跑了但手感不好。请做以下改进1. 加快蛇的初始移动速度同时随着分数升高每吃 5 个食物再提速一次2. 修复方向键响应延迟的问题确保按键立即改变方向3. 食物生成时不能出现在蛇身体占用的格子里4. 支持 WASD 作为方向键的备选。这里有一个非常典型的“方向键响应延迟”细节值得展开说。贪吃蛇的方向控制有一个经典 bug如果玩家在短时间内连续按两个方向键最朴素的做法是每次按键直接改蛇的移动方向这会导致“按上再按左”时蛇先向上、之后立刻左转看起来没问题。但如果在一次 tick 内先左后上蛇就可能撞向自己因为游戏逻辑没来得及处理。更糟糕的是某些实现里快速按两下方向键第二次按键会覆盖第一次贪吃蛇会出现明显的“吃指令但没执行”的延迟感。正确的解法是把“按键”和“游戏帧更新”解耦用一个方向队列暂存玩家按键每次游戏循环只从队列头部取一个方向。我当时是在提示词里把这个思路描述给 AI 的把最近几次按键缓存到一个数组里每次蛇移动时取最早未用的那个方向数组只保留最近两次按键。Claude Code 很快就改出了用数组当方向缓冲的实现。修完后手感立刻“跟手”了。这一轮改版还用掉了几个来回食物生成避让蛇身、分数每 5 分提速一次、WASD 支持。每条指令都不复杂但每一条都对应一个独立的可用性体验叠加起来才让游戏从“能玩”变成“顺手”。3.3 第二轮改版从顺手到好看功能没问题后我把注意力转到视觉上。灰底黑蛇的默认画面实在配不上“一小时挑战”的成果展示。第三轮指令把游戏界面改成深色主题风格。背景用深灰/黑色渐变蛇改成带圆角的渐变绿色方块食物改成暖色调的圆点分数和最高分用清晰的白色字体显示在画布上方。最高分用 localStorage 保存。请优化整体排版让页面居中显示并给游戏区域加边框阴影效果。Claude Code 在 UI 这类偏审美的需求上表现不错多半是因为训练数据里包含大量现代 Web 界面的代码片段。几分钟后刷新页面整个观感已经从“课堂作业”变成了“可以发朋友圈的水平”。这个阶段还有一个容易被忽略的细节我让 AI 把最高分刷新逻辑也一并处理了。localStorage 的操作本身就是两三行代码但如果没有明确要求AI 大概率不会主动加。需求清单里把它列为“加分项”正是因为它属于“做了明显加分、不做也不致命”的锦上添花型功能。在时间富余的情况下放开让 AI 做最后的效果很惊艳。3.4 最后一轮安全检查与代码审查游戏功能齐全、界面也满意了按理说挑战可以宣布成功。但我又做了一步让 Claude Code 审查自己的代码。我把它生成的文件重新读了一遍然后给出指令现在请仔细审查 snake.html 里 JavaScript 这部分找出潜在 bug 和边界情况。重点关注蛇在高速移动时方向键快速切换是否会导致自撞、食物生成算法在蛇占满画布时会不会死循环、游戏结束后是否还能按键重启、分数更新是否有竞态问题。这一步相当于程序员完成代码后自己做 code review。AI 审自己的代码这件事效果比我预想的好。它抓出了两个真实问题一个是食物生成算法在极端情况下确实存在死循环风险虽然 20x20 的网格里要发生得等蛇长得非常长另一个是游戏结束后空格键仍会触发暂停逻辑导致重启时状态混乱。我让 AI 顺手修掉这两个问题然后做了一次完整的端到端测试。到这一步时间刚好卡在第 58 分钟。我刷新页面从开始、吃到第一个食物、连按方向键、撞墙结束、刷新后最高分保留全部走了一遍没有异常。4. 一小时开发过程中的关键原理拆解4.1 贪吃蛇游戏的三块核心逻辑表面上看一个贪吃蛇游戏很直观但往里拆它其实包含三块必须处理好的核心逻辑AI 那一版代码能一次跑通恰恰是这三块逻辑处理得够干净。第一块是游戏循环。常见的实现方式有两种setInterval定时器和requestAnimationFrame递归。贪吃蛇这类“按格移动”的游戏用setInterval更符合直觉因为每一帧要做的事就是“把蛇头往当前方向移一格”固定间隔驱动一次就行。我当时让 AI 用setInterval配合一个moveInterval变量来存移动间隔吃够 5 个食物后把moveInterval乘以 0.8就会产生明显的加速感。这个方案比requestAnimationFrame简单也更容易被 AI 一次写对。第二块是碰撞检测。贪吃蛇的碰撞只有两种撞墙和撞自己。撞墙的判定在网格坐标模型下特别直观蛇头坐标超出画布边界就算当然也可以做穿墙模式但本次没做。撞自己则要看蛇头下一格会不会跟蛇身重叠需要注意一个细节如果蛇身移动是“头插尾删”那每次移动时蛇尾也在变判断时必须用移动后的蛇身坐标集合否则会出现“明明没撞上却说撞了”或者“实际撞上了却没判定”的问题。第三块是蛇身移动。很多人第一次写贪吃蛇会用“每个身体格子依次往下一个格子移动”的写法这种实现又慢又容易出 bug。更优雅的解法是维护一个坐标数组每次移动时在头部插入新坐标、删除尾部坐标吃到食物时不删尾部长度自然加一。这段逻辑 AI 一般能写得很好因为“头插尾删”几乎成了贪吃蛇代码的标准范式训练数据里到处都是。食物生成也很关键但原理简单。核心要求是随机坐标不能落在蛇身上常规做法是用do...while循环反复随机直到找到空隙如果蛇几乎占满整个画布加一个最大尝试次数避免死循环。这一点在我让 AI 做代码审查时被重点标出属于那种“平时没事、极端情况能卡死页面”的隐患。4.2 提示词里哪些信息能显著提升输出质量这次挑战最直接的收获是我总结出一套对 Claude Code 这类编程 Agent 特别有效的提示词模式。核心可以拆成四个部分角色不一定要给但技术栈必须给任务必须拆成一个一个可验收的小项约束条件越具体越好验收标准要写出来。“技术栈必须给”的意思是如果我不告诉它“用原生 HTMLCSSJS”它有可能给 React 版本、Vue 版本、甚至 Three.js 版本到时候没装脚手架就傻眼了。这不算 AI 笨而是需求本身歧义大。我一旦限定“单文件、原生、Canvas”它的输出空间就一下子收缩到了我需要的范围内。“任务的验收标准”也是一个关键提示词技巧。比如“食物不能生成在蛇身上”这句话AI 听到后会产生多种实现方式但最终验收标准是“在网格图里找不到食物与蛇身重叠的情况”。我在第二轮里明确说“请确保任何情况下食物方块和蛇身方块都不重叠”比只说“优化食物生成”要有效得多。还有一个有争议但实测有效的点是“让 AI 主动提问”。我在第一次生成前问过 Claude Code“如果需求有歧义请先问我不要自己假设。”结果它确实反问了一个问题蛇撞墙后是结束游戏还是从对面穿出来这一问帮我省掉了后续可能反复改动的坑。但注意这种“主动提问”的机制只适合首次生成阶段后面改 bug 的时候要反过来要求它“看到能直接修的问题不要问直接修”。灵活切换效率最高。4.3 工具能力边界它替你做了什么没替你做什么一个小时后游戏跑通我其实并没有“这工具真神啥都能写”的激动反而更清楚地看到了边界。Claude Code 替我做了的是“任务执行层”的工作我说方向键响应有延迟它知道要加方向队列我说速度要递增它能精准找到控制移动间隔的变量并调整我说 localStorage 存最高分它干净利落地写完了。这些本质上都是工程里的“搬砖”环节很常规但很耗时。它没替我做的恰恰是最重要的“产品定义层”的工作这个游戏要不要穿墙加速的幅度多大才算刺激但不失控深色主题的绿色必须偏哪种绿才好看游戏结束后要不要显示“再来一局”按钮这些问题没有任何一个 AI 能替我做决定因为答案取决于我想要的体验。如果我连这些都想不清楚让 AI 自己发挥它大概率给出一版“正确但平庸”的方案。所以那个被反复讨论的“AI 是否能替代程序员”的问题在这次挑战里答案非常明确它替代的是执行者替代不了定义者。只要你还负责“定义”你就永远不会被工具踢出局。5. 常见问题与避坑指南5.1 环境与连接问题速查表这一小时里除了写游戏本身我也遇到并听到了不少用户在安装和首次运行 Claude Code 时容易踩的坑。整理成表格方便对照排查。现象常见原因解决思路安装后执行claude提示 command not foundnpm 全局 bin 目录不在 PATH 中用npm root -g查看全局目录把 bin 路径加进 PATH或者直接用npx claude运行首次启动提示 unable to connect to anthropic services本机网络无法访问官方接口、DNS 解析异常、API Key 无效、本地存在冲突的代理设置先确认网络连通性再检查环境变量里的 key 是否正确最后尝试升级 CLI 或重启终端官方走不通时可以尝试兼容接口API Key 配置后依然鉴权失败key 前后有空格、环境变量未生效、shell 配置文件没刷新在终端里echo $ANTHROPIC_API_KEY检查输出确保没有多余字符配置文件修改后source ~/.zshrc或source ~/.bashrcClaude Code 提示没有权限读取文件命令行工具首次运行时有文件系统授权门槛按提示进行授权也可以直接在对话里执行/permissions查看和调整权限策略生成的代码中文乱码或编码异常文件保存格式不是 UTF-8在生成文件后确认编辑器编码为 UTF-8无 BOM 最佳旧版行为异常、无法连接 API客户端版本过旧npm update -g anthropic-ai/claude-code升级到最新版后重试有个很容易忽略的点改了 shell 配置文件以后很多新手忘了让配置生效直接打开一个新终端窗口发现问题还在。这个不属于 Claude Code 的坑但在使用任何命令行工具时都会遇到。5.2 提示词使用中的典型坑我在挑战过程中感受最深的几个提示词坑值得单独拿出来说。第一个坑是“需求含糊”。如果只告诉 AI“让蛇快点”它可能去调帧率可能减移动间隔也可能直接改了移动步长。三种改法效果完全不同。正确做法是给出量化描述每吃掉 5 个食物把移动间隔缩短为原来的 80%下限 80 毫秒。AI 一旦拿到数字改动就变得可预期。第二个坑是“中途切换需求却不保留历史约定”。有一次我为了省时间在让 AI 加 WASD 支持的同时又说“顺便把最高分加上”结果它把前面做的暂停逻辑弄乱了。问题不在于 AI 笨而在于我一次性塞了太多主题。正确做法是一个改动一轮对话改动完成后立刻验证确认没问题再进入下一个需求。第三个坑是“手动改代码后没有告诉 AI”。我在本地微调过几处 CSS 样式之后让 AI 改 JS 逻辑时它基于旧记忆做了修改把我手动改的样式覆盖了。从那之后我养成了一个习惯凡是我手动动过文件下一轮对话一定先跟 AI 说一句“我手动改了 XX 行现在文件内容以当前磁盘上的为准你重新读一遍”。这个习惯帮我避免了很多无谓的来回。5.3 极限开发时怎么保住“一小时”的底线这场挑战能在一小时内结束靠的是一次次“按下暂停键”的克制。我给自己定过三条时间盒规则。第一任何功能如果连续两轮对话还在改同一个问题就降级处理能用的保留不好用的砍掉。第二每完成一个需求立刻动手运行验证不攒着一起测。第三一旦发现 AI 的理解方向跑偏不尝试在对话里纠正三次以上果断开新会话重来。第三点看起来反直觉但实测里非常香旧会话带着跑偏的历史上下文纠正成本比新开一个会话大得多。另一个要说的是“备份意识”。AI 对代码做破坏性修改的时候我每次都在本地先cp snake.html snake_backup.html。这个习惯挽救过我一次——某次我让 AI 重构按键逻辑它把游戏结束检测给删了如果没有备份我又得花时间让它“回忆”之前的代码。有人会觉得用 git 就够了但极限开发的时候哪有空提交一条cp命令三秒钟解决战斗。最后一个小时开发完一个小游戏听起来很爽但真正的收获并不是“我让 AI 写了一小时代码”。而是这一小时让我体验到一个事实工具的响应速度和写码质量已经足够把“想法验证”的周期压缩到一顿饭的时间。以后你再冒出一个“如果做个 XX 会怎样”的念头不用犹豫开个终端建个文件让 Claude Code 陪你快速试一轮。成了是意外收获不成也是一次极轻量的试错。