企业官网建设流程全解析

先给结论。

这次我们看一个比较有节目效果的 AI 编程实践:5 分钟,用 CodeUI 这类 AI 编程工具,直接生成一个在浏览器里就能玩的割草游戏,整体花费按公开口径只要 0.2 元左右。如果你还在犹豫 AI 编程到底能不能干正事,这个案例就是很好的切入点:需求足够具体、玩法边界清晰、生成结果能立刻运行验证,而且成本低到可以忽略。

文章会按这条线展开：先分析为什么割草游戏适合 AI 写;再给你一套可以直接复制的提示词模板;接着完整跑一遍"需求描述 → 生成代码 → 本地运行 → 反馈修复"的 5 分钟流程;然后把游戏核心代码拆开看;最后算一算 0.2 元成本花在哪,以及怎么用接口做批量迭代。看完你不仅能复刻这个项目,还能把同一套思路搬到其他小游戏、小工具的开发上。

1. 核心能力速览

2. 为什么是割草游戏：玩法边界足够清晰

割草游戏是当前独立游戏圈非常流行的类型，玩家控制一个角色在有限地图中移动，怪物从四面八方刷出来，玩家通过自动或手动攻击持续清怪。代表作有《吸血鬼幸存者》《土豆兄弟》这类 Rougelike 生存玩法。它的核心机制其实非常统一：移动、攻击、敌人生成、碰撞扣血、击杀收集经验、升级强化。

这类游戏恰恰是 AI 编程最容易一次做出来的类型。原因有三点。

第一，核心规则少。玩家行为只有移动和攻击，怪物的行为只有靠近和碰撞，规则闭环非常短，AI 不需要理解复杂的系统交互。第二，渲染要求低。2D 小游戏只需要 Canvas 画圆、画方块、画简单粒子效果，不需要加载外部美术资源，AI 生成代码时不需要依赖素材文件。第三，可验证性高。只要打开浏览器，就能立刻知道游戏能不能跑、手感如何，反馈周期短，AI 修 bug 的效率也高。

所以这个项目的本质不是"做出一个能上架 Steam 的游戏"，而是验证一个非常实际的问题：在明确需求、合理拆分的情况下，AI 编程工具能不能用几分钟生成一款能玩的游戏。答案从公开案例看是肯定的。

3. 环境准备与 AI 编程工具选择

3.1 对电脑的硬件要求

先说最关心的：这个项目不需要 GPU，不需要本地大模型，不需要装 ComfyUI 这类重型环境。它就是一次 AI 对话式编程，生成的是纯前端页面，所以一台能开浏览器的电脑就够用。Windows、macOS、Linux 都可以。

唯一的区别是本地服务启动方式。Windows 可以用 Bat 脚本或 PowerShell，macOS/Linux 直接终端执行命令。这里涉及的开销主要是聊天记号和网络请求，不吃本地显存，也不吃 CPU 计算。

3.2 工具与账号准备

你需要的核心工具就是一款 AI 编程工具。CodeUI 是这类工具的其中一种，市面上还有 Cursor、Windsurf、Trae、Codex 等。无论用哪一款，需要确认三件事：是否支持网页版或客户端模式；对话是否支持代码文件生成；模型用量计费是否在可接受范围。

如果只是做一个单 HTML 的割草游戏，建议优先用新用户赠送的免费额度或便宜模型，成本会更低。这里说的 0.2 元，前提就是选用了按 token 计价的模型，并且整个开发过程控制在几次生成和修复以内。

3.3 工作目录准备

建议单独建一个项目文件夹，避免生成的代码和其他文件混在一起。比如：

mkdir ai-mower-game cd ai-mower-game

后面 AI 生成的内容直接保存为index.html。这个文件是纯静态页面，浏览器直接双击也能打开。更稳的方式是用本地静态服务，后面会讲到。

4. 提示词设计：让 AI 一次生成可运行版本

AI 编程能不能跑通，一半取决于提示词。这里不是聊"怎么说人话"，而是聊怎么把游戏需求拆成 AI 能理解的功能点。下面这份提示词模板，你直接复制到 CodeUI 或同类工具里就能用。

请用 HTML5 + JavaScript + Canvas 写一个 2D 割草风格小游戏。 要求： 1. 玩家用 WASD 移动，角色朝向鼠标指针。 2. 玩家自动向最近的敌人发射弹幕，弹幕初始间隔 0.5 秒。 3. 敌人从屏幕四边不断生成并朝玩家移动，敌人数量随时间增加。 4. 玩家碰到敌人扣血，血量归零游戏结束并显示得分。 5. 敌人被击杀后有概率掉落经验道具，拾取经验可升级。 6. 升级时弹出 3 个随机强化选项，玩家点击选择 1 个。 7. 左上角显示分数、等级、血量，开始画面显示游戏标题和操作说明。 8. 整个游戏写在一个 index.html 文件中，包含必要的 CSS，界面要简洁好看。 9. 代码中关键部分写中文注释。

这份提示词的关键不是长，而是把功能边界说清楚。AI 不需要理解"割草游戏"这个抽象词，它需要知道：玩家怎么动、攻击怎么发、敌人怎么刷、死亡条件是什么、升级怎么做。

如果你希望 AI 更稳定地输出，可以在提示词后面再加一句"请先输出完整代码，不要输出解释"，避免大段文字混进代码块。

5. 5 分钟开发流程实操

以下是一套可以照做的流程，时间分配按 5 分钟设计。你不需要每一步都卡得很死，但如果第一次做，建议先按这个顺序走。

5.1 第 1 分钟：提需求

把上一节的提示词粘贴进 CodeUI 对话窗口。这个阶段不用补充太多背景，直接发需求。工具会基于当前模型能力生成一段完整的 HTML 页面代码。如果你用的工具支持文件写入，可以直接让它生成index.html并保存到项目文件夹。

5.2 第 2 分钟：生成首个版本

AI 返回代码后，先确认三件事：代码块是否完整、有没有明显的占位符、是否包含 Canvas 初始化逻辑。大多数情况下，AI 第一次生成的版本就可以运行，能移动角色、敌人会刷、子弹能打出去。不要指望第一版就是最终版，这个阶段的目标是"能打开、能操作"。

5.3 第 3 分钟：本地运行验证

在项目目录下启动一个静态服务，然后在浏览器里打开页面。

# 在 ai-mower-game 目录下执行 python -m http.server 8080

浏览器访问：

http://localhost:8080

如果看到游戏标题、按 WASD 能移动角色、敌人开始出现，说明首个版本已经通了。这个步骤是整个流程里最重要的验证点。如果页面白屏，优先打开浏览器控制台看报错，然后把报错信息直接粘贴给 AI，让它修复。

5.4 第 4 分钟：反馈修复

第一版的问题通常集中在几个点：角色移动手感差、敌人刷得太快、子弹没有视觉效果、升级选项没有弹窗。不要自己动手改代码，把这些具体问题用"问题 + 期望效果"的格式发给 AI。

例如：

当前问题： 1. 敌人生成太快，30 秒后数量太多，画面很卡。 2. 子弹没有打击反馈，击杀敌人时应该出现粒子特效。 3. 升级弹窗只在界面右上角出现，容易被忽略。 期望效果： 1. 敌人刷新间隔从 1 秒开始，每 10 秒减少 0.05 秒，最低间隔 0.3 秒。 2. 击杀敌人时在死亡位置产生 6 个白色粒子，0.3 秒后消失。 3. 升级弹窗显示在屏幕中央，并暂停游戏等待选择。

AI 会基于你的反馈修改代码。每一轮修复都会消耗 token，所以建议把同类问题一次性合并，不要想到一个说一个。这也是 0.2 元成本能守住的关键。先让 AI 生成完整版，再一次性提问题、批量改，成本会低很多。

5.5 第 5 分钟：保存与发布准备

修复完成后，最终把index.html保存下来。如果你只打算本地运行，这一步已经结束了。如果你想分享给别人，可以把整个项目目录压缩，或者部署到支持静态页面的托管平台。由于游戏没有任何后端接口，部署很简单，本质上就是把一个 HTML 文件放到静态服务器上。

6. 游戏核心代码：三大关键模块拆解

这一节我们把 AI 生成的游戏核心逻辑拆开看。以 HTML5 Canvas 方案为例，主要包含三个模块。理解这些代码后，你自己也能手动调参，不依赖 AI 也能定位问题。

6.1 玩家移动与自动攻击

玩家的核心行为是 WASD 移动，以及自动向最近敌人发射弹幕。代码可以这样组织：

const player = { x: 400, y: 300, hp: 100, speed: 4, atkCooldown: 0, atkInterval: 30 }; const keys = {}; document.addEventListener('keydown', e => keys[e.code] = true); document.addEventListener('keyup', e => keys[e.code] = false); function updatePlayer() { if (keys['KeyW'] || keys['ArrowUp']) player.y -= player.speed; if (keys['KeyS'] || keys['ArrowDown']) player.y += player.speed; if (keys['KeyA'] || keys['ArrowLeft']) player.x -= player.speed; if (keys['KeyD'] || keys['ArrowRight']) player.x += player.speed; player.x = Math.max(20, Math.min(canvas.width - 20, player.x)); player.y = Math.max(20, Math.min(canvas.height - 20, player.y)); if (player.atkCooldown > 0) { player.atkCooldown--; } }

自动攻击的难点是找最近的敌人。每帧遍历敌人数组，计算距离，然后记录最近目标。如果目标存在且冷却结束，就生成一发朝向目标的子弹。

function findNearestEnemy() { let nearest = null; let minDist = Infinity; for (const enemy of enemies) { const dx = enemy.x - player.x; const dy = enemy.y - player.y; const dist = Math.sqrt(dx * dx + dy * dy); if (dist < minDist) { minDist = dist; nearest = enemy; } } return nearest; } function tryAttack() { if (player.atkCooldown > 0) return; const target = findNearestEnemy(); if (!target) return; const angle = Math.atan2(target.y - player.y, target.x - player.x); bullets.push({ x: player.x, y: player.y, vx: Math.cos(angle) * 6, vy: Math.sin(angle) * 6, damage: 1 }); player.atkCooldown = player.atkInterval; }

这段逻辑的重点是把"攻击频率控制"和"子弹方向计算"分开，后面做强化升级时，可以直接修改atkInterval，让玩家点一个升级项就减少冷却。

6.2 敌人波次生成

割草游戏的敌人刷法，核心是"间隔递减"。不能一次性生成太多，也不能生成太慢，否则体验都不好。建议用一个计时器控制刷怪间隔，同时用变量保存当前间隔和最小间隔。

let spawnTimer = 0; let spawnInterval = 60; // 帧数，约 1 秒 const minSpawnInterval = 20; // 约 0.33 秒 function spawnEnemy() { const side = Math.floor(Math.random() * 4); const enemy = { x: 0, y: 0, hp: 3, speed: 1.2, radius: 12 }; if (side === 0) { // 上 enemy.x = Math.random() * canvas.width; enemy.y = -20; } else if (side === 1) { // 下 enemy.x = Math.random() * canvas.width; enemy.y = canvas.height + 20; } else if (side === 2) { // 左 enemy.x = -20; enemy.y = Math.random() * canvas.height; } else { // 右 enemy.x = canvas.width + 20; enemy.y = Math.random() * canvas.height; } enemies.push(enemy); } function updateSpawn() { if (spawnTimer > 0) { spawnTimer--; return; } spawnEnemy(); spawnTimer = spawnInterval; if (spawnInterval > minSpawnInterval) { spawnInterval -= 0.5; } }

这里把刷怪逻辑独立成函数，后续做"精英怪""Boss 怪"时，可以直接在spawnEnemy里按概率分支。比如 10% 概率生成一个体型更大、血量 10 倍的精英怪。

6.3 碰撞检测与击杀反馈

碰撞检测用最基础的距离判断，子弹和敌人是圆形，玩家和敌人也可以看成圆形。核心公式是勾股定理求距离，然后判断是否小于碰撞半径之和。

function checkCollision(a, b, radiusSum) { const dx = a.x - b.x; const dy = a.y - b.y; return dx * dx + dy * dy < radiusSum * radiusSum; } function updateHitAndKill() { for (let i = bullets.length - 1; i >= 0; i--) { const bullet = bullets[i]; let hit = false; for (let j = enemies.length - 1; j >= 0; j--) { const enemy = enemies[j]; if (checkCollision(bullet, enemy, bullet.radius + enemy.radius)) { enemy.hp -= bullet.damage; hit = true; if (enemy.hp <= 0) { spawnParticle(enemy.x, enemy.y, 6); score += 10; enemies.splice(j, 1); } break; } } if (hit) bullets.splice(i, 1); } // 玩家与敌人碰撞扣血 for (let j = enemies.length - 1; j >= 0; j--) { const enemy = enemies[j]; if (checkCollision(player, enemy, player.radius + enemy.radius)) { player.hp -= 15; enemies.splice(j, 1); if (player.hp <= 0) { gameOver(); } } } }

这个模块的优化空间很大。比如大量子弹和大量敌人做双重遍历时，如果数量上到几百，性能就会下降。可以加一个空间网格或减少碰撞检测频率，但在 demo 阶段，先把逻辑跑通更重要。性能优化可以作为后续单独的话题。

7. 成本核算：0.2 元是怎么花出来的

先说清楚，0.2 元不是所有场景的固定价格，而是这个案例在公开材料里的一个口径。真实费用取决于你选的模型价格、生成次数和上下文长度。但 0.2 元能做完一个游戏 demo，在现在的模型计价下是合理的。

7.1 成本构成

对话式 AI 编程的计费核心是 token。一次生成代码的请求，输入提示词可能只有 300 到 500 个 token，输出代码可能 1000 到 2000 个 token，一次请求总计 2000 个 token 左右。如果模型单价是每百万 token 几块钱，那一次生成成本只有几分钱。整个流程如果控制在 3 到 5 次对话内，总成本确实可以压到 0.2 元左右。

7.2 哪些操作最消耗 token

最容易超支的是反复修改而不合并问题。你让 AI 改一次敌人数量，改一次子弹速度，再改一次颜色，每次都要把整个文件重新输出，成本自然上去。正确做法是：

7.3 省钱要点

第一，优先选择便宜模型或免费额度，不用一上来就用旗舰模型。第二，代码保存后，不要重复粘贴整个代码让 AI 改，可以只描述改动点。第三，生成的初始版本只要可运行就先跑，不要纠结美术细节。第四，批量迭代时，把不同参数组合写进脚本，一次请求生成一个版本，而不是在同一个对话里来回改。

8. 接口与批量迭代：用 API 做多版本测试

如果你只想做一次游戏 demo，不需要接口。但如果你想测试不同刷怪速度、不同弹幕密度、不同升级方案的效果，手动在对话里来回改会非常低效。这时可以用接口方式批量生成多个版本。

这里给一个通用调用示例，实际使用时需要替换为你所用 AI 服务的 base_url、model 和 api_key。各平台接口规则不同，请以官方文档为准。

import openai client = openai.OpenAI( api_key="your_api_key", base_url="your_provider_base_url" # 按实际服务商替换 ) prompt = """请用 HTML5 + Canvas 写一个割草游戏。 玩家 WASD 移动，自动向最近敌人射击。 敌人从四边生成，击杀后得分。 写在一个 index.html 文件中。""" resp = client.chat.completions.create( model="your_model_name", messages=[ {"role": "system", "content": "你是资深游戏开发工程师，只输出 HTML 代码。"}, {"role": "user", "content": prompt} ], temperature=0.7 ) code = resp.choices[0].message.content with open("index.html", "w", encoding="utf-8") as f: f.write(code)

如果你要做批量版本，可以把参数变化放进一个配置列表，循环请求：

configs = [ {"name": "fast_spawn", "spawn_interval": 30, "enemy_speed": 1.5}, {"name": "tank_enemy", "spawn_interval": 80, "enemy_hp": 8}, {"name": "rapid_fire", "atk_interval": 12, "bullet_speed": 8}, ] for cfg in configs: prompt_with_cfg = prompt + "\n" + f"玩家攻速间隔为 {cfg['atk_interval']} 帧，敌人刷新间隔为 {cfg['spawn_interval']} 帧，敌人血量为 {cfg['enemy_hp']}。" # 调用接口生成并保存为 f"{cfg['name']}.html"

批量任务需要关注两个问题。一个是限流，不要一次性并发太多请求，建议加一个短暂 sleep 或使用线程池控制并发。另一个是失败重试，接口返回异常时，记录错误日志并重试，不要直接中断整个批次。

import time for cfg in configs: for attempt in range(3): try: resp = client.chat.completions.create(...) # 保存文件 break except Exception as e: print(f"{cfg['name']} 第 {attempt+1} 次失败: {e}") time.sleep(2)

9. 效果验证与功能扩展方向

9.1 验证清单

游戏生成后，不要只看"能打开"就认为完工。建议按下面清单验证一遍：

如果前几项失败，把对应现象和期望发给 AI 修复。如果长时间运行卡顿，先看敌人数量是否无限增加，这是最常见的问题。

9.2 扩展方向

割草游戏的扩展空间非常大。做完基础版之后，可以继续让 AI 加入这些功能：武器进化、元素技能、Boss 战、无尽波次、音效、移动端触屏操作、存档与排行榜。每加一个功能，建议单独生成一轮修改，并把改动点描述清楚。这也能帮你继续验证 AI 编程在长任务里的稳定性。

10. 常见问题与排查方法

11. 合规使用提醒

这个玩法本身没有问题，但有几点需要提醒。第一，AI 生成的代码版权归属以你使用的工具协议为准，如果要商业化分发，建议先确认服务条款。第二，游戏的美术、音效、字体素材不要随便从网上下载，优先使用开源或无版权素材，避免侵权。第三，不要把游戏部署到公网后开着高权限后台，纯静态页面直接托管即可，不需要服务器执行环境。第四，如果后续接入多人联机、用户账号或排行榜，需要考虑隐私和数据安全，不能裸奔上线。

12. 总结

这个项目的价值不在于游戏本身多好玩，而在于把 AI 编程的成本和效率看得非常清楚。不用 GPU，不用复杂环境，一个浏览器、一个对话窗口、几分钱，就能完成一个完整可玩的小游戏 demo。

最值得先验证的就是"5 分钟跑通第一版"这个链路：提示词写清楚、本地服务跑起来、发现问题直接丢给 AI 修。最容易踩的坑是反复让 AI 改小参数，token 费用悄悄涨上去。后续如果你有兴致，可以把它扩展成带武器进化、Boss 关卡的完整版本，或者把同一套流程拿去生成答题工具、简历页面、数据可视化看板。

这种"低成本快速试错"的开发方式，比单纯定义一个工具好用不少，至少它真的能出结果。