1. 从「预制娃」到亲子 vibe coding我为什么选 Claude Code TaoToken刷到「预制娃」这个词的时候我正陪儿子在客厅地板上拼乐高。初二暑假自学完初三课程、整天刷中考真题、计划提前学高中内容——评论区一零后们晒进度晒得热火朝天我一时有点恍惚我们八零后的暑假明明是上午睡懒觉看《西游记》下午出门找同学打 FC晚上接着看电视作业几乎为零。我不是要评判谁对谁错只是觉得「兴趣」这件事被挤得太靠后了。我小学开始玩游戏为了看懂英文界面和过场自己抱着词典啃后来四六级轻松过再后来进了外企。兴趣才是最好的老师这句话在我身上是实打实验证过的。所以儿子暑假的英语单词预习我没打算下个现成 App 了事。某词斩、某利说这类工具我也用过玩法太「答题」了孩子坐不住。我决定自己手搓一个——用 Claude Code 做主力编码助手通过 TaoToken 统一 Key 和 API 通道接入模型技术栈就是最朴素的 HTML Node.js。目标很明确做一个射击类单词闯关小游戏让孩子在玩的过程中顺便理解「前端页面」和「后端接口」到底是怎么协作的。这篇文章我会把整套流程拆开TaoToken 怎么配、Claude Code 的 settings.json 和 config.toml 骨架长什么样、CC Switch 怎么切、本地怎么启动和验证、以及我踩过的坑。你照着做一个下午就能和孩子跑起来第一个版本。2. TaoToken 前置统一 Key 与 API 通道别让配置劝退先说清楚 TaoToken 在这里的角色。它是一个统一的模型 API 接入平台官网是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 入口是 https://taotoken.net/api 。你可以把它理解成一个「统一插座」Claude Code、各种 Agent 工具、自己写的 Node 脚本都通过同一个 Key 和同一个 Base URL 去调用模型不用每个工具单独配一套凭证。对亲子项目来说这一点特别重要。因为孩子参与的时候最怕的就是「配置」这一步卡住——他不懂什么是环境变量也不懂为什么这个工具要填这个字段那个工具要填那个字段。统一通道之后我只需要维护一份 KeyClaude Code 用它我后面写的 Node 后端也用它切换模型或者换工具的时候改一处就行。具体操作路径是这样的先打开官网注册并登录进入控制台 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite 在 API Keys 页面 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 生成一个 Key。这个 Key 就是后面所有配置里要填的东西格式通常是一串以特定前缀开头的字符串。生成之后先复制到本地一个安全的地方别直接贴在聊天窗口或者截图里。注意Key 只显示一次页面刷新后就看不到了。如果没存下来直接删掉重新生成一个不要试图找回。拿到 Key 之后Claude Code 这边有两种接入方式一种是走 settings.json 的环境变量配置一种是走 config.toml 的 provider 配置。我两种都试过下面分别给骨架。如果你只是想先跑通用 settings.json 就够了如果你后面要接多个模型或者做更细的路由config.toml 更合适。3. 可复制配置settings.json 与 config.toml 骨架3.1 settings.json 骨架Claude Code 读取的 settings.json 一般放在用户目录下的.claude文件夹里。Windows 是C:\Users\你的用户名\.claude\settings.jsonmacOS 和 Linux 是~/.claude/settings.json。如果文件夹不存在就自己建一个。{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: sk-你的TaoToken密钥, ANTHROPIC_MODEL: claude-sonnet-4-20250514, ANTHROPIC_SMALL_FAST_MODEL: claude-haiku-4-20250514 }, permissions: { allow: [ Read, Write, Edit, Bash(npm:*), Bash(node:*), Bash(git:*) ] } }几个字段解释一下。ANTHROPIC_BASE_URL指向 TaoToken 的 API 入口注意这里不带任何 UTM 参数就是干净的https://taotoken.net/api。ANTHROPIC_AUTH_TOKEN填你刚才生成的 Key。ANTHROPIC_MODEL是主模型负责写代码和规划ANTHROPIC_SMALL_FAST_MODEL是快速小模型负责一些轻量任务比如补全、格式化。permissions.allow里我放开了 npm、node、git 这几类命令因为做游戏项目要频繁跑npm start、node server.js、git commit每次弹权限确认太打断节奏。提示如果你不确定模型名称可以先只填 BASE_URL 和 AUTH_TOKEN模型字段留空Claude Code 会用默认值。跑通之后再回来指定具体模型。3.2 config.toml 骨架如果你用的是支持 config.toml 的客户端或者自己写的 Agent 框架配置长这样[provider.taotoken] name taotoken base_url https://taotoken.net/api api_key sk-你的TaoToken密钥 model claude-sonnet-4-20250514 small_model claude-haiku-4-20250514 max_tokens 8192 temperature 0.7 [agent] provider taotoken working_dir ./word-shooter auto_approve [read, write, edit, bash:npm, bash:node]这个骨架的好处是结构清晰provider 和 agent 分开。后面如果你想加第二个 provider比如本地跑个小模型做兜底直接再加一个[provider.local]段就行agent 那边改一行provider local就切过去了。3.3 CC Switch 切换步骤CC Switch 是一个用来在多个 Claude Code 配置之间快速切换的小工具。我为什么需要它因为我在公司用的是另一套 API 配置回家做亲子项目要用 TaoToken如果每次都手动改 settings.json很容易改错。操作步骤第一步安装 CC Switch。它通常是一个命令行工具装好之后会在用户目录下维护一个 profiles 列表。第二步把当前 TaoToken 配置保存成一个 profile。命令大概是ccswitch save taotoken-home它会把你现在的 settings.json 快照下来。第三步再保存一个公司配置的 profile比如ccswitch save company。第四步切换的时候直接ccswitch use taotoken-home它会自动把对应的 settings.json 写回去。切完可以ccswitch list确认当前激活的是哪个。注意切换之后最好重启一下 Claude Code 会话因为环境变量是在启动时读取的热切换不一定生效。4. 本地启动与验证从零跑通第一个请求4.1 项目初始化先建项目目录我给它起名word-shootermkdir word-shooter cd word-shooter npm init -y npm install express然后建三个核心文件server.js、public/index.html、public/game.js。目录结构长这样word-shooter/ ├── package.json ├── server.js └── public/ ├── index.html ├── game.js └── words.json4.2 server.js后端接口骨架const express require(express); const path require(path); const app express(); const PORT 3000; app.use(express.json()); app.use(express.static(path.join(__dirname, public))); const scores []; app.post(/api/score, (req, res) { const { name, score, difficulty } req.body; if (!name || typeof score ! number) { return res.status(400).json({ ok: false, msg: 参数不完整 }); } scores.push({ name, score, difficulty, time: Date.now() }); res.json({ ok: true, rank: scores.length }); }); app.get(/api/score, (req, res) { const top [...scores].sort((a, b) b.score - a.score).slice(0, 10); res.json({ ok: true, list: top }); }); app.listen(PORT, () { console.log(游戏服务已启动http://localhost:${PORT}); });这个后端只做两件事接收成绩写入、返回排行榜。孩子玩完之后前端fetch(/api/score)就能看到自己排第几。这就是让他理解「前端发请求、后端存数据」最直观的例子。4.3 index.html前端页面骨架!DOCTYPE html html langzh-CN head meta charsetUTF-8 title单词射击闯关/title style body { margin: 0; background: #0a0e1a; color: #e0f0ff; font-family: sans-serif; } #hud { display: flex; gap: 24px; padding: 12px 20px; font-size: 18px; } #game { display: block; width: 100vw; height: calc(100vh - 60px); } #start-screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(10,14,26,0.95); } button { padding: 10px 28px; font-size: 18px; cursor: pointer; } /style /head body div idhud span得分b idscore0/b/span span连击b idcombo0/b/span span掌握b idmastered0/b/span /div canvas idgame/canvas div idstart-screen h2单词射击闯关/h2 input idusername placeholder输入你的名字 / div button>const canvas document.getElementById(game); const ctx canvas.getContext(2d); let score 0, combo 0, mastered 0; function resize() { const dpr window.devicePixelRatio || 1; canvas.width window.innerWidth * dpr; canvas.height (window.innerHeight - 60) * dpr; ctx.scale(dpr, dpr); } window.addEventListener(resize, resize); resize(); const words [ { en: apple, zh: 苹果 }, { en: bridge, zh: 桥 }, { en: courage, zh: 勇气 }, { en: dragon, zh: 龙 }, ]; let current null; let enemies []; function spawn() { current words[Math.floor(Math.random() * words.length)]; enemies [ { x: 200, y: 150, text: current.en, correct: true }, { x: 500, y: 200, text: words[Math.floor(Math.random() * words.length)].en, correct: false }, { x: 350, y: 320, text: words[Math.floor(Math.random() * words.length)].en, correct: false }, ]; } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle #e0f0ff; ctx.font 28px sans-serif; ctx.fillText(请击落${current ? current.zh : }, 40, 60); enemies.forEach(e { ctx.beginPath(); ctx.arc(e.x, e.y, 40, 0, Math.PI * 2); ctx.fillStyle e.correct ? #1e3a5f : #3a1e2f; ctx.fill(); ctx.fillStyle #fff; ctx.font 16px sans-serif; ctx.fillText(e.text, e.x - 24, e.y 6); }); } canvas.addEventListener(click, ev { const rect canvas.getBoundingClientRect(); const mx ev.clientX - rect.left; const my ev.clientY - rect.top; enemies.forEach(e { const d Math.hypot(mx - e.x, my - e.y); if (d 40) { if (e.correct) { score 10; combo 1; mastered 1; document.getElementById(score).textContent score; document.getElementById(combo).textContent combo; document.getElementById(mastered).textContent mastered; spawn(); } else { combo 0; document.getElementById(combo).textContent combo; } } }); }); document.getElementById(start-btn).addEventListener(click, () { const name document.getElementById(username).value.trim(); if (!name) { alert(先输入名字); return; } document.getElementById(start-screen).style.display none; spawn(); loop(); }); function loop() { draw(); requestAnimationFrame(loop); }4.5 启动与验证npm start如果 package.json 里还没配 start 脚本先加上scripts: { start: node server.js }启动后终端会打印游戏服务已启动http://localhost:3000。浏览器打开这个地址输入名字点「初中」就能看到中文提示和三个英文单词圆圈。点对了加分点错了连击清零。验证后端接口是否通另开一个终端curl -X POST http://localhost:3000/api/score \ -H Content-Type: application/json \ -d {name:test,score:100,difficulty:easy}返回{ok:true,rank:1}就说明后端写入正常。再curl http://localhost:3000/api/score能看到排行榜列表。验证 TaoToken 通道是否通可以在 Claude Code 里直接问一句「帮我给 game.js 加一个倒计时功能」看它能不能正常返回代码。如果返回了说明 settings.json 里的 BASE_URL 和 Key 都生效了。5. 本篇常见错排查5.1 401 或 invalid api key最常见的原因是 Key 复制的时候带了空格或者把sk-前缀漏掉了。检查 settings.json 里ANTHROPIC_AUTH_TOKEN的值前后不能有空格。另外确认你用的是 TaoToken 控制台生成的 Key不是别的平台的。5.2 连接超时或 ECONNREFUSED先确认ANTHROPIC_BASE_URL写的是https://taotoken.net/api注意结尾没有多余的斜杠。如果本地网络环境有特殊设置先试试curl https://taotoken.net/api能不能通。另外 Claude Code 的配置改完之后要重启会话环境变量不会热加载。5.3 npm start 报端口占用3000 端口被别的项目占了。改 server.js 里的PORT常量比如改成 3001然后重新npm start。或者用lsof -i :3000macOS/Linux或netstat -ano | findstr :3000Windows找到占用进程处理掉。5.4 前端点击没反应打开浏览器开发者工具看 Console。最常见的是game.js加载顺序问题——如果game.js在words.json之前加载words数组还是空的。确保words.json先 fetch 完成再动态插入game.js。另一个可能是 canvas 的getBoundingClientRect在高分屏下坐标偏移检查resize()里 DPR 缩放有没有正确应用。5.5 CC Switch 切换后配置没生效CC Switch 写回 settings.json 之后Claude Code 需要重启。另外确认你切换的 profile 里 Key 是完整的有时候快照保存的时候 Key 被截断了。用ccswitch list看一下当前激活的 profile 名称对不对。6. 接下来怎么走让孩子自己提需求第一个版本跑通之后我建议你不要急着加功能先让孩子玩十分钟然后问他「你想改哪里」。我儿子当时说「单词太少了」「想要爆炸效果」「想要排行榜显示在游戏里」。这三个需求正好对应三个学习点词库扩展JSON 数据结构、粒子效果Canvas 绘制、排行榜接口前后端协作。你可以带着他一起在 Claude Code 里输入这些需求让模型改代码然后npm start看效果。改错了就git checkout回滚改对了就git commit存一版。这个过程本身就是最好的编程启蒙——不是教他语法而是让他看到「想法 → 代码 → 运行 → 反馈」的完整闭环。如果你后面想把这个项目做成长期维护的 Agent 工作流比如让 Claude Code 自动跑测试、自动提交、自动部署可以了解一下 Coding Plan https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 它更适合这种持续迭代的场景。如果只是想先验证模型对话效果可以直接用模型对话 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite 页面试几句。接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite Claude Code 相关的配置说明在 https://taotoken.net/claude-code-anthropic?utm_sourcetaotoken_aicg_blog_endutm_contentclaudecodeutm_campaignrewrite 。最后说一个我自己的体会这个游戏现在还很简陋画面就是几个圆圈音效也没有但我儿子每天真的会打开玩几局。他记住的不是「苹果是 apple」这种死记硬背而是「我点对了那个圆圈分数涨了排行榜上有我的名字」。这种即时反馈带来的动力比任何预习作业都管用。而我在旁边做的只是把配置配好把通道打通剩下的交给他和 Claude Code 去折腾。
用Claude Code + TaoToken 搭一个亲子vibe coding小游戏：边玩边学HTML与Node.js
1. 从「预制娃」到亲子 vibe coding我为什么选 Claude Code TaoToken刷到「预制娃」这个词的时候我正陪儿子在客厅地板上拼乐高。初二暑假自学完初三课程、整天刷中考真题、计划提前学高中内容——评论区一零后们晒进度晒得热火朝天我一时有点恍惚我们八零后的暑假明明是上午睡懒觉看《西游记》下午出门找同学打 FC晚上接着看电视作业几乎为零。我不是要评判谁对谁错只是觉得「兴趣」这件事被挤得太靠后了。我小学开始玩游戏为了看懂英文界面和过场自己抱着词典啃后来四六级轻松过再后来进了外企。兴趣才是最好的老师这句话在我身上是实打实验证过的。所以儿子暑假的英语单词预习我没打算下个现成 App 了事。某词斩、某利说这类工具我也用过玩法太「答题」了孩子坐不住。我决定自己手搓一个——用 Claude Code 做主力编码助手通过 TaoToken 统一 Key 和 API 通道接入模型技术栈就是最朴素的 HTML Node.js。目标很明确做一个射击类单词闯关小游戏让孩子在玩的过程中顺便理解「前端页面」和「后端接口」到底是怎么协作的。这篇文章我会把整套流程拆开TaoToken 怎么配、Claude Code 的 settings.json 和 config.toml 骨架长什么样、CC Switch 怎么切、本地怎么启动和验证、以及我踩过的坑。你照着做一个下午就能和孩子跑起来第一个版本。2. TaoToken 前置统一 Key 与 API 通道别让配置劝退先说清楚 TaoToken 在这里的角色。它是一个统一的模型 API 接入平台官网是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 入口是 https://taotoken.net/api 。你可以把它理解成一个「统一插座」Claude Code、各种 Agent 工具、自己写的 Node 脚本都通过同一个 Key 和同一个 Base URL 去调用模型不用每个工具单独配一套凭证。对亲子项目来说这一点特别重要。因为孩子参与的时候最怕的就是「配置」这一步卡住——他不懂什么是环境变量也不懂为什么这个工具要填这个字段那个工具要填那个字段。统一通道之后我只需要维护一份 KeyClaude Code 用它我后面写的 Node 后端也用它切换模型或者换工具的时候改一处就行。具体操作路径是这样的先打开官网注册并登录进入控制台 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite 在 API Keys 页面 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 生成一个 Key。这个 Key 就是后面所有配置里要填的东西格式通常是一串以特定前缀开头的字符串。生成之后先复制到本地一个安全的地方别直接贴在聊天窗口或者截图里。注意Key 只显示一次页面刷新后就看不到了。如果没存下来直接删掉重新生成一个不要试图找回。拿到 Key 之后Claude Code 这边有两种接入方式一种是走 settings.json 的环境变量配置一种是走 config.toml 的 provider 配置。我两种都试过下面分别给骨架。如果你只是想先跑通用 settings.json 就够了如果你后面要接多个模型或者做更细的路由config.toml 更合适。3. 可复制配置settings.json 与 config.toml 骨架3.1 settings.json 骨架Claude Code 读取的 settings.json 一般放在用户目录下的.claude文件夹里。Windows 是C:\Users\你的用户名\.claude\settings.jsonmacOS 和 Linux 是~/.claude/settings.json。如果文件夹不存在就自己建一个。{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: sk-你的TaoToken密钥, ANTHROPIC_MODEL: claude-sonnet-4-20250514, ANTHROPIC_SMALL_FAST_MODEL: claude-haiku-4-20250514 }, permissions: { allow: [ Read, Write, Edit, Bash(npm:*), Bash(node:*), Bash(git:*) ] } }几个字段解释一下。ANTHROPIC_BASE_URL指向 TaoToken 的 API 入口注意这里不带任何 UTM 参数就是干净的https://taotoken.net/api。ANTHROPIC_AUTH_TOKEN填你刚才生成的 Key。ANTHROPIC_MODEL是主模型负责写代码和规划ANTHROPIC_SMALL_FAST_MODEL是快速小模型负责一些轻量任务比如补全、格式化。permissions.allow里我放开了 npm、node、git 这几类命令因为做游戏项目要频繁跑npm start、node server.js、git commit每次弹权限确认太打断节奏。提示如果你不确定模型名称可以先只填 BASE_URL 和 AUTH_TOKEN模型字段留空Claude Code 会用默认值。跑通之后再回来指定具体模型。3.2 config.toml 骨架如果你用的是支持 config.toml 的客户端或者自己写的 Agent 框架配置长这样[provider.taotoken] name taotoken base_url https://taotoken.net/api api_key sk-你的TaoToken密钥 model claude-sonnet-4-20250514 small_model claude-haiku-4-20250514 max_tokens 8192 temperature 0.7 [agent] provider taotoken working_dir ./word-shooter auto_approve [read, write, edit, bash:npm, bash:node]这个骨架的好处是结构清晰provider 和 agent 分开。后面如果你想加第二个 provider比如本地跑个小模型做兜底直接再加一个[provider.local]段就行agent 那边改一行provider local就切过去了。3.3 CC Switch 切换步骤CC Switch 是一个用来在多个 Claude Code 配置之间快速切换的小工具。我为什么需要它因为我在公司用的是另一套 API 配置回家做亲子项目要用 TaoToken如果每次都手动改 settings.json很容易改错。操作步骤第一步安装 CC Switch。它通常是一个命令行工具装好之后会在用户目录下维护一个 profiles 列表。第二步把当前 TaoToken 配置保存成一个 profile。命令大概是ccswitch save taotoken-home它会把你现在的 settings.json 快照下来。第三步再保存一个公司配置的 profile比如ccswitch save company。第四步切换的时候直接ccswitch use taotoken-home它会自动把对应的 settings.json 写回去。切完可以ccswitch list确认当前激活的是哪个。注意切换之后最好重启一下 Claude Code 会话因为环境变量是在启动时读取的热切换不一定生效。4. 本地启动与验证从零跑通第一个请求4.1 项目初始化先建项目目录我给它起名word-shootermkdir word-shooter cd word-shooter npm init -y npm install express然后建三个核心文件server.js、public/index.html、public/game.js。目录结构长这样word-shooter/ ├── package.json ├── server.js └── public/ ├── index.html ├── game.js └── words.json4.2 server.js后端接口骨架const express require(express); const path require(path); const app express(); const PORT 3000; app.use(express.json()); app.use(express.static(path.join(__dirname, public))); const scores []; app.post(/api/score, (req, res) { const { name, score, difficulty } req.body; if (!name || typeof score ! number) { return res.status(400).json({ ok: false, msg: 参数不完整 }); } scores.push({ name, score, difficulty, time: Date.now() }); res.json({ ok: true, rank: scores.length }); }); app.get(/api/score, (req, res) { const top [...scores].sort((a, b) b.score - a.score).slice(0, 10); res.json({ ok: true, list: top }); }); app.listen(PORT, () { console.log(游戏服务已启动http://localhost:${PORT}); });这个后端只做两件事接收成绩写入、返回排行榜。孩子玩完之后前端fetch(/api/score)就能看到自己排第几。这就是让他理解「前端发请求、后端存数据」最直观的例子。4.3 index.html前端页面骨架!DOCTYPE html html langzh-CN head meta charsetUTF-8 title单词射击闯关/title style body { margin: 0; background: #0a0e1a; color: #e0f0ff; font-family: sans-serif; } #hud { display: flex; gap: 24px; padding: 12px 20px; font-size: 18px; } #game { display: block; width: 100vw; height: calc(100vh - 60px); } #start-screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(10,14,26,0.95); } button { padding: 10px 28px; font-size: 18px; cursor: pointer; } /style /head body div idhud span得分b idscore0/b/span span连击b idcombo0/b/span span掌握b idmastered0/b/span /div canvas idgame/canvas div idstart-screen h2单词射击闯关/h2 input idusername placeholder输入你的名字 / div button>const canvas document.getElementById(game); const ctx canvas.getContext(2d); let score 0, combo 0, mastered 0; function resize() { const dpr window.devicePixelRatio || 1; canvas.width window.innerWidth * dpr; canvas.height (window.innerHeight - 60) * dpr; ctx.scale(dpr, dpr); } window.addEventListener(resize, resize); resize(); const words [ { en: apple, zh: 苹果 }, { en: bridge, zh: 桥 }, { en: courage, zh: 勇气 }, { en: dragon, zh: 龙 }, ]; let current null; let enemies []; function spawn() { current words[Math.floor(Math.random() * words.length)]; enemies [ { x: 200, y: 150, text: current.en, correct: true }, { x: 500, y: 200, text: words[Math.floor(Math.random() * words.length)].en, correct: false }, { x: 350, y: 320, text: words[Math.floor(Math.random() * words.length)].en, correct: false }, ]; } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle #e0f0ff; ctx.font 28px sans-serif; ctx.fillText(请击落${current ? current.zh : }, 40, 60); enemies.forEach(e { ctx.beginPath(); ctx.arc(e.x, e.y, 40, 0, Math.PI * 2); ctx.fillStyle e.correct ? #1e3a5f : #3a1e2f; ctx.fill(); ctx.fillStyle #fff; ctx.font 16px sans-serif; ctx.fillText(e.text, e.x - 24, e.y 6); }); } canvas.addEventListener(click, ev { const rect canvas.getBoundingClientRect(); const mx ev.clientX - rect.left; const my ev.clientY - rect.top; enemies.forEach(e { const d Math.hypot(mx - e.x, my - e.y); if (d 40) { if (e.correct) { score 10; combo 1; mastered 1; document.getElementById(score).textContent score; document.getElementById(combo).textContent combo; document.getElementById(mastered).textContent mastered; spawn(); } else { combo 0; document.getElementById(combo).textContent combo; } } }); }); document.getElementById(start-btn).addEventListener(click, () { const name document.getElementById(username).value.trim(); if (!name) { alert(先输入名字); return; } document.getElementById(start-screen).style.display none; spawn(); loop(); }); function loop() { draw(); requestAnimationFrame(loop); }4.5 启动与验证npm start如果 package.json 里还没配 start 脚本先加上scripts: { start: node server.js }启动后终端会打印游戏服务已启动http://localhost:3000。浏览器打开这个地址输入名字点「初中」就能看到中文提示和三个英文单词圆圈。点对了加分点错了连击清零。验证后端接口是否通另开一个终端curl -X POST http://localhost:3000/api/score \ -H Content-Type: application/json \ -d {name:test,score:100,difficulty:easy}返回{ok:true,rank:1}就说明后端写入正常。再curl http://localhost:3000/api/score能看到排行榜列表。验证 TaoToken 通道是否通可以在 Claude Code 里直接问一句「帮我给 game.js 加一个倒计时功能」看它能不能正常返回代码。如果返回了说明 settings.json 里的 BASE_URL 和 Key 都生效了。5. 本篇常见错排查5.1 401 或 invalid api key最常见的原因是 Key 复制的时候带了空格或者把sk-前缀漏掉了。检查 settings.json 里ANTHROPIC_AUTH_TOKEN的值前后不能有空格。另外确认你用的是 TaoToken 控制台生成的 Key不是别的平台的。5.2 连接超时或 ECONNREFUSED先确认ANTHROPIC_BASE_URL写的是https://taotoken.net/api注意结尾没有多余的斜杠。如果本地网络环境有特殊设置先试试curl https://taotoken.net/api能不能通。另外 Claude Code 的配置改完之后要重启会话环境变量不会热加载。5.3 npm start 报端口占用3000 端口被别的项目占了。改 server.js 里的PORT常量比如改成 3001然后重新npm start。或者用lsof -i :3000macOS/Linux或netstat -ano | findstr :3000Windows找到占用进程处理掉。5.4 前端点击没反应打开浏览器开发者工具看 Console。最常见的是game.js加载顺序问题——如果game.js在words.json之前加载words数组还是空的。确保words.json先 fetch 完成再动态插入game.js。另一个可能是 canvas 的getBoundingClientRect在高分屏下坐标偏移检查resize()里 DPR 缩放有没有正确应用。5.5 CC Switch 切换后配置没生效CC Switch 写回 settings.json 之后Claude Code 需要重启。另外确认你切换的 profile 里 Key 是完整的有时候快照保存的时候 Key 被截断了。用ccswitch list看一下当前激活的 profile 名称对不对。6. 接下来怎么走让孩子自己提需求第一个版本跑通之后我建议你不要急着加功能先让孩子玩十分钟然后问他「你想改哪里」。我儿子当时说「单词太少了」「想要爆炸效果」「想要排行榜显示在游戏里」。这三个需求正好对应三个学习点词库扩展JSON 数据结构、粒子效果Canvas 绘制、排行榜接口前后端协作。你可以带着他一起在 Claude Code 里输入这些需求让模型改代码然后npm start看效果。改错了就git checkout回滚改对了就git commit存一版。这个过程本身就是最好的编程启蒙——不是教他语法而是让他看到「想法 → 代码 → 运行 → 反馈」的完整闭环。如果你后面想把这个项目做成长期维护的 Agent 工作流比如让 Claude Code 自动跑测试、自动提交、自动部署可以了解一下 Coding Plan https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 它更适合这种持续迭代的场景。如果只是想先验证模型对话效果可以直接用模型对话 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite 页面试几句。接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite Claude Code 相关的配置说明在 https://taotoken.net/claude-code-anthropic?utm_sourcetaotoken_aicg_blog_endutm_contentclaudecodeutm_campaignrewrite 。最后说一个我自己的体会这个游戏现在还很简陋画面就是几个圆圈音效也没有但我儿子每天真的会打开玩几局。他记住的不是「苹果是 apple」这种死记硬背而是「我点对了那个圆圈分数涨了排行榜上有我的名字」。这种即时反馈带来的动力比任何预习作业都管用。而我在旁边做的只是把配置配好把通道打通剩下的交给他和 Claude Code 去折腾。
