如果你经常刷技术社区很可能见过这样一句话“Show HN: My AI agent built and shipped a browser game on its own”。翻译过来就是我的 AI Agent 自己把一个浏览器游戏从零写出来并且发布上线了。这个标题看起来像是一个简单的作品展示但仔细拆分它其实说出了一个关于 Agent 开发的重要分水岭过去我们用 AI 写的是“代码片段”现在 AI 能做的是“交付一个完整作品”。从一段代码到一个能点开、能玩、能分享给朋友的小游戏中间隔着任务规划、文件组织、逻辑调试、静态部署这些环节。如果 Agent 能独立走完这条路说明它已经不再只是一个对话窗口而是一个具备执行能力的开发角色。浏览器游戏是一个特别好的观察样本。它的规模不大单文件也能跑但它不是“Hello World”一个能玩的游戏至少要有界面、交互、状态管理、碰撞检测、计分机制这些逻辑。如果 Agent 能独立完成这些说明它的规划能力、代码生成能力和自动修复能力已经形成了一个可以落地的闭环。这篇文章会从“Agent 到底改了什么”这个角度切入讲清楚 Agent 开发的基本概念、环境准备、从需求到发布的核心流程并给出一套可以在本地复现的贪吃蛇游戏示例。1. 这篇文章真正要解决的问题先说一个很多人的误解AI 编程助手不等于 AI Agent。Copilot 类工具做的是“补全”你在 IDE 里敲了一半它帮你补另一半而 Agent 做的是“执行”你给它一个目标它自己拆任务、写代码、跑命令、看报错、改代码、再验证直到目标完成。这种差异在“独立构建并发布浏览器游戏”这个场景中体现得淋漓尽致。如果你自己手动做一个贪吃蛇游戏流程大致是这样的新建 HTML 文件、写页面结构、写样式、写游戏逻辑、在浏览器里打开、发现蛇不动、查看控制台、修正代码、重新刷新页面、确认逻辑正常、再考虑怎么部署上线。这套流程对开发者来说非常熟悉但它是由许多个判断节点组成的下一步该做什么、哪里出了问题、代码要放在哪个文件。AI Agent 的价值就是把这套流程中的“执行权”接过来。这篇文章真正要解决的问题是三个Agent 是如何做到“自主构建并发布”的它的能力边界在哪里如果你也想让 Agent 帮你做一个小游戏或小工具正确的做法是什么在这个过程中最容易踩的坑有哪些如何用工程化手段来控制风险如果你是正在学习 Agent 开发的开发者如果你想让 AI 从“写代码片段”升级到“交付完整功能”如果你对自动化软件开发流程感兴趣那么这篇文章值得收藏。2. Agent 开发的核心概念从辅助编程到自主交付要理解 Agent 自主开发先要理解几个基础概念。第一个是 LLM也就是大语言模型。它是 Agent 的“大脑”负责理解任务、生成文本、给出决策。但 LLM 本身只能输出文字不能直接操作你的文件系统也不能执行命令。第二个是工具调用Tool Calling / Function Calling。这是 Agent 真正做到“动手”的关键。通过工具调用模型可以触发预先定义好的函数比如“读取文件”“运行命令”“搜索网页”。也就是说Agent 不再只是“说”要做什么而是可以“做”。第三个是 Agent 的运行循环。一个典型的 Agent 循环是接收任务 → 拆解计划 → 调用工具执行 → 观察结果 → 调整下一步 → 继续执行直到任务完成。这个循环和人类开发者改代码的节奏很像只不过 Agent 的迭代速度更快。第四个是上下文和记忆。Agent 在执行过程中需要记住自己已经做了什么、当前处于哪个步骤、哪些文件已经生成。实现方式有很多有的是把对话历史传给模型有的是把项目文件内容作为上下文有的是用专门的记忆模块保存关键信息。理解了这些概念再回头看“AI agent built and shipped a browser game”这句话就会明白它真正传递的信号是这个 Agent 完成了一个完整的“规划—执行—验证—发布”流程而不是只输出了几段代码。与传统编程方式的对比可以总结成一张表环节传统开发方式Agent 开发方式需求理解靠人阅读、拆分Agent 根据提示词拆解任务代码生成人手写或补全Agent 按规划生成文件定位问题人工看报错、加日志Agent 读取日志并尝试修复验证结果人工刷新页面或跑测试Agent 执行命令、检查输出部署发布人工配置托管平台Agent 按步骤发布静态资源这里需要特别强调一个边界Agent 并不是无所不能的它仍然依赖工具链仍然可能出现生成错误、死循环、需要人工干预的情况。但从项目标题来看在小体量游戏这类任务上Agent 已经具备了一定的端到端交付能力。这正是 Agent 开发值得关注的原因。3. 环境准备与前置条件如果你想让 Agent 复现类似的流程第一步是准备一个可运行的开发环境。下面是建议清单具体版本请以实际项目为准本文重点演示通用思路。3.1 基础环境操作系统macOS、Linux 或 Windows 均可尽量使用支持命令行工具的现代终端。Node.js 和 npm用于本地启动静态服务器、安装开发依赖。Git用于版本管理也便于把项目推送到远程仓库。现代浏览器Chrome、Edge 或 Firefox用于预览游戏和排查问题。如果你本机还没有安装 Node.js可以去官网下载 LTS 版本或者通过 Node 版本管理工具安装这样后续切换版本更方便。3.2 Agent 工具选择目前接入 Agent 的方式大致有三类使用支持 Agent 模式的编码工具。这类工具通常集成在 IDE 中能读写当前项目文件并执行终端命令。使用命令行 Agent 工具。启动后在终端里描述需求它会在当前目录中创建文件、运行命令、迭代修改。自己通过 LLM API 工具调用框架编排 Agent。这种方式灵活但需要你处理循环控制、错误恢复、依赖注入等工程细节。不同工具的授权方式也不同有的是订阅制有的是按 API 调用量计费。选择时先看自己的使用频率和项目复杂度不用盲目追求最贵的配置先跑通最小案例更重要。3.3 发布平台准备浏览器游戏本质上是静态页面发布方式非常简单。常见的静态托管方案包括GitHub Pages、Netlify、Vercel或者公司内部的静态资源服务器。选择哪个平台取决于你的网络环境和项目用途核心步骤是相同的把静态文件上传到托管服务得到一个外部可访问的 URL。需要提醒的是不要在你的代码里或者 Agent 的配置里写入真实密钥。任何前端项目都是可以被用户看到的密钥一旦出现在页面上就等于泄露了。3.4 Agent 工具的工作目录建议为每个 Agent 项目单独建立目录不要让 Agent 在你的系统目录或随机目录中随意创建文件。一个干净的工作目录可以避免 Agent 误读无关文件也方便你在出现异常时直接删除重来。mkdir -p ~/work/my-ai-snake cd ~/work/my-ai-snake4. 核心流程拆解Agent 如何从需求到发布现在进入正题。一个 Agent 要完成“独立构建并发布浏览器游戏”内部流程可以拆成五个阶段。4.1 需求定义这一步通常由人完成。你需要把“做一个贪吃蛇游戏”扩展成 Agent 能理解和执行的任务描述。越清晰越好游戏的名称、玩法、技术栈、视觉效果、是否需要按钮、如何计分、碰到边界如何处理。需求不是越复杂越好而是要边界明确。一个常见误区是“AI 那么聪明我说一句话它就该懂。”确实简单的需求模型能猜出大概但如果你想要稳定、可复现的结果提示词就是你的产品需求文档。Agent 遵循指令的能力很强但它的“想象力”也是一种风险——它可能擅自加功能也可能理解错需求。4.2 任务规划Agent 收到需求后会生成一个执行计划。比如创建 index.html 文件在文件中编写 HTML 结构和样式实现游戏逻辑在浏览器中验证修复发现的问题输出部署说明这个计划可能在内部执行也可能以文本形式展示给你。优秀的 Agent 会先展示计划再动手这样你可以在它跑偏之前纠正方向。4.3 代码生成Agent 开始创建文件、写入代码。对于纯前端的浏览器游戏最简形态是一个完整的 HTML 文件里面包含结构、样式和脚本。这个阶段的核心能力是“把计划变成工程产物”而不是简单拼接代码片段。4.4 测试与修复这是 Agent 和普通聊天模型拉开差距的地方。普通聊天模型生成代码后代码对不对全凭目测Agent 则可以直接运行命令、启动本地服务器、读取报错信息并基于报错修改代码。这个“读取反馈 → 调整策略”的循环决定了 AI 自主开发的完成度。如果你用的是命令行 Agent 工具它会尝试使用浏览器或脚本检查页面。如果调试工具不完整它会请求你手动打开页面并把报错信息反馈给它。在这种模式下你可以把 Agent 当成一个“需要远程操作电脑的实习生”它看不见的部分需要你帮它确认。4.5 发布浏览器游戏的发布是最后一步。Agent 可以把项目初始化为 Git 仓库、创建远程仓库、推送代码并给出开启静态托管的操作说明。有些 Agent 还能调用部署平台的 API 完成自动发布但这通常需要在配置阶段授权。从流程可以看出Agent 自主交付的本质是把一个完整开发流程中的大部分操作节点都封装成了可调用、可循环的工具链。这个趋势值得所有开发者注意。5. 完整示例与代码实现接下来我用一个最小可复现的案例演示“AI Agent 构建并发布贪吃蛇浏览器游戏”的完整过程。这里不会依赖任何特定商业产品你完全可以用支持 Agent 的编码工具来执行或者自己调用大模型 API 编排工具循环。5.1 给 Agent 的提示词模板建议先写这样一个提示词文件放在项目目录下。你是一个全栈 AI 编程 Agent。请完成以下任务 1. 在当前目录下创建一个浏览器游戏游戏名称为 Snake。 2. 使用原生 HTML CSS JavaScript不依赖任何第三方库。 3. 游戏需要具备以下功能 - 玩家通过键盘方向键控制蛇的移动 - 蛇吃到食物后变长并且得分增加 10 - 食物出现在随机位置且不能和蛇身重叠 - 蛇碰到画布边界或自身时游戏结束 - 游戏结束后可以点击按钮重新开始 4. 页面要有基本的视觉设计深色背景、清晰可见的蛇和食物、居中布局。 5. 代码必须是一个完整的 index.html 文件双击即可在浏览器中运行。 6. 完成后请检查代码是否存在语法错误并说明如何在本地启动预览。 7. 最后把项目初始化为 Git 仓库写入一次初始提交并输出部署到静态托管的步骤。这个提示词的价值在于它明确了目标、技术约束、功能清单、验收标准和交付形式。Agent 收到后可以据此规划并执行。5.2 Agent 生成的完整游戏代码下面是一个符合上述需求的贪吃蛇游戏完整实现。你可以手动保存为 index.html也可以让 Agent 在自己的工作目录中生成类似文件。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleSnake Game/title style body { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; background: #1a1a2e; color: #eee; font-family: system-ui, sans-serif; } canvas { background: #16213e; border: 2px solid #0f3460; border-radius: 8px; } #score { font-size: 20px; margin: 12px 0; } button { padding: 8px 16px; font-size: 16px; cursor: pointer; border: none; background: #e94560; color: #fff; border-radius: 6px; margin-bottom: 12px; } /style /head body h2贪吃蛇/h2 div idscorescore: 0/div canvas idgame width400 height400/canvas button idrestart重新开始/button script const canvas document.getElementById(game); const ctx canvas.getContext(2d); const scoreEl document.getElementById(score); const cell 20; const cols canvas.width / cell; const rows canvas.height / cell; let snake [{ x: 8, y: 10 }]; let direction { x: 1, y: 0 }; let nextDirection { x: 1, y: 0 }; let food { x: 15, y: 10 }; let score 0; let gameOver false; let timer null; function randomFood() { while (true) { const x Math.floor(Math.random() * cols); const y Math.floor(Math.random() * rows); if (!snake.some(s s.x x s.y y)) { food { x, y }; return; } } } function update() { if (gameOver) return; direction nextDirection; const head { x: snake[0].x direction.x, y: snake[0].y direction.y }; if ( head.x 0 || head.y 0 || head.x cols || head.y rows || snake.some(s s.x head.x s.y head.y) ) { gameOver true; clearInterval(timer); ctx.fillStyle rgba(0,0,0,0.5); ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle #fff; ctx.font 24px system-ui; ctx.textAlign center; ctx.fillText(Game Over, canvas.width / 2, canvas.height / 2 - 10); ctx.font 14px system-ui; ctx.fillText(点击重新开始, canvas.width / 2, canvas.height / 2 20); return; } snake.unshift(head); if (head.x food.x head.y food.y) { score 10; scoreEl.textContent score: score; randomFood(); } else { snake.pop(); } draw(); } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let i 0; i cols; i) { for (let j 0; j rows; j) { ctx.fillStyle (i j) % 2 0 ? #142a4d : #16213e; ctx.fillRect(i * cell, j * cell, cell, cell); } } ctx.fillStyle #e94560; ctx.fillRect(food.x * cell 2, food.y * cell 2, cell - 4, cell - 4); snake.forEach((s, index) { ctx.fillStyle index 0 ? #4ecca3 : #2e8f78; ctx.fillRect(s.x * cell 1, s.y * cell 1, cell - 2, cell - 2); }); } document.addEventListener(keydown, e { if (e.key ArrowUp direction.y ! 1) nextDirection { x: 0, y: -1 }; if (e.key ArrowDown direction.y ! -1) nextDirection { x: 0, y: 1 }; if (e.key ArrowLeft direction.x ! 1) nextDirection { x: -1, y: 0 }; if (e.key ArrowRight direction.x ! -1) nextDirection { x: 1, y: 0 }; }); function start() { snake [{ x: 8, y: 10 }]; direction { x: 1, y: 0 }; nextDirection { x: 1, y: 0 }; score 0; gameOver false; scoreEl.textContent score: 0; randomFood(); draw(); if (timer) clearInterval(timer); timer setInterval(update, 120); } document.getElementById(restart).addEventListener(click, start); start(); /script /body /html这段代码的关键逻辑有这么几点。randomFood 使用 while 循环生成食物并用snake.some判断新食物是否落在蛇身上避免出现“食物和蛇体重叠”的情况。update 函数先读取 nextDirection 更新当前方向再计算新蛇头的位置然后依次处理边界碰撞、自身碰撞、吃到食物和正常移动。键盘监听里对方向做了反向保护比如蛇正在向右移动时不能直接按左键否则蛇会瞬间穿过自己。5.3 本地启动脚本保存 index.html 后使用 Node.js 启动一个静态服务器来预览。# 在项目目录下执行 npx http-server . -p 8080然后在浏览器中打开http://localhost:8080就可以开始游戏。如果你的环境里没有 http-server也可以用 Python 的静态服务器命令核心目的是让浏览器能通过 HTTP 协议访问到 index.html。5.4 初始化 Git 仓库并发布Agent 完成代码后可以执行以下命令把项目纳入版本管理# 初始化仓库 git init # 添加当前目录所有文件 git add . # 创建初始提交 git commit -m feat: AI agent 生成的贪吃蛇浏览器游戏 # 添加远程仓库地址替换为你的真实仓库地址 git remote add origin https://github.com/yourname/snake-game.git # 推送到主分支 git branch -M main git push -u origin main推送到远程仓库后在 GitHub 仓库的 Settings → Pages 页面中选择部署来源为 main 分支稍等片刻就能得到一个公开访问的游戏地址。如果你使用 Netlify 或 Vercel也可以直接把仓库导入平台会自动识别静态项目并完成发布。对于“shipped”这一步来说得到 URL 意味着游戏真正变成了一个可以被其他人打开访问的产品。6. 运行结果与效果验证代码写完不代表流程结束。你需要验证“Agent 的成果”确实可用这一步不能省。6.1 启动与访问在项目目录执行npx http-server . -p 8080打开浏览器访问http://localhost:8080预期看到一个深色背景的居中页面页面标题是“贪吃蛇”下方显示分数中间是 400x400 的游戏画布再往下是“重新开始”按钮。6.2 功能验证路径验证一个浏览器游戏是否成功可以从下面几个维度依次检查蛇是否会自动开始移动如果蛇停在原地不动多半是 setInterval 没有触发或者 update 里被 gameOver 挡住。按方向键能否改变蛇的移动方向特别是上下左右四个方向都要试一遍并确认不能反向移动。蛇吃到食物后是否变长且分数增加食物的位置是否每次都会重新生成且不与蛇身重叠蛇撞到画布边界或自身后是否显示 Game Over点击“重新开始”按钮游戏是否恢复初始状态每个维度都可以作为 Agent 的验收标准。如果你发现某一项不通过可以把现象和截图反馈给 Agent让它继续修复。6.3 浏览器控制台检查在浏览器中按 F12 打开开发者工具切换到 Console 面板确认页面加载过程中没有红色报错。如果出现红色错误把完整错误信息复制下来这是 Agent 修复问题最重要的线索。例如如果控制台报 “Cannot read properties of undefined (reading x)”说明代码在某个时刻访问了不存在的对象属性通常和蛇头索引或食物坐标有关。这类信息比“页面不工作”要具体得多。6.4 部署后的验证发布完成后打开线上 URL 再测试一遍。这里最容易出现的问题是资源路径错误本地使用的是相对路径部署到子路径后如果代码里写了绝对路径页面就可能白屏。建议在最终 HTML 中统一使用相对路径。7. 常见问题与排查思路Agent 自主开发的流程并不总是一帆风顺。下面列出我见过的高频问题以及对应的排查策略。问题现象可能原因排查方式解决方案打开页面后蛇不移动游戏循环未启动或 direction 初始值异常检查 Console 报错确认 setInterval 是否执行检查 start 函数是否被调用direction 初始化是否正确方向键无效键盘事件监听未绑定或页面聚焦在按钮上点击画布后再按方向键查看事件是否触发将监听绑定到 document并避免默认滚动行为食物总是出现在蛇身上randomFood 未排除蛇身坐标阅读随机坐标生成逻辑在 while 循环中用 snake.some 判断冲突Agent 生成的代码被截断上下文窗口不足或生成长文本时中断检查生成日志确认文件是否完整写入拆分成多个步骤先写结构再写逻辑或增加输出预算Agent 执行命令被拒绝工具授权范围不足或目录权限受限查看工具权限配置和终端报错以最小必要权限授权当前工作目录操作部署后页面白屏静态资源路径错误或未重新提交构建产物打开线上 URL查看 Network 请求和文件路径改用相对路径重新构建并推送页面能玩但分数不增加吃食物判断条件写错或分数更新未触发在 update 中打印 head 和 food 坐标检查 unshift 和食物坐标比较逻辑游戏偶尔崩溃随机位置生成死循环当蛇占满整个画布时 while 循环无法退出在 randomFood 中添加最大尝试次数或判断剩余空格数需要补充说明的是如果 Agent 是运行在命令行工具里很多情况下它会自己读取报错并尝试修复。你只需要给它足够的执行权限并保持工作目录干净。如果它连续多次修复失败更稳妥的做法是暂停执行人工介入查看问题而不是让它反复试错。还有一个容易被忽略的问题代理进程超时。当任务较长时Agent 可能会因为长时间无响应或达到调用限制而停止。这时最好把任务拆小先让 Agent 生成游戏再让 Agent 修复 bug最后再让 Agent 处理部署而不是一次塞给它一个巨型任务。8. 最佳实践与工程建议让 Agent 构建并发布一个浏览器游戏看似简单但如果想把它用在更复杂的项目上你需要建立一套可控的工程规范。8.1 像写产品文档一样写提示词提示词不是越花哨越好而是要覆盖这几个要素目标、约束、功能清单、验收标准、交付形式。比如“创建一个贪吃蛇游戏”是一个想法而“用原生 HTML/CSS/JavaScript 实现贪吃蛇键盘方向键控制吃到食物加十分撞墙或撞自身则结束输出 index.html”才是一个可执行任务。对 Agent 来说含糊的目标 随机的产物。8.2 控制任务范围渐进式扩展第一次使用 Agent 时不要一上来就让它做大型全栈项目。先让它写一个单文件页面再让它实现一个交互功能然后才尝试让它调用 API、接入数据库、部署上线。小范围任务能快速暴露 Agent 的工作方式和工具链问题也方便你在早期建立信任。8.3 必须做代码审查很多人在体验 Agent 后会产生一种“它比我强”的错觉然后直接跳过审查。这是危险的。Agent 生成的代码可能运行结果正确但存在隐藏问题没有边界情况处理、性能隐患、密钥硬编码、依赖不明确。正确的做法是先看懂它的核心逻辑再检查安全性最后才允许合并。前端项目的安全边界尤其重要。不要在前端代码中保存任何敏感凭证如果需要调用后端服务应该通过服务端代理而不是把密钥放在浏览器环境里。这一点对 Agent 生成的代码和人手写的代码同样适用。8.4 让 Agent 自己跑验证Agent 的能力上限很大程度上取决于它能获取多少反馈。如果你的工具链支持运行命令和读取结果不要跳过这一步。每次让它生成代码后都要求它启动本地服务器、访问页面、检查控制台报错并给出验证结果。这能显著减少“表面正确、实际不可运行”的情况。如果你使用的 Agent 工具不支持自动执行浏览器你可以手动打开页面把报错信息贴回给 Agent。这种“人机协作”虽然不如全自动流畅但它仍然是 Agent 开发流程的一部分。8.5 使用 Git 管理每一次迭代Agent 每完成一个阶段建议让它创建一个提交。这样如果后续改动破坏了功能可以快速回滚。对 Agent 创建的文件也可以人工 review diff看看它到底改了什么。Git 的另一个好处是如果 Agent 完全跑偏你可以直接删除分支或回退到 commit重新开始。8.6 发布前做备份和冒烟测试在真正的开发环境测试通过不代表发布后没有问题。部署前你应该在本地构建一个和线上一样的静态目录部署后打开线上 URL 做一次完整冒烟测试。如果需要回滚保留上一次发布的版本文件就能快速切换。这些步骤听起来很基础但正是 Agent 开发流程中最容易被忽略的部分。9. 总结与后续学习方向从“Show HN: My AI agent built and shipped a browser game on its own”这个标题出发我们讨论的不只是一个有趣的实验而是一种正在发生的开发方式变化。AI 从代码补全走向自主执行从生成片段走向交付产品这个过程的核心不是模型本身变聪明了多少而是 Agent 获得了工具调用能力可以自己读写文件、执行命令、观察结果、修正错误。浏览器游戏只是这条路上一个足够小、足够清晰的样本。文章里的贪吃蛇代码只是一个起点。你完全可以复制这个思路让 Agent 去实现其他类型的浏览器游戏比如 2048、推箱子、记忆翻牌也可以让 Agent 继续在这个游戏上叠加功能比如最高分记录、音效、移动端触屏控制。每一次扩展都是在测试 Agent 的规划能力、代码组织能力和调试能力。如果你也想验证 Agent 的真正水平最稳妥的方式不是先搭一套复杂的 Agent 框架而是从一个小任务开始给它一个明确的提示词让它在一个干净目录里独立完成一个可运行的页面然后你负责验收、审查和发布。在实践中观察它哪里做得好、哪里需要人兜底远比看各种排行榜更有意义。建议先把这篇文章收藏备用下次当你准备用 AI 做点什么的时候拿出文章中这套流程从需求定义到发布验证走一遍。你会看到一个真实的结论Agent 是否真的能独立交付不取决于它吹了多少而取决于你给了它多清晰的目标和多完整的反馈闭环。