1. 这究竟是个什么项目1.1 一个三十年前的老游戏为什么值得重制Rescue Raiders 这个名字玩过早期 Armor Alley 的玩家应该不会陌生。它本质上是一个“护送 阵地攻防”的横向卷轴游戏你驾驶一架直升机从左边的自家基地出发护送一队油罐车和步兵车往地图右侧的敌方基地推进。路上要过桥、要清障敌人的基地也不是吃素的会源源不断造出吉普车、防空炮和直升机来拦截。你既要管天上又要管地上还要惦记飞机的油量——油不够了就得降落在油罐车旁边补给。这套短小但完整的玩法循环放到今天的独立游戏里依然能打。我决定重制它第一是因为代码量可控。整个核心玩法压缩出来其实就是一张 Canvas、一辆直升机、一辆车队、几个敌人基地区块不需要什么重型引擎。第二是因为它的“现代重置”思路很清晰画面可以重画操作可以改顺手但资源管理、防御节奏、敌方 AI 压迫感这些内核不能丢。这个项目要解决的不是“画一个复古像素游戏”这么简单而是怎么用现代前端技术把老的玩法模型重新落地到浏览器里做到打开网页就能玩键盘鼠标都能操作。选 Claude Code 来当主力开发工具很多人第一反应是“让 AI 帮我写代码”。实际上我的用法不太一样我会先让 Claude Code 和我一起讨论架构再把大需求拆成一个个明确的编码任务由它去改文件、跑预览、修报错。这个项目的体量正好——既有 AI 能代劳的重复逻辑实体生成、碰撞检测、状态管理又有需要人来定调的“游戏手感”部分。所以这篇文章既是游戏重制的实操记录也是 Claude Code 做中型前端项目的复盘。1.2 为什么不是手写而是用 Claude Code纯手写不是不行但 Rescue Raiders 这种游戏有一大堆“低成本高重复”的代码判碰撞要逐帧算两两矩形相交敌人巡逻状态要写状态机爆炸动画要对帧序列做计时调度。这些逻辑本身不高级但写起来琐碎而且最容易出 bug。让 Claude Code 来写我能把精力集中在“这个版本的手感应该偏快还是偏沉”这种决策上。Claude Code 和其他代码补全工具最大的不同是它跑在终端和编辑器里能完整地读写项目文件。我说“把敌人基地改成每分钟生产 3 辆吉普车并在血量低于 50% 时升级为装甲车”它会真的打开对应文件、找到生成逻辑、改完数值并告诉我测试点。它甚至会根据报错信息反查自己之前的改动形成闭环。这个在调试阶段非常宝贵。当然也要泼一盆冷水AI 写出来的代码风格一般偏“面面俱到”很容易把简单逻辑写复杂。这个项目里我严格执行“先定数据结构、再写逻辑、最后渲染”的顺序让 Claude 每一步都基于现有代码增量修改而不是每开一个对话就让重新生成整套。后面第 4 章我会把这个工作流完整拆开讲。1.3 这个项目和这套流程适合谁如果你是非前端开发但想快速做出一个网页游戏或者你正在用 Claude Code 写工具类项目但没试过游戏领域这篇记录都值得看完。我会把安装配置、模型接入、游戏架构、常见报错全串起来。后半部分涉及的代码方案是通用前端方案换任何一款 Canvas 游戏都能套用。一句话总结这个项目的交付形态一个纯 HTML/CSS/JavaScript 的浏览器游戏没有构建链、不依赖服务器双击index.html就能玩。所有人拿来就能改。2. 先把 Claude Code 装到能跑起来2.1 环境要求与三种安装方式在开始写游戏前得先把开发工具链弄通。Claude Code 本身是一个命令行工具官方推荐用 npm 安装所以 Node.js 是硬前提。建议装 Node 18 以上比较省事Git 倒不是必须但如果你打算让 Claude Code 在项目里识别版本变更、做回滚最好也装上。安装命令很简单npm install -g anthropic-ai/claude-code装完验证一下claude --version如果这个命令能输出版本号说明安装成功。平时在项目目录里直接输入claude它会以交互模式启动第一次会引导你登录授权。登录成功后你在终端里的提问和它的代码修改都会通过官方 API 做认证。除了 npm官方还有一个一行脚本的方式。这种方式本质是下载官方构建产物放到用户目录好处是不依赖 npm 全局目录适合 npm 权限被卡住的环境。具体脚本在 Claude Code 官方文档里能找到我不会在这里展开因为不同系统对应的下载地址会变化。项目组内部还有一种用法是把 Claude Code 集成到 CI 里用claude -p 描述任务这种非交互模式跑批量任务后面做游戏自动测试会很有用。2.2 Windows 上最常踩的坑命令无法识别很多人在 Windows 里执行claude会看到这句claude : 无法将“claude”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。这句话的潜台词是npm 确实把包装上了但它把命令放到一个目录而你的终端 PATH 里没包含这个目录。查一下 npm 的全局目录在哪npm prefix -g正常情况下会输出类似C:\Users\你的用户名\AppData\Roaming\npm。确认这个目录存在后把它加入系统环境变量 PATH重开终端再试。如果npm prefix -g输出的是一个看起来非预期的目录比如在某个奇怪盘符下那说明你机器的 npm 配置被改过这时要检查npm config get prefix把它改回默认目录再重装。我在重制项目第一天就遇到这个报错原因更隐蔽系统装了两套 Node一套是 nvm 管理的另一套是安装包自带的npm 全局目录指向了那个已不存在的旧路径。排查方向就是看npm prefix -g的实际输出而不是凭感觉找 node 安装目录。顺手排查完claude才真正跑起来。2.3 VS Code 集成和桌面端的连带问题游戏开发过程中我不可能一直蹲在终端里写代码因为要反复试跑和看画面。所以把 Claude Code 接进 VS Code 是刚需。官方扩展的名称就叫 Claude Code在 VS Code 的扩展市场搜索后安装重启窗口就能在侧边栏看到对话面板。它会复用你之前命令行登录过的账号不用二次配置。这里要提醒一个新手容易被吓到的错误提示Claudes workspace requires the Virtual Machine Platform on Windows. Enable ...这是 Claude Code 在 Windows 上调用某些能力时需要 WSL2 的虚拟化平台组件。如果你在项目中用到了 WSL 环境或者扩展尝试探测本地终端环境就可能触发这个提示。解决办法不是重装软件而是打开“启用或关闭 Windows 功能”勾选“虚拟机平台”和“适用于 Linux 的 Windows 子系统”或者用管理员 PowerShell 跑dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart跑完重启电脑提示一般就消失了。如果你完全用不到 WSL 也没关系这个功能开着不影响日常工作。2.4 升级、卸载、保持环境干净Claude Code 更新频率不低旧版本可能在 API 协议上落后导致部分功能异常。升级就是重装一遍npm install -g anthropic-ai/claude-codelatest卸载则是对应地npm uninstall -g anthropic-ai/claude-code有些情况你会发现命令行里claude已经没有了但 AI 插件还在 VS Code 里保留旧状态所以升级或卸载后最好重启一次 VS Code。这个项目进行到第三周时我遇到过一次“对话正常但代码修改不生效”的问题后来发现是旧版 Claude Code 对多文件编辑的协议有 bug升级后立刻恢复。这类环境问题优先考虑升级别急着改配置。3. 模型接入从 Anthropic 官方到本地化替代3.1 默认配置下你其实不用做任何事如果你能正常登录且所在网络环境支持 Anthropic 服务Claude Code 开箱即用默认会走官方模型和官方 API 网关。这种情况下你需要关心的只有两个变量使用哪个模型型号以及是否开启长上下文。比较常见的模型有claude-sonnet-4-5、claude-opus-4-1之类不同时期命名会有变化以官方列表为准。项目初期没必要上最强模型用均衡型号跑日常迭代就够了。长上下文是个好东西比如要让 Claude Code 记住整个游戏代码结构可以设置ANTHROPIC_CONTEXT_LIMIT或者在对话里让它“通读一遍 src 目录再开始改”。上下文窗口越大模型对跨文件的修改越稳但也越耗额度所以我一般只在重构前主动启用。3.2 用 DeepSeek 作为替代模型的具体配置DeepSeek 在开发者社区里热度很高关键在于它提供了 Anthropic 兼容的接口Claude Code 很容易把请求转发过去。这个项目里我也实际切换过目的不是省钱那么简单而是想对比不同模型在“读代码改多文件”场景下的表现。配置方法不复杂。在 macOS 或 Linux 上用 export 写入环境变量export ANTHROPIC_BASE_URLhttps://api.deepseek.com/anthropic export ANTHROPIC_AUTH_TOKEN你的DeepSeek密钥 export ANTHROPIC_MODELdeepseek-chat export ANTHROPIC_SMALL_FAST_MODELdeepseek-chatWindows PowerShell 对应写法$env:ANTHROPIC_BASE_URLhttps://api.deepseek.com/anthropic $env:ANTHROPIC_AUTH_TOKEN你的DeepSeek密钥 $env:ANTHROPIC_MODELdeepseek-chat设置好后再启动claude它就会把请求发往 DeepSeek 的 Anthropic 兼容端点而不是官方网关。ANTHROPIC_SMALL_FAST_MODEL是给后台轻任务比如标题生成、简单文本总结用的显式指定可以避免不必要的额度消耗。注意切换到第三方模型后不要期待所有行为都和官方 Claude 完全一致。Claude Code 的 Agent 能力依赖模型对工具调用的理解不同模型对“修改文件、跑命令、读路径”这类动作的支持力度不同。我实际测下来DeepSeek 接进 Claude Code 做结构化的小步修改没问题但那种“你读一下整个项目、重新设计架构再动手改”的复杂任务效果会打折。所以我的用法是架构讨论用官方模型批量写碰撞逻辑、生成地图数据这类机械任务切到 DeepSeek。3.3 400 配置错误的根源base_url 缺失如果用了第三方路由工具比如社区里常见的 CC Switch 或自己写的配置切换脚本很可能会遇到这么一条报错api error: 400 配置错误: claude provider 缺少 base_url 配置这个报错的意思是Claude Code 已经知道你要用某个 provider但这个 provider 的配置里缺少 API 地址。等价于发了快递但没填收货城市当然投递失败。解决思路很直接要么在环境变量里写好ANTHROPIC_BASE_URL要么在 provider 配置里把 base_url 显式填上。我在项目中一度同时接入了几个不同的兼容端点想比较各自延迟结果换配置时漏掉了 base_url被这个小问题卡了半小时。后来统一用一个配置文件管理所有 provider 配置再也不在手写环境变量和 GUI 工具之间来回横跳。3.4 配置管理CC Switch 和 provider-specific 配置这个话题虽然和游戏本体无关但整个重制项目能顺畅推进归功于我先把配置管理搞清楚。Claude Code 在 Windows 和 macOS 上都会读用户目录下的配置文件夹.claude其中settings.json是全局配置包含权限开关、模型设置、第三方 provider 等。错误信息里常见的using provider-specific claude config: C:\Users\Administrator\AppData\Local\...说明你已经设置了按 provider 区分的配置这在多模型切换场景下会频繁出现属于正常现象。CC Switch 这类工具的价值就是把不同的配置组合保存成“套餐”点一下就能切到官方、DeepSeek 或某个企业内网端点。我建议用之前先看一眼它对配置文件的改动逻辑确认它改的是settings.json还是环境变量。因为如果你同时用脚本 export 环境变量再让工具改配置文件两者优先级冲突会非常难排查。一句话结论选定一套配置入口别混着用。4. 用 Claude Code 做游戏把 Rescue Raiders 拆成可执行任务4.1 第一步让 AI “读懂”经典玩法Claude Code 不是游戏策划它不知道 Rescue Raiders 是什么所以第一步必须把老游戏的核心规则完整描述给它。这里我不建议写一大篇散文而是给出结构化规则横轴地图玩家直升机可左右移动并发射子弹玩家护送一队车辆从左侧基地出发向右推进敌方基地在右侧会定时生成拦截车辆玩家需要保护油罐车不被打炸并降落到油罐车上补油地图中段有一座桥桥被炸毁则地上车辆无法通过需要玩家用吊索搬运或先清理敌人把这些规则作为SPEC.md放进项目根目录然后让 Claude Code 读这个文件再输出它理解的任务清单。我实际让 Claude 生成的任务清单包括实体系统、地图系统、敌人状态机、渲染层、碰撞层、音频层、UI 层。这个动作看起来多余但它能立刻暴露“AI 是否误读了规则”。比如 Claude 第一版把“油罐车必须被打炸才失败”理解成了“任何车辆被打炸都失败”这种偏差如果在编码前纠正成本很低一旦写了 500 行再改就烧时间了。4.2 设计现代版的代码架构对于这个体量的项目我选了单页 多个模块文件的结构不用 Webpack 也不用 Vite。几个文件的职责分得很清楚index.html画布挂载和 UI 容器game.js游戏主循环、全局状态、帧率控制entities.js直升机、车辆、子弹、爆炸等实体的类定义map.js道路、桥梁、基地位置、障碍物数据ai.js敌方车辆和直升机的决策逻辑render.js按实体类型绘制到 Canvas在让 Claude 做架构时我给它下的指令是“不要引入任何构建工具用 ES Module 保持文件加载顺序可控”。这个选择在后期调试时拯救了我Canvas 游戏最怕的就是渲染和逻辑纠缠在一起模块边界清楚后每次 Claude 改代码我能第一时间从报错的文件名推断问题出在哪一类。4.3 Claude Code 的日常协作防护栏思维使用 Claude Code 做大型重构我有一条底线禁止它擅自跨越职责边界。比如改entities.js时不许碰render.js避免它顺手“优化”渲染逻辑导致画面崩溃。我会在对话里明确写“你只需要修改 entities.js不用动其他文件”。实际操作时我会分几个轮次每轮只推进一个小目标第一轮让 Claude 搭建游戏主循环跑起一个能移动的矩形第二轮加入玩家直升机 sprite 绘制和键盘输入第三轮加入地面车辆实体和车队推进逻辑第四轮加入敌方生成和攻击行为每一轮之间我会手动跑一次游戏验证手感。这个“人工守门员”的步骤不能省。Claude Code 自动把代码写对是一回事但游戏好不好玩、手感舒不舒服只能靠人试。不喜欢 AI 生成的代码也可以让它输出 patch 而不是直接改源码自己审阅后再应用不过这个项目里我信任度较高基本让它直接改改完再 git diff 审一遍。5. 核心玩法落地的编码实录5.1 先做出一个能玩的最小原型最小可玩版本的标准定得很低直升机可以在屏幕里飞按住空格发射子弹地面有一辆车在移动并可以被子弹击中然后爆炸。这版目的是验证 Canvas 主循环和输入响应。Claude 生成的代码量差不多 300 行结构如下class Game { constructor(canvas) { this.ctx canvas.getContext(2d); this.entities []; this.player new Helicopter(120, 300); this.entities.push(this.player); this.running false; this.lastTime 0; } start() { this.running true; requestAnimationFrame(this.tick.bind(this)); } tick(timestamp) { const dt Math.min((timestamp - this.lastTime) / 1000, 0.033); this.lastTime timestamp; this.update(dt); this.render(); requestAnimationFrame(this.tick.bind(this)); } update(dt) { for (const entity of this.entities) { entity.update(dt); } } render() { this.ctx.clearRect(0, 0, 960, 540); for (const entity of this.entities) { entity.draw(this.ctx); } } }这里的dt是关键。如果不限制最大步长一旦浏览器切后台再切回来timestamp的差值会极大所有实体瞬间瞬移。所以Math.min(delta, 0.033)是防弹窗切换的保命牌。Claude 生成这段代码时我特别注意到了这个细节因为很多手写游戏教程会忽略它。5.2 直升机物理速度、惯性与悬停手感直升机的手感是整个游戏最核心的部分它不能像坦克那样完全即时响应也不能像漂浮纸片那样没有阻尼。我让 Claude 实现了一个经典的“目标速度 加速趋近”模型class Helicopter { update(dt) { // 输入决定目标速度 this.targetVx 0; if (keys.left) this.targetVx -280; if (keys.right) this.targetVx 280; // 朝目标速度平滑过渡 this.vx (this.targetVx - this.vx) * 5 * dt; this.x this.vx * dt; } }系数 5 是调出来的它决定了直升机从静止到全速的时间大约 0.2 秒既不会漂得太狠也不会僵硬。Claude 一开始用的是0.05的系数结果直升机像在水里游泳响应慢半拍。我把它改大后马上接近原版的手感。这里补充一个实操点让 Claude 调参数时不要只说“手感不对”要给它可视化参照。我给它描述的是“从按下方向键到速度达到 80% 大约需要 0.2 秒整个移动要像弹性阻尼而不是线性加速”它给出的公式才更合理。这就是为什么我说人必须参与到“手感”相关决策里。5.3 车队推进与加油机制的数据设计车队在游戏里不是单纯往右走而是有状态的群体油罐车停止会让整个队伍停下敌人攻击会让车辆分开躲避桥梁断裂会让队伍堵塞。为了让 Claude 不至于写出五十个 if 嵌套我先把数据模型定好class ConvoyVehicle { constructor(type, hitPoints, maxSpeed) { this.type type; // truck | armored | jeep this.hitPoints hitPoints; this.maxSpeed maxSpeed; this.fuel 100; this.isAlive true; this.offsetFromLeader 40; } }每辆车的offsetFromLeader是相对前车的间隔。前进时后车会尝试把间距恢复到初始值这样整个车队就像一串被弹簧连接的珠子不会乱。加油机制则简化为直升机降落在油罐车周围固定半径内油量以每秒 25 点的速度恢复期间直升机无敌但不能移动只能在六秒后再次起飞。Claude 在这个模块里容易犯的错是把“降落加油”做成一个即时事件我后来强制套了一个refuelingTimer逼它实现时间窗口逻辑。5.4 敌人 AI简单但要有压迫感敌方 AI 如果做复杂了AI 会写出一堆状态类反而难维护。我给 Claude 的要求是“必须基于规则不引入搜索算法”最终实现了一个上百行的有限状态机。敌人车辆的行为只有三种状态巡逻沿道路左移保持警戒攻击进入射程后瞄准车队中血量最低的单位追击当玩家直升机离得太近时转向骚扰玩家敌方生成节奏则和玩家进度挂钩。原版游戏里有个很巧妙的设计玩家推进得越深敌方刷新越频繁。这个节奏我用一个简单的压力值模拟每前进 100 像素生成间隔缩短 5%上限是初始间隔的 30%。Claude 用了一行Math.max(baseInterval * 0.3, baseInterval * (1 - progress / mapLength))就实现了逻辑清晰且好调。碰撞检测上初期版本用的是裸的矩形相交function rectsOverlap(a, b) { return a.x b.x b.w a.x a.w b.x a.y b.y b.h a.y a.h b.y; }这个简单方案在实体少于几十个时毫无压力。我特意没让 Claude 上空间哈希是因为这个游戏规模不值得花复杂度换性能裸矩形遍历完全跑得过。6. 调试与问题排查实录6.1 把报错丢给 Claude Code 的正确姿势用 Claude Code 调试游戏 bug我总结出一个高效姿势不要直接扔报错文本而是“报错文本 期望行为 最近改了什么”三段式。比如entities.js:42 抛出了 TypeError: Cannot read properties of undefined (reading x) 刚刚我把卡车队生成逻辑改成每次读取前车的坐标 预期是车队首尾相接但运行时第二辆车的 target 是 undefined。 请检查 entities.js 的发布/订阅部分。Claude 收到这种信息后通常能立刻定位到问题因为它的注意力会集中在“前车坐标为什么没传递”这个具体问题上。直接扔报错文本的话它会给你列十种可能原因反而是浪费。这个项目里最典型案例是敌方直升机在追踪玩家时偶尔会出现“抽搐”现象。我第一反应是碰撞检测问题把代码给 Claude它读完后发现是我在update()里重复更新了targetVx导致每帧的加速度被覆盖成零直升机反复停启。这种定位速度比人逐行排查快得多。6.2 高频报错速查表把整个重制过程中真实遇到的高频问题整理成了一张表很多和 Claude Code 本身有关现象实际原因排查 / 解决claude : 无法将...识别为 cmdletnpm 全局目录不在 PATH查npm prefix -g把路径加入用户 PATH重开终端workspace requires the Virtual Machine PlatformWindows 虚拟化平台没开启用 Windows 功能或跑 DISM 命令重启后生效claude code might not be available in your country网络或账户区域不在官方支持范围内参考官方支持地区和账户策略使用受支持的区域系统couldnt sign in to gateway/provider rejected登录网关或账户凭据校验失败执行claude auth重新登录或清理.claude/.credentials.json后再试claude provider 缺少 base_url 配置第三方 provider 配置里没有 API 地址补环境变量ANTHROPIC_BASE_URL或在 provider 配置文件里显式填 base_urlAPI error 400请求被模型服务端拒绝检查模型名是否被服务端支持、密钥是否有效、base_url 是否填错切了模型后工具能力异常第三方模型对工具调用的兼容性不同降级任务复杂度不要让它一次性跨多个文件大重构其中“missing base_url”和“gateway 登录失败”这两个问题最容易在“配置切换器 官方登录同时使用”时出现。我的建议是要么全程走命令行环境变量要么全程走配置文件不要同时开两套。如果必须切就彻底退出终端会话再重新进入。6.3 性能优化让重制版跑满 60 帧Canvas 2D 写这类 2D 游戏性能瓶颈几乎不会出现在逻辑层而是渲染层。我在实际测试中发现两个卡顿来源第一个是每帧把 Canvas 全清空再全部绘制。实体数量少时没问题但敌方生成密度上来后96 个实体每种都调用draw()频繁产生垃圾对象帧率掉到 40 左右。优化策略很简单把背景层画到一个离屏 Canvas 上每帧只需要drawImage把背景贴回去动态实体才单独绘制。第二个是离谱的阴影效果。Claude 在写渲染代码时顺手给每个实体加了ctx.shadowBlur看起来柔和但每帧绘制几十个带阴影的对象性能直接崩。把阴影去掉或者只在 UI 层使用阴影效果帧率立刻回满。这件事提醒我AI 默认生成的代码偏向“好看”但我们必须对渲染成本敏感。我还让 Claude 加了一个简单的 FPS 面板是的这个面板最初是为了测试后来保留在游戏角落。开发时它能直观反映优化效果发布时用注释包住即可。7. 收尾一段关于“人机协作”的真实体会这个项目从拿到标题到完整跑起来我前后用了大约一周的业余时间其中有三天都是在装环境、配模型和调手感。说句实话Claude Code 帮我省下的不是“写代码”的工作量而是“反复切换上下文”的脑力消耗。我可以同时在三个文件里改逻辑对游戏参数做实验让它在几秒内完成我手动可能要做十分钟的小重构。这让我有更多精力去盯真正重要的东西游戏好不好玩。如果你也要做类似的老游戏重制我的建议是不要一开始追求完整复刻。先做最小可玩原型让画面动起来让直升机飞起来让一颗子弹打爆一辆车。那种做完第一版时按 F5 刷新看到画面动起来的成就感比任何花哨架构都更能推着你继续做下去。也别怕让 AI 接管大量重复性工作但一定要亲自扮演“手感测试员”。算法可以帮你写出一百种敌人行为但你才是那个知道怎样才好玩的人。最后再分享一个具体的小技巧整个项目的游玩参数我最后都集中放在一个config.js文件里。直升机加速度、敌方生成间隔、子弹速度、油量恢复速率全部是具名常量。这样你随时可以把文件丢给 Claude说“把子弹速度提高 20%但不要影响机枪射程”它只需要改一个数字。这比让 AI 在代码堆里到处找参数要稳得多也是我这次最满意的一个工程决策。