★ FEATURED ARTICLE 1. 从零做一个打地鼠为什么我选 Claude Code deepseek打地鼠这个游戏看着简单其实是个特别适合练手的项目4x4 网格、随机出洞、点击计分、30 秒倒计时逻辑闭环完整代码量又不大一个index.html就能跑起来。但真正动手写的时候你会发现要处理的状态不少——定时器管理、地鼠生命周期、重复点击防抖、游戏结束后的清理稍不注意就出一堆 bug。我这次的做法是用 Claude Code 作为终端里的 AI 代理把 deepseek 模型接进去当大脑让它帮我从需求文档一路生成到可运行的 HTML 单文件。Claude Code 的好处是它直接跑在终端里能读写你当前目录的文件、执行命令、理解项目上下文不需要你复制粘贴代码来回倒腾。而 deepseek 的接口现在国内可以直接调用配置好环境变量就能用省去了很多麻烦。这篇文章会带你走完整个流程配置 Claude Code 调用 deepseek、写需求让 AI 生成 PRD、基于 PRD 生成游戏代码、本地打开验证可玩性最后把常见的坑一个个排掉。适合有基础 JavaScript 认知、想体验 AI 辅助开发完整流程的读者。你不需要提前准备什么复杂环境Node.js 加一个 API Key 就够了。2. 前置准备把 Claude Code 接到 deepseek 上2.1 安装 Node.js 和 Claude CodeClaude Code 依赖 Node.js 运行建议版本 20 以上。装完之后全局安装 Claude Codenpm install -g anthropic-ai/claude-code如果你在国内npm 拉包慢的话可以先切一下镜像源npm config set registry https://registry.npmmirror.com装完后验证一下claude --version能打印出版本号就说明安装成功了。2.2 配置 deepseek 的 API 环境变量Claude Code 默认走 Anthropic 的接口但我们可以通过环境变量把请求转发到兼容 Anthropic 协议的 deepseek 接口上。Windows 下用setxmacOS/Linux 下用export写进 shell 配置文件。Windows CMDsetx ANTHROPIC_BASE_URL https://api.deepseek.com/anthropic setx ANTHROPIC_AUTH_TOKEN 你的 DeepSeek API Key setx ANTHROPIC_MODEL deepseek-v4-pro[1m] setx ANTHROPIC_DEFAULT_OPUS_MODEL deepseek-v4-pro[1m] setx ANTHROPIC_DEFAULT_SONNET_MODEL deepseek-v4-pro[1m] setx ANTHROPIC_DEFAULT_HAIKU_MODEL deepseek-v4-flashmacOS/Linuxexport ANTHROPIC_BASE_URLhttps://api.deepseek.com/anthropic export ANTHROPIC_AUTH_TOKEN你的 DeepSeek API Key export ANTHROPIC_MODELdeepseek-v4-pro[1m] export ANTHROPIC_DEFAULT_OPUS_MODELdeepseek-v4-pro[1m] export ANTHROPIC_DEFAULT_SONNET_MODELdeepseek-v4-pro[1m] export ANTHROPIC_DEFAULT_HAIKU_MODELdeepseek-v4-flash这里几个变量的作用要分清楚ANTHROPIC_BASE_URL决定请求发到哪ANTHROPIC_AUTH_TOKEN是你的身份凭证ANTHROPIC_MODEL是默认使用的模型后面三个DEFAULT_*是 Claude Code 在不同任务档位下会调用的模型映射。设置完之后记得重开一个终端窗口让环境变量生效。注意API Key 属于敏感信息不要直接提交到 Git 仓库里。如果你要长期使用建议用系统级环境变量或者密钥管理工具来存。2.3 如果你想要更省心的接入方式上面这套配置是直连 deepseek 官方接口。如果你希望统一管理多个模型的 Key、随时切换不同供应商也可以走 TaoToken 这类聚合接入的方式。它的 API 地址是https://taotoken.net/api在 Claude Code 里同样通过ANTHROPIC_BASE_URL指向它然后到控制台生成一个 API Key 填进ANTHROPIC_AUTH_TOKEN就行。具体操作路径是先到 API Keys 页面 创建密钥再参考 接入文档 里的 Claude Code 配置说明。两种方式选一种即可不用重复配。3. 可复制配置初始化项目并生成 PRD3.1 创建项目目录先建一个空目录用 VS Code 打开然后在终端里启动 Claude Codemkdir Claude-test1 cd Claude-test1 claude进入 Claude Code 的交互界面后输入/init命令它会自动生成一个CLAUDE.md文件。这个文件是 Claude Code 的核心配置文件会被自动读取并加入上下文里面应该写清楚项目架构、常用命令、代码规范、测试指南这些信息。刚开始它只是个空框架我们后面用游戏项目来填充它。3.2 写需求让 AI 生成 PRD接下来不要急着让它写代码先让它把需求整理成 PRD 文档。在 Claude Code 里输入下面这段需求我需要生成一个打地鼠的游戏大致需求如下 你的任务是使用 HTML、CSS 和 JavaScript 创建一个简单的网页版打地鼠游戏。 规则 1. 游戏界面是一个 4x4 的网格。 2. 每隔 1-2 秒会有一只地鼠随机出现在一个格子里。 3. 玩家点击地鼠即可得分分数需要实时显示。 4. 游戏包含一个开始/重新开始按钮和一个 30 秒的倒计时。 请将实现上述功能的所有代码打包到一个 index.html 文件中。 在编写代码时要确保结构清晰逻辑正确代码具有良好的可读性。 请先帮我生成 PRD 文档并结合 CLAUDE.md先不要写代码先把需求整理出来。Claude Code 会结合CLAUDE.md的上下文生成一份结构化的PRD.md。这份文档会包含项目概述、功能需求、游戏核心逻辑、边界条件、技术约束、验收标准等部分。其中边界条件这块特别值得关注比如倒计时结束后点击不再得分同一时刻最多只有一只地鼠游戏中再次点击开始应重新开始——这些细节如果不在 PRD 里写清楚后面生成的代码很容易漏掉。3.3 基于 PRD 生成游戏代码PRD 确认没问题后继续在 Claude Code 里输入PRD.md 请基于上面 PRD.md 文档生成代码以测试驱动为开发流程完成上面的代码。这里用PRD.md把文档引用进上下文Claude Code 会读取里面的需求然后生成完整的index.html。生成过程中它会自己规划结构HTML 骨架、CSS 样式、JavaScript 逻辑分块写。等它写完你打开目录就能看到index.html文件了。4. 验证请求打开浏览器看游戏能不能玩4.1 直接打开文件最简单的方式就是双击index.html或者右键选择用浏览器打开。因为整个游戏是单文件、无外部依赖的所以不需要起服务器file://协议下就能跑。打开后你应该看到一个 4x4 的网格居中显示格子有边框和间距顶部有分数显示和 30 秒倒计时一个开始/重新开始按钮4.2 逐项验证功能点一下开始按钮然后按 PRD 里的验收标准逐条检查验收项预期表现实际结果网格显示4x4 共 16 个格子通过倒计时从 30 开始递减通过地鼠出现每隔 1-2 秒随机出现在某格通过点击得分点中地鼠分数 1通过点击空格分数不变通过游戏结束倒计时归零后地鼠不再出现通过重新开始点击按钮重置分数和倒计时通过如果哪一项没通过别急着改代码先把现象记下来回到 Claude Code 里描述问题让它修。4.3 用 Claude Code 做一次代码走查游戏能跑之后我建议再让 Claude Code 帮你过一遍代码。在终端里输入请检查 index.html 的代码重点看这几个地方 1. 定时器有没有在游戏结束时正确清理避免内存泄漏 2. 地鼠消失后点击事件有没有正确解绑 3. 重复点击同一只地鼠会不会重复得分 4. 倒计时归零的瞬间正在显示的地鼠有没有被清除这一步很关键。AI 生成的代码功能上通常没问题但边界处理容易有疏漏。让它自己走查一遍往往能发现一些你没想到的角落。5. 本篇常见错排查5.1 Claude Code 启动报错或连不上模型最常见的原因是环境变量没生效。setx设置完之后必须重开终端当前窗口是不会刷新的。另外检查一下ANTHROPIC_AUTH_TOKEN有没有多余的空格或引号Key 本身是否还有效。如果用的是聚合接入方式确认ANTHROPIC_BASE_URL指向的是https://taotoken.net/api而不是别的地址。5.2 生成的代码里地鼠不出现先看浏览器控制台有没有报错。常见的是setInterval或setTimeout的延迟参数写成了固定值导致地鼠出现节奏不对。还有一种情况是 CSS 里地鼠的显示类名和 JS 里切换的类名不一致视觉上看起来没出现其实元素已经渲染了只是被隐藏了。让 Claude Code 检查一下类名匹配就能定位。5.3 点击地鼠不得分大概率是事件绑定绑在了网格容器上而不是具体格子上或者点击后没有及时清除地鼠状态导致重复点击被拦截。检查一下点击处理函数里有没有判断当前格子是否有地鼠以及得分后有没有立即把地鼠状态置空。5.4 倒计时结束后游戏没停这是定时器清理的问题。游戏结束时需要同时清除出地鼠的定时器和倒计时的定时器如果只清了一个另一个还在跑就会出现时间到了地鼠还在冒的情况。在 Claude Code 里搜一下clearInterval的调用位置确认两个定时器都被清理了。5.5 重新开始后分数没重置检查开始/重新开始按钮的处理逻辑是不是只重置了倒计时没重置分数或者重置了变量但没更新 DOM 显示。这类问题让 AI 自己走查一遍通常就能发现。6. 继续往下走把流程固化成你的开发习惯这套流程跑通之后你会发现它不只适用于打地鼠。任何一个小型前端项目都可以按写需求 → 生成 PRD → 基于 PRD 生成代码 → 浏览器验证 → AI 走查这个循环来做。Claude Code 负责在终端里读写文件、执行命令deepseek 负责理解和生成你负责把关需求和验收。如果你后面想长期用这套组合做编码和 Agent 任务可以了解一下 Coding Plan它在长会话和复杂任务上的额度更划算。想先试试模型对话效果的话可以直接到 模型对话 里发几条消息感受一下。接入过程中遇到配置问题接入文档 里有各客户端的详细步骤API Keys 页面则是你生成和管理密钥的地方。最后留一个实用建议每次让 AI 生成代码后别急着往下走先花两分钟在浏览器里把 PRD 的验收标准逐条点一遍。AI 写代码很快但边界条件的坑往往藏在你没点到的那个角落里。
阅读完成 · 觉得有帮助？
