用 AI Agent 做一个前端小游戏：从提示词到可运行 Demo
最近 AI 编程很火，但只说“AI Agent 很强”其实没什么意思。
这篇文章我们换个玩法：直接用 AI Agent 的思路，做一个能运行的前端小游戏。
不讲太重的模型原理，重点就三个字：能跑通。
文章亮点
- 有完整 HTML/CSS/JS 代码，复制即可运行
- 有提示词模板，适合直接改成自己的 Demo
- 有 AI Agent 工作流，帮你理解它和普通 ChatGPT 的区别
- 适合前端初学者、CSDN 技术号重新发文、小游戏教程选题
先看最终效果
我们要做的是一个30 秒反应力挑战小游戏：
玩法很简单：
- 页面里随机出现一个黄色圆点
- 点中一次加 1 分
- 每局 30 秒
- 时间结束显示最终分数
- 可以重新开始
这个 Demo 不复杂，但刚好覆盖了前端小游戏最常见的几个点：DOM 操作、状态管理、倒计时、随机位置、移动端适配。
一、为什么前端开发者要关注 AI Agent
以前我们用 ChatGPT 写代码，常见方式是：
帮我写一个按钮组件。 帮我解释这段 JS。 帮我优化一下 CSS。这类用法当然有帮助，但它更像“问一句，答一句”。
AI Agent 更像一个能持续推进任务的开发助手。你给它一个目标，它会尝试拆步骤、写代码、检查问题、继续迭代。
简单说：
| 对比项 | 普通 ChatGPT | AI Agent |
|---|---|---|
| 工作方式 | 一问一答 | 围绕目标连续推进 |
| 适合任务 | 解释代码、生成片段 | 做 Demo、修 bug、整理项目 |
| 输出结果 | 偏答案 | 偏可交付成果 |
| 前端场景 | 写一个函数 | 做一个能玩的小游戏 |
如果再结合 MCP 这类协议，AI 工具还能接入更多上下文，比如项目文件、文档、浏览器、数据库等。对前端来说，这意味着以后很多“从想法到 Demo”的过程会明显变快。
二、给 AI Agent 的提示词怎么写
很多人觉得 AI 写代码不好用，问题往往不是 AI 不行，而是需求太模糊。
不推荐这样写：
帮我写一个小游戏。更推荐这样写：
请用 HTML、CSS、JavaScript 写一个单文件前端小游戏。 游戏名：反应力挑战 功能要求： 1. 页面中随机出现一个黄色圆点 2. 玩家点击圆点得分 3. 游戏总时长 30 秒 4. 页面显示当前分数和剩余时间 5. 时间结束后显示最终分数 6. 支持重新开始 7. 适配手机端 8. 所有代码写在一个 index.html 中，方便直接复制运行这个提示词的关键是：技术栈、交付形式、规则、状态、体验要求都说清楚了。
AI Agent 最怕“你也不知道自己要什么”。需求越清楚，生成结果越接近可用 Demo。
三、完整代码：复制就能跑
新建一个index.html文件，把下面代码复制进去，用浏览器打开即可。
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>反应力挑战</title><style>*{box-sizing:border-box;}body{margin:0;min-height:100vh;font-family:Arial,"Microsoft YaHei",sans-serif;background:#101820;color:#fff;display:flex;align-items:center;justify-content:center;}.game{width:min(92vw,520px);padding:20px;}.top{display:flex;justify-content:space-between;gap:12px;margin-bottom:14px;font-size:18px;font-weight:700;}.board{position:relative;width:100%;aspect-ratio:1 / 1;background:#1f2a33;border:2px solid #3f5668;border-radius:12px;overflow:hidden;touch-action:manipulation;}.target{position:absolute;width:58px;height:58px;border:none;border-radius:50%;background:#ffcc33;box-shadow:0 0 18pxrgba(255,204,51,0.75);cursor:pointer;transform:translate(-50%,-50%);transition:left 0.12s ease,top 0.12s ease,transform 0.08s ease;}.target:active{transform:translate(-50%,-50%)scale(0.88);}.panel{margin-top:14px;display:flex;justify-content:space-between;align-items:center;gap:12px;}.message{min-height:24px;color:#d8e3ea;}.start{border:0;border-radius:8px;padding:10px 16px;background:#00a884;color:white;font-size:16px;font-weight:700;cursor:pointer;}.start:hover{background:#00bd95;}@media(max-width:420px){.top{font-size:16px;}.target{width:50px;height:50px;}}</style></head><body><mainclass="game"><divclass="top"><div>分数：<spanid="score">0</span></div><div>剩余：<spanid="time">30</span>s</div></div><sectionclass="board"id="board"aria-label="游戏区域"><buttonclass="target"id="target"aria-label="点击得分"></button></section><divclass="panel"><divclass="message"id="message">点击开始，测试你的反应速度。</div><buttonclass="start"id="start">开始游戏</button></div></main><script>constboard=document.querySelector("#board");consttarget=document.querySelector("#target");constscoreEl=document.querySelector("#score");consttimeEl=document.querySelector("#time");constmessageEl=document.querySelector("#message");conststartBtn=document.querySelector("#start");letscore=0;lettimeLeft=30;lettimer=null;letplaying=false;functionrandom(min,max){returnMath.floor(Math.random()*(max-min+1))+min;}functionmoveTarget(){constboardRect=board.getBoundingClientRect();consttargetSize=target.offsetWidth;constpadding=targetSize/2+8;constx=random(padding,boardRect.width-padding);consty=random(padding,boardRect.height-padding);target.style.left=`${x}px`;target.style.top=`${y}px`;}functionstartGame(){score=0;timeLeft=30;playing=true;scoreEl.textContent=score;timeEl.textContent=timeLeft;messageEl.textContent="快点击黄色圆点！";startBtn.textContent="重新开始";moveTarget();clearInterval(timer);timer=setInterval(()=>{timeLeft-=1;timeEl.textContent=timeLeft;if(timeLeft<=0){endGame();}},1000);}functionendGame(){playing=false;clearInterval(timer);messageEl.textContent=`游戏结束，你的最终分数是${score}分。`;}target.addEventListener("click",()=>{if(!playing)return;score+=1;scoreEl.textContent=score;moveTarget();});startBtn.addEventListener("click",startGame);window.addEventListener("resize",()=>{if(playing)moveTarget();});moveTarget();</script></body></html>四、这段代码里最值得看的 3 个点
1. 游戏状态
letscore=0;lettimeLeft=30;lettimer=null;letplaying=false;小游戏不一定需要复杂框架，但一定要有清晰的状态。
这里的score、timeLeft、playing就是最核心的游戏状态。
2. 随机位置
constx=random(padding,boardRect.width-padding);consty=random(padding,boardRect.height-padding);这里加了padding，是为了避免圆点贴边导致不好点。
这个细节很小，但会明显影响游戏体验。
3. 重新开始
clearInterval(timer);timer=setInterval(()=>{timeLeft-=1;timeEl.textContent=timeLeft;},1000);重新开始前先清掉旧定时器，否则多点几次开始按钮，倒计时可能会加速。
这类小 bug，正是让 AI Agent 反复检查时很容易发现的点。
五、让文章更有收藏价值：继续让 AI 优化
第一版能跑之后，可以继续给 AI Agent 下第二轮任务：
请基于当前小游戏继续优化： 1. 增加最高分记录，使用 localStorage 保存 2. 分数越高，圆点越小 3. 增加连击提示 4. 点击空白区域扣 1 分 5. 游戏结束后显示评级，例如 S、A、B、C 6. 增加简单动画，让圆点出现时更有反馈这样文章也能继续拆成系列：
- 第 1 篇：AI Agent 做小游戏基础版
- 第 2 篇：加最高分和难度系统
- 第 3 篇：把原生 JS 版本改成 Vue/React
- 第 4 篇：用 AI 优化 UI 和动画
对长期没更新的账号来说，系列文章比单篇文章更容易形成连续曝光。
六、前端开发者怎么真正用好 AI Agent
我的建议是：不要只让 AI 写一小段代码，而是把它当成“Demo 搭建助手”。
适合交给 AI Agent 的任务：
- 快速做一个小游戏原型
- 写一个后台页面初版
- 把普通 JS 代码拆成模块
- 根据报错信息定位 bug
- 把一个 Demo 改成 Vue/React 版本
- 给技术文章补充代码解释和标题结构
但最后一定要自己检查三件事：
- 代码能不能跑
- 交互顺不顺
- 逻辑有没有边界 bug
AI 负责提速，人负责把关。这个组合目前最实用。
七、总结
AI Agent 不是魔法按钮，但它确实能把前端开发里“从 0 到 1”的速度拉快很多。
这篇文章我们用一个反应力小游戏跑了一遍完整流程：
写清需求 -> 生成代码 -> 浏览器运行 -> 检查问题 -> 继续优化如果你是前端初学者，可以从这种小游戏开始练习；如果你已经有项目经验，也可以把 AI Agent 当作项目原型工具。
技术一直在变，但核心能力没变：看懂需求、判断代码、优化体验。AI 会让写代码更快，而真正拉开差距的，还是你对细节的把控。
发布小建议
- 封面图可以用本文第一张图
- 标题可选：
2026 前端新玩法：用 AI Agent 做一个能运行的小游戏 - 标签建议：
AI Agent、前端、JavaScript、小游戏、ChatGPT
参考资料
- Model Context Protocol 官方文档
- OpenAI Codex 官方介绍
- GitHub Copilot Agent Mode 文档