ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Claude Code实战:用GLM4.7生成植物大战僵尸游戏

Claude Code实战:用GLM4.7生成植物大战僵尸游戏 1. 从零生成植物大战僵尸Claude Code 搭配 GLM4.7 的完整实战路径植物大战僵尸这个游戏很多人小时候都玩过。它的核心机制其实不复杂一块网格草坪、阳光作为资源、植物负责攻击或防御、僵尸按波次从右侧推进。正因为规则清晰、边界明确它特别适合拿来验证一件事——AI 编程助手到底能不能从零把一个可运行的小游戏写出来。我这次用的是 Claude Code 作为操作终端底层模型接的是 GLM4.7。Claude Code 本身是一个命令行里的编码代理能读文件、写文件、跑命令、根据报错自动修正GLM4.7 负责理解需求并生成代码逻辑。两者配合下来从空目录到游戏能跑起来大概花了不到一小时中间还迭代了几轮界面和音效。这篇文章面向的是想用 AI 辅助做小项目、但不确定怎么把模型接进 Claude Code 的人。我会把项目初始化、配置片段、核心玩法循环、资源占位方案、运行验证和常见报错都写清楚。你跟着做应该能复现出一个能启动、能放植物、能出僵尸波次的版本。需要说明的是最终成品的美术和音效是占位级别的但逻辑骨架是完整的后续替换素材就能变成更完整的游戏。核心检索词先摆出来Claude Code 接入 GLM4.7 生成植物大战僵尸游戏重点在于配置可复制、玩法循环可验证、报错可排查。下面按步骤展开。2. TaoToken 前置准备Claude Code 接入 GLM4.7 的配置与 API Key 获取在写游戏之前得先把 Claude Code 和 GLM4.7 接起来。Claude Code 默认走的是 Anthropic 的接口协议所以我们需要一个兼容该协议的接入点把 Base URL 指向 TaoToken 的 API 地址再用 GLM4.7 的 Model ID 去请求。第一步是拿 API Key。打开 TaoToken 的 API Keys 管理页面https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentclaude_code_glm47_pvz登录后创建一个新的 Key复制出来。这个 Key 后面会写进 Claude Code 的配置文件里。注意不要把它提交到 Git 仓库建议放在环境变量或本地配置文件中。第二步是确认接入文档里的 Base URL 和模型名。TaoToken 的 API 根地址是https://taotoken.net/apiClaude Code 需要的 Base URL 通常要带上版本路径具体以接入文档为准。文档入口在这里https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentclaude_code_glm47_pvzGLM4.7 的 Model ID 一般形如glm-4.7或文档中标注的完整名称填配置时以文档为准。如果你不确定当前可用的模型列表可以到模型对话页面先发一条测试消息确认https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentclaude_code_glm47_pvz第三步是理解 Claude Code 的配置位置。Claude Code 读取的是用户目录下的 settings 文件常见路径是~/.claude/settings.json。如果你用的是项目级配置也可以放在项目根目录的.claude/settings.json。两种方式都行我习惯用用户级配置这样所有项目都能复用。这里要提醒一点Claude Code 的配置里涉及三个关键字段——Base URL、API Key、Model ID。这三个必须和 TaoToken 文档里给的一致否则会出现 401 或模型不存在的报错。很多人卡在第一步就是因为 Base URL 少写了路径段或者 Model ID 用了别的平台的命名。配置完成后可以用一个最简单的命令验证连通性比如让 Claude Code 读一下当前目录。如果它能正常返回说明接入成功。具体验证命令在下一节给出。另外如果你打算长期用这套组合做编码或 Agent 任务可以了解一下 Coding Plan它更适合高频调用场景https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentclaude_code_glm47_pvz前置准备就这些。接下来进入可复制的配置片段。3. 可复制配置settings.json 与项目初始化命令这一节给出可以直接抄的配置。先看 Claude Code 的 settings 文件。路径是~/.claude/settings.json内容如下{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: 你的_TaoToken_API_Key, ANTHROPIC_MODEL: glm-4.7 } }如果你用的是项目级配置把同样的内容放到项目根目录的.claude/settings.json即可。注意ANTHROPIC_MODEL的值要以 TaoToken 文档里 GLM4.7 的实际 Model ID 为准我这里写的是常见形式。有些版本的 Claude Code 还支持settings.local.json做本地覆盖适合不想把 Key 写进主配置的情况。你可以根据自己的版本选择。配置写完后创建项目目录并初始化mkdir pvz-glm47 cd pvz-glm47 npm init -y npm install --save-dev vite这里用 Vite 作为开发服务器因为它启动快、配置少适合小游戏项目。如果你更习惯直接用浏览器打开 HTML也可以不装 Vite但用 Vite 能获得热更新迭代体验更好。接着创建入口文件结构mkdir src touch index.html src/main.js src/game.jsindex.html里放一个 canvas 容器!DOCTYPE html html langzh-CN head meta charsetUTF-8 / title植物大战僵尸 - GLM4.7 生成版/title /head body canvas idgame width900 height600/canvas script typemodule src/src/main.js/script /body /html然后在package.json里加一个启动脚本{ scripts: { dev: vite, build: vite build } }到这里项目骨架就搭好了。接下来让 Claude Code 生成核心玩法。你可以直接在项目目录下运行claude然后输入需求比如在 src/game.js 里实现一个植物大战僵尸的核心循环5 行 9 列网格、阳光资源、向日葵产阳光、豌豆射手发射子弹、僵尸从右侧按波次推进、子弹命中僵尸扣血、僵尸到达左侧则游戏结束。用 canvas 绘制资源先用色块占位。Claude Code 会读取现有文件、生成代码、必要时创建新文件。GLM4.7 负责把这段自然语言需求转成可运行的 JavaScript。生成后你可以让它跑npm run dev并检查报错。这里有个实用技巧把需求拆成小步先让它生成网格和阳光系统确认能跑再加植物和僵尸。一次性给太多需求模型容易在细节上出错排查起来更费劲。配置和初始化完成后进入验证环节。4. 运行验证确认游戏可启动、植物放置与僵尸波次正常代码生成后运行npm run dev终端会输出一个本地地址通常是http://localhost:5173。用浏览器打开应该能看到一块草坪网格。如果页面空白先看浏览器控制台有没有报错再看终端里 Vite 有没有编译错误。验证分几步走。第一步确认阳光系统。初始阳光一般是 50向日葵每隔几秒产一次阳光点击阳光图标或自动收集后数值增加。你可以在game.js里搜sun相关变量确认初始值和增长逻辑。第二步确认植物放置。点击植物卡片选中再点击网格格子应该能在对应位置生成植物。如果点击没反应检查 canvas 的坐标换算是否正确常见问题是没减去 canvas 的偏移量。第三步确认僵尸波次。僵尸应该从右侧出现按一定间隔推进。你可以临时把生成间隔调小方便观察。僵尸走到左侧边界时游戏状态应变为结束。第四步确认子弹命中。豌豆射手的子弹应该从植物位置向右飞碰到僵尸后僵尸血量减少血量归零则僵尸消失。如果这几步都正常说明核心玩法循环是通的。我实测下来GLM4.7 生成的逻辑骨架基本可用主要问题集中在坐标计算和状态管理上改几处就能跑顺。验证时可以用一个简单的检查清单检查项预期表现常见问题页面加载显示网格草坪canvas 尺寸或路径错误阳光增长数值随时间增加定时器未启动植物放置点击格子生成植物坐标换算错误僵尸推进从右向左移动速度或方向写反子弹命中僵尸掉血消失碰撞检测范围不对游戏结束僵尸到达左侧触发状态判断缺失运行验证通过后就可以进入排错环节。即使上面都顺实际用的时候还是可能碰到报错下一节集中讲。5. 常见报错排查401、local proxy failed、reading choices、OAuth 对照处理用 Claude Code 接 GLM4.7 的过程中报错主要集中在接入层和生成代码层。我按实际遇到的顺序列一下。401 Unauthorized这是最常见的。原因通常是 API Key 写错、过期或者 Base URL 和 Key 不匹配。检查settings.json里的ANTHROPIC_API_KEY是否和 TaoToken 后台创建的一致注意不要有多余空格。如果 Key 没问题确认ANTHROPIC_BASE_URL是不是https://taotoken.net/api少写或多写路径都会导致鉴权失败。local proxy failed这个报错通常出现在 Claude Code 尝试走本地代理但配置不完整时。检查环境变量里有没有残留的代理设置比如HTTP_PROXY或HTTPS_PROXY。如果有先清掉再试。另外确认settings.json的 JSON 格式合法少一个逗号也会导致配置解析失败。reading choices 相关报错这类报错一般出现在模型返回结构不符合预期时比如接口返回的字段和 Claude Code 期望的不一致。先确认 Model ID 是否正确再确认 TaoToken 文档里该模型是否支持当前调用方式。如果换了模型名后出现换回文档标注的名称。OAuth 相关报错Claude Code 某些版本会尝试 OAuth 流程如果你用的是 API Key 方式需要在配置里明确走 Key 鉴权。检查是否有ANTHROPIC_AUTH_TOKEN之类的字段冲突必要时只保留ANTHROPIC_API_KEY。除了接入层生成代码本身也会报错。比如Cannot read properties of undefined通常是某个对象还没初始化就被访问。让 Claude Code 自己读报错并修复通常一两轮就能解决。如果它改了几次还不对把报错原文和涉及的文件贴给它缩小范围。还有一个坑是模型名和实际能力不匹配。如果你发现生成的代码质量明显下降确认当前请求的确实是 GLM4.7而不是回退到了别的模型。可以在模型对话页面单独测一下同一个 prompt对比输出。排错时建议开两个窗口一个跑npm run dev看编译输出一个看浏览器控制台。两边信息合起来定位会快很多。如果接入层反复报错直接对照接入文档重新配一遍https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentclaude_code_glm47_pvzKey 的问题则到 API Keys 页面重新生成https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentclaude_code_glm47_pvz6. 继续迭代与资源替换把占位版本变成完整游戏核心逻辑跑通后剩下的就是迭代。我当时的做法是让 Claude Code 分几轮改第一轮优化界面把色块换成简单的图形第二轮加音效用 Web Audio API 生成短促的提示音第三轮修小 bug比如僵尸重叠、阳光收集延迟。资源替换是最后一步。植物和僵尸的图像可以用 PNG 序列帧放在public/assets目录然后在绘制时用drawImage替换原来的fillRect。声音同理用Audio对象加载。Claude Code 能根据你的描述自动改绘制逻辑你只需要告诉它素材路径和尺寸。如果你想让游戏更完整可以继续加更多植物类型、僵尸种类、关卡进度、暂停菜单。每加一个功能都建议先跑一遍验证确认没破坏原有逻辑。这套流程下来一个可玩的植物大战僵尸小游戏就成型了。虽然美术是占位的但玩法循环是真实的。对于想验证 AI 编程能力的人来说这是一个成本低、反馈快的项目。如果你打算长期用 Claude Code 做类似的小项目或 Agent 任务Coding Plan 会比按次调用更合适https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentclaude_code_glm47_pvz最后给一个实用建议把每次迭代的 prompt 和结果记下来形成自己的模板。下次做类似项目时直接复用配置和需求描述效率会高很多。游戏代码本身不复杂真正省时间的是这套「配置—生成—验证—排错」的流程。
返回列表