网站首页 收藏本站
广告位联系

APP正在开发中...
返回顶部
您的位置： 主页 > Ai >

收藏
分享到

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

Ai 来源：互联网 作者：佚名 发布时间：2026-06-24 21:39:53 人浏览
摘要

最近 AI 编程很火，但只说AI Agent 很强其实没什么意思。 这篇文章我们换个玩法：直接用 AI Agent 的思路，做一个能运行的前端小游戏。 不讲太重的模型原理，重点就三个字：能跑通。 文章亮点

最近 AI 编程很火，但只说“AI Agent 很强”其实没什么意思。
这篇文章我们换个玩法：直接用 AI Agent 的思路，做一个能运行的前端小游戏。
不讲太重的模型原理，重点就三个字：能跑通。

文章亮点

  • 有完整 HTML/CSS/JS 代码，复制即可运行
  • 有提示词模板，适合直接改成自己的 Demo
  • 有 AI Agent 工作流，帮你理解它和普通 ChatGPT 的区别
  • 适合前端初学者、CSDN 技术号重新发文、小游戏教程选题

先看最终效果

我们要做的是一个 30 秒反应力挑战小游戏：

玩法很简单：

  • 页面里随机出现一个黄色圆点
  • 点中一次加 1 分
  • 每局 30 秒
  • 时间结束显示最终分数
  • 可以重新开始

这个 Demo 不复杂，但刚好覆盖了前端小游戏最常见的几个点：DOM 操作、状态管理、倒计时、随机位置、移动端适配。

一、为什么前端开发者要关注 AI Agent

以前我们用 ChatGPT 写代码，常见方式是：

1

2

3

帮我写一个按钮组件。

帮我解释这段 JS。

帮我优化一下 CSS。

这类用法当然有帮助，但它更像“问一句，答一句”。

AI Agent 更像一个能持续推进任务的开发助手。你给它一个目标，它会尝试拆步骤、写代码、检查问题、继续迭代。

简单说：

对比项 普通 ChatGPT AI Agent
工作方式 一问一答 围绕目标连续推进
适合任务 解释代码、生成片段 做 Demo、修 bug、整理项目
输出结果 偏答案 偏可交付成果
前端场景 写一个函数 做一个能玩的小游戏

如果再结合 MCP 这类协议，AI 工具还能接入更多上下文，比如项目文件、文档、浏览器、数据库等。对前端来说，这意味着以后很多“从想法到 Demo”的过程会明显变快。

二、给 AI Agent 的提示词怎么写

很多人觉得 AI 写代码不好用，问题往往不是 AI 不行，而是需求太模糊。

不推荐这样写：

1

帮我写一个小游戏。

更推荐这样写：

1

2

3

4

5

6

7

8

9

10

11

请用 HTML、CSS、JavaScript 写一个单文件前端小游戏。

游戏名：反应力挑战

功能要求：

1. 页面中随机出现一个黄色圆点

2. 玩家点击圆点得分

3. 游戏总时长 30 秒

4. 页面显示当前分数和剩余时间

5. 时间结束后显示最终分数

6. 支持重新开始

7. 适配手机端

8. 所有代码写在一个 index.html 中，方便直接复制运行

这个提示词的关键是：技术栈、交付形式、规则、状态、体验要求都说清楚了。

AI Agent 最怕“你也不知道自己要什么”。需求越清楚，生成结果越接近可用 Demo。

三、完整代码：复制就能跑

新建一个 index.html 文件，把下面代码复制进去，用浏览器打开即可。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

<!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. 游戏状态

1

2

3

4

let score = 0;

let timeLeft = 30;

let timer = null;

let playing = false;

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

2. 随机位置

1

2

const x = random(padding, boardRect.width - padding);

const y = random(padding, boardRect.height - padding);

这里加了 padding，是为了避免圆点贴边导致不好点。
这个细节很小，但会明显影响游戏体验。

3. 重新开始

1

2

3

4

5

clearInterval(timer);

timer = setInterval(() => {

  timeLeft -= 1;

  timeEl.textContent = timeLeft;

}, 1000);

重新开始前先清掉旧定时器，否则多点几次开始按钮，倒计时可能会加速。
这类小 bug，正是让 AI Agent 反复检查时很容易发现的点。

五、让文章更有收藏价值：继续让 AI 优化

第一版能跑之后，可以继续给 AI Agent 下第二轮任务：

1

2

3

4

5

6

7

请基于当前小游戏继续优化：

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”的速度拉快很多。

这篇文章我们用一个反应力小游戏跑了一遍完整流程：

1

写清需求 -> 生成代码 -> 浏览器运行 -> 检查问题 -> 继续优化

如果你是前端初学者，可以从这种小游戏开始练习；如果你已经有项目经验，也可以把 AI Agent 当作项目原型工具。

技术一直在变，但核心能力没变：看懂需求、判断代码、优化体验。AI 会让写代码更快，而真正拉开差距的，还是你对细节的把控。

发布小建议

  • 封面图可以用本文第一张图
  • 标题可选：2026 前端新玩法：用 AI Agent 做一个能运行的小游戏
  • 标签建议：AI Agent、前端、JavaScript、小游戏、ChatGPT
版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计