AI > 其他 >

如何使用 AI Agent 做一个前端小游戏(从提示词到可运行Demo)

2026-06-24 10:51:21 海拥

文章亮点

有完整 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 文件，把下面代码复制进去，用浏览器打开即可。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="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 18px rgba(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>
  <main class="game">
    <div class="top">
      <div>分数：<span id="score">0</span></div>
      <div>剩余：<span id="time">30</span>s</div>
    </div>
    <section class="board" id="board" aria-label="游戏区域">
      <button class="target" id="target" aria-label="点击得分"></button>
    </section>
    <div class="panel">
      <div class="message" id="message">点击开始，测试你的反应速度。</div>
      <button class="start" id="start">开始游戏</button>
    </div>
  </main>
  <script>
    const board = document.querySelector("#board");
    const target = document.querySelector("#target");
    const scoreEl = document.querySelector("#score");
    const timeEl = document.querySelector("#time");
    const messageEl = document.querySelector("#message");
    const startBtn = document.querySelector("#start");
    let score = 0;
    let timeLeft = 30;
    let timer = null;
    let playing = false;
    function random(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    function moveTarget() {
      const boardRect = board.getBoundingClientRect();
      const targetSize = target.offsetWidth;
      const padding = targetSize / 2 + 8;
      const x = random(padding, boardRect.width - padding);
      const y = random(padding, boardRect.height - padding);
      target.style.left = `${x}px`;
      target.style.top = `${y}px`;
    }
    function startGame() {
      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);
    }
    function endGame() {
      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. 游戏状态

let score = 0;
let timeLeft = 30;
let timer = null;
let playing = false;

小游戏不一定需要复杂框架，但一定要有清晰的状态。
这里的 score、timeLeft、playing 就是最核心的游戏状态。

2. 随机位置

const x = random(padding, boardRect.width - padding);
const y = 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

参考资料

到此这篇关于如何使用 AI Agent 做一个前端小游戏(从提示词到可运行Demo)的文章就介绍到这了,更多相关AI Agent 前端小游戏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！