先给结论。这次我们看一个比较有节目效果的 AI 编程实践:5 分钟,用 CodeUI 这类 AI 编程工具,直接生成一个在浏览器里就能玩的割草游戏,整体花费按公开口径只要 0.2 元左右。如果你还在犹豫 AI 编程到底能不能干正事,这个案例就是很好的切入点:需求足够具体、玩法边界清晰、生成结果能立刻运行验证,而且成本低到可以忽略。文章会按这条线展开先分析为什么割草游戏适合 AI 写;再给你一套可以直接复制的提示词模板;接着完整跑一遍需求描述 → 生成代码 → 本地运行 → 反馈修复的 5 分钟流程;然后把游戏核心代码拆开看;最后算一算 0.2 元成本花在哪,以及怎么用接口做批量迭代。看完你不仅能复刻这个项目,还能把同一套思路搬到其他小游戏、小工具的开发上。1. 核心能力速览项目说明产品定位CodeUI 属于 AI 编程工具通过自然语言对话生成、修改、调试代码本案例目标5 分钟内做出一个可玩的 2D 割草风格游戏 demo综合成本0.2 元左右按公开案例口径与模型计费和 token 消耗有关技术方案HTML5 Canvas JavaScript单 HTML 文件运行运行环境浏览器即可无需 GPU普通电脑可跑核心能力需求理解、代码生成、Bug 修复、功能迭代启动方式打开 HTML 文件或用本地静态服务访问是否需要 API不必须对话式生成即可也可通过 API 做批量迭代批量任务支持可通过脚本循环调用 API按不同配置生成多个版本适合读者想低成本体验 AI 编程的开发者、独立游戏爱好者、技术博主2. 为什么是割草游戏玩法边界足够清晰割草游戏是当前独立游戏圈非常流行的类型玩家控制一个角色在有限地图中移动怪物从四面八方刷出来玩家通过自动或手动攻击持续清怪。代表作有《吸血鬼幸存者》《土豆兄弟》这类 Rougelike 生存玩法。它的核心机制其实非常统一移动、攻击、敌人生成、碰撞扣血、击杀收集经验、升级强化。这类游戏恰恰是 AI 编程最容易一次做出来的类型。原因有三点。第一核心规则少。玩家行为只有移动和攻击怪物的行为只有靠近和碰撞规则闭环非常短AI 不需要理解复杂的系统交互。第二渲染要求低。2D 小游戏只需要 Canvas 画圆、画方块、画简单粒子效果不需要加载外部美术资源AI 生成代码时不需要依赖素材文件。第三可验证性高。只要打开浏览器就能立刻知道游戏能不能跑、手感如何反馈周期短AI 修 bug 的效率也高。所以这个项目的本质不是做出一个能上架 Steam 的游戏而是验证一个非常实际的问题在明确需求、合理拆分的情况下AI 编程工具能不能用几分钟生成一款能玩的游戏。答案从公开案例看是肯定的。3. 环境准备与 AI 编程工具选择3.1 对电脑的硬件要求先说最关心的这个项目不需要 GPU不需要本地大模型不需要装 ComfyUI 这类重型环境。它就是一次 AI 对话式编程生成的是纯前端页面所以一台能开浏览器的电脑就够用。Windows、macOS、Linux 都可以。唯一的区别是本地服务启动方式。Windows 可以用 Bat 脚本或 PowerShellmacOS/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 改一次敌人数量改一次子弹速度再改一次颜色每次都要把整个文件重新输出成本自然上去。正确做法是操作是否消耗大量 token建议第一次生成完整代码是提示词尽量一次讲清全部需求只改某个参数是因为要重出代码尽量一次性列出所有问题追加新功能是先规划再动手减少追加次数复制代码到本地否直接把返回结果保存为文件让 AI 解释代码一般对 demo 项目不需要跳过7.3 省钱要点第一优先选择便宜模型或免费额度不用一上来就用旗舰模型。第二代码保存后不要重复粘贴整个代码让 AI 改可以只描述改动点。第三生成的初始版本只要可运行就先跑不要纠结美术细节。第四批量迭代时把不同参数组合写进脚本一次请求生成一个版本而不是在同一个对话里来回改。8. 接口与批量迭代用 API 做多版本测试如果你只想做一次游戏 demo不需要接口。但如果你想测试不同刷怪速度、不同弹幕密度、不同升级方案的效果手动在对话里来回改会非常低效。这时可以用接口方式批量生成多个版本。这里给一个通用调用示例实际使用时需要替换为你所用 AI 服务的 base_url、model 和 api_key。各平台接口规则不同请以官方文档为准。import openai client openai.OpenAI( api_keyyour_api_key, base_urlyour_provider_base_url # 按实际服务商替换 ) prompt 请用 HTML5 Canvas 写一个割草游戏。 玩家 WASD 移动自动向最近敌人射击。 敌人从四边生成击杀后得分。 写在一个 index.html 文件中。 resp client.chat.completions.create( modelyour_model_name, messages[ {role: system, content: 你是资深游戏开发工程师只输出 HTML 代码。}, {role: user, content: prompt} ], temperature0.7 ) code resp.choices[0].message.content with open(index.html, w, encodingutf-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]} 第 {attempt1} 次失败: {e}) time.sleep(2)9. 效果验证与功能扩展方向9.1 验证清单游戏生成后不要只看能打开就认为完工。建议按下面清单验证一遍验证项判断标准页面打开无白屏无控制台报错玩家移动WASD 四个方向都能移动且不超出边界攻击系统角色自动朝最近敌人发射子弹冷却生效敌人生成敌人从四个方向持续刷新数量随时间增加碰撞扣血玩家碰到敌人血量下降血量归零触发结算击杀得分敌人死亡有分数变化有粒子反馈升级系统拾取经验后弹出强化选择选择后生效长时间运行连续运行 5 分钟帧率无明显下降如果前几项失败把对应现象和期望发给 AI 修复。如果长时间运行卡顿先看敌人数量是否无限增加这是最常见的问题。9.2 扩展方向割草游戏的扩展空间非常大。做完基础版之后可以继续让 AI 加入这些功能武器进化、元素技能、Boss 战、无尽波次、音效、移动端触屏操作、存档与排行榜。每加一个功能建议单独生成一轮修改并把改动点描述清楚。这也能帮你继续验证 AI 编程在长任务里的稳定性。10. 常见问题与排查方法问题现象可能原因排查方式解决方案页面白屏代码语法错误或 Canvas 初始化失败按 F12 打开控制台看报错把完整报错信息发给 AI 修复角色不能移动键盘事件监听未绑定检查代码是否有 addEventListener让 AI 补上 keydown/keyup 监听敌人不刷新刷怪逻辑未调用或计时器未启动检查 update 循环里是否调用 updateSpawn把 update 函数贴给 AI 查看子弹没有效果碰撞检测半径过小检查碰撞判定条件调大 radiusSum 或补打日志卡顿严重敌人或子弹数量无限增长查看 enemies.length 和 bullets.length给敌人数量设置上限或加清理逻辑代码保存后打不开文件编码或后缀错误确认文件是 UTF-8 编码且后缀为 html重新从工具导出完整代码本地服务端口被占用8080 已被其他项目使用换一个端口启动时指定 8090 或其他空闲端口11. 合规使用提醒这个玩法本身没有问题但有几点需要提醒。第一AI 生成的代码版权归属以你使用的工具协议为准如果要商业化分发建议先确认服务条款。第二游戏的美术、音效、字体素材不要随便从网上下载优先使用开源或无版权素材避免侵权。第三不要把游戏部署到公网后开着高权限后台纯静态页面直接托管即可不需要服务器执行环境。第四如果后续接入多人联机、用户账号或排行榜需要考虑隐私和数据安全不能裸奔上线。12. 总结这个项目的价值不在于游戏本身多好玩而在于把 AI 编程的成本和效率看得非常清楚。不用 GPU不用复杂环境一个浏览器、一个对话窗口、几分钱就能完成一个完整可玩的小游戏 demo。最值得先验证的就是5 分钟跑通第一版这个链路提示词写清楚、本地服务跑起来、发现问题直接丢给 AI 修。最容易踩的坑是反复让 AI 改小参数token 费用悄悄涨上去。后续如果你有兴致可以把它扩展成带武器进化、Boss 关卡的完整版本或者把同一套流程拿去生成答题工具、简历页面、数据可视化看板。这种低成本快速试错的开发方式比单纯定义一个工具好用不少至少它真的能出结果。
5分钟用CodeUI生成割草游戏：AI编程低成本快速开发实践
先给结论。这次我们看一个比较有节目效果的 AI 编程实践:5 分钟,用 CodeUI 这类 AI 编程工具,直接生成一个在浏览器里就能玩的割草游戏,整体花费按公开口径只要 0.2 元左右。如果你还在犹豫 AI 编程到底能不能干正事,这个案例就是很好的切入点:需求足够具体、玩法边界清晰、生成结果能立刻运行验证,而且成本低到可以忽略。文章会按这条线展开先分析为什么割草游戏适合 AI 写;再给你一套可以直接复制的提示词模板;接着完整跑一遍需求描述 → 生成代码 → 本地运行 → 反馈修复的 5 分钟流程;然后把游戏核心代码拆开看;最后算一算 0.2 元成本花在哪,以及怎么用接口做批量迭代。看完你不仅能复刻这个项目,还能把同一套思路搬到其他小游戏、小工具的开发上。1. 核心能力速览项目说明产品定位CodeUI 属于 AI 编程工具通过自然语言对话生成、修改、调试代码本案例目标5 分钟内做出一个可玩的 2D 割草风格游戏 demo综合成本0.2 元左右按公开案例口径与模型计费和 token 消耗有关技术方案HTML5 Canvas JavaScript单 HTML 文件运行运行环境浏览器即可无需 GPU普通电脑可跑核心能力需求理解、代码生成、Bug 修复、功能迭代启动方式打开 HTML 文件或用本地静态服务访问是否需要 API不必须对话式生成即可也可通过 API 做批量迭代批量任务支持可通过脚本循环调用 API按不同配置生成多个版本适合读者想低成本体验 AI 编程的开发者、独立游戏爱好者、技术博主2. 为什么是割草游戏玩法边界足够清晰割草游戏是当前独立游戏圈非常流行的类型玩家控制一个角色在有限地图中移动怪物从四面八方刷出来玩家通过自动或手动攻击持续清怪。代表作有《吸血鬼幸存者》《土豆兄弟》这类 Rougelike 生存玩法。它的核心机制其实非常统一移动、攻击、敌人生成、碰撞扣血、击杀收集经验、升级强化。这类游戏恰恰是 AI 编程最容易一次做出来的类型。原因有三点。第一核心规则少。玩家行为只有移动和攻击怪物的行为只有靠近和碰撞规则闭环非常短AI 不需要理解复杂的系统交互。第二渲染要求低。2D 小游戏只需要 Canvas 画圆、画方块、画简单粒子效果不需要加载外部美术资源AI 生成代码时不需要依赖素材文件。第三可验证性高。只要打开浏览器就能立刻知道游戏能不能跑、手感如何反馈周期短AI 修 bug 的效率也高。所以这个项目的本质不是做出一个能上架 Steam 的游戏而是验证一个非常实际的问题在明确需求、合理拆分的情况下AI 编程工具能不能用几分钟生成一款能玩的游戏。答案从公开案例看是肯定的。3. 环境准备与 AI 编程工具选择3.1 对电脑的硬件要求先说最关心的这个项目不需要 GPU不需要本地大模型不需要装 ComfyUI 这类重型环境。它就是一次 AI 对话式编程生成的是纯前端页面所以一台能开浏览器的电脑就够用。Windows、macOS、Linux 都可以。唯一的区别是本地服务启动方式。Windows 可以用 Bat 脚本或 PowerShellmacOS/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 改一次敌人数量改一次子弹速度再改一次颜色每次都要把整个文件重新输出成本自然上去。正确做法是操作是否消耗大量 token建议第一次生成完整代码是提示词尽量一次讲清全部需求只改某个参数是因为要重出代码尽量一次性列出所有问题追加新功能是先规划再动手减少追加次数复制代码到本地否直接把返回结果保存为文件让 AI 解释代码一般对 demo 项目不需要跳过7.3 省钱要点第一优先选择便宜模型或免费额度不用一上来就用旗舰模型。第二代码保存后不要重复粘贴整个代码让 AI 改可以只描述改动点。第三生成的初始版本只要可运行就先跑不要纠结美术细节。第四批量迭代时把不同参数组合写进脚本一次请求生成一个版本而不是在同一个对话里来回改。8. 接口与批量迭代用 API 做多版本测试如果你只想做一次游戏 demo不需要接口。但如果你想测试不同刷怪速度、不同弹幕密度、不同升级方案的效果手动在对话里来回改会非常低效。这时可以用接口方式批量生成多个版本。这里给一个通用调用示例实际使用时需要替换为你所用 AI 服务的 base_url、model 和 api_key。各平台接口规则不同请以官方文档为准。import openai client openai.OpenAI( api_keyyour_api_key, base_urlyour_provider_base_url # 按实际服务商替换 ) prompt 请用 HTML5 Canvas 写一个割草游戏。 玩家 WASD 移动自动向最近敌人射击。 敌人从四边生成击杀后得分。 写在一个 index.html 文件中。 resp client.chat.completions.create( modelyour_model_name, messages[ {role: system, content: 你是资深游戏开发工程师只输出 HTML 代码。}, {role: user, content: prompt} ], temperature0.7 ) code resp.choices[0].message.content with open(index.html, w, encodingutf-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]} 第 {attempt1} 次失败: {e}) time.sleep(2)9. 效果验证与功能扩展方向9.1 验证清单游戏生成后不要只看能打开就认为完工。建议按下面清单验证一遍验证项判断标准页面打开无白屏无控制台报错玩家移动WASD 四个方向都能移动且不超出边界攻击系统角色自动朝最近敌人发射子弹冷却生效敌人生成敌人从四个方向持续刷新数量随时间增加碰撞扣血玩家碰到敌人血量下降血量归零触发结算击杀得分敌人死亡有分数变化有粒子反馈升级系统拾取经验后弹出强化选择选择后生效长时间运行连续运行 5 分钟帧率无明显下降如果前几项失败把对应现象和期望发给 AI 修复。如果长时间运行卡顿先看敌人数量是否无限增加这是最常见的问题。9.2 扩展方向割草游戏的扩展空间非常大。做完基础版之后可以继续让 AI 加入这些功能武器进化、元素技能、Boss 战、无尽波次、音效、移动端触屏操作、存档与排行榜。每加一个功能建议单独生成一轮修改并把改动点描述清楚。这也能帮你继续验证 AI 编程在长任务里的稳定性。10. 常见问题与排查方法问题现象可能原因排查方式解决方案页面白屏代码语法错误或 Canvas 初始化失败按 F12 打开控制台看报错把完整报错信息发给 AI 修复角色不能移动键盘事件监听未绑定检查代码是否有 addEventListener让 AI 补上 keydown/keyup 监听敌人不刷新刷怪逻辑未调用或计时器未启动检查 update 循环里是否调用 updateSpawn把 update 函数贴给 AI 查看子弹没有效果碰撞检测半径过小检查碰撞判定条件调大 radiusSum 或补打日志卡顿严重敌人或子弹数量无限增长查看 enemies.length 和 bullets.length给敌人数量设置上限或加清理逻辑代码保存后打不开文件编码或后缀错误确认文件是 UTF-8 编码且后缀为 html重新从工具导出完整代码本地服务端口被占用8080 已被其他项目使用换一个端口启动时指定 8090 或其他空闲端口11. 合规使用提醒这个玩法本身没有问题但有几点需要提醒。第一AI 生成的代码版权归属以你使用的工具协议为准如果要商业化分发建议先确认服务条款。第二游戏的美术、音效、字体素材不要随便从网上下载优先使用开源或无版权素材避免侵权。第三不要把游戏部署到公网后开着高权限后台纯静态页面直接托管即可不需要服务器执行环境。第四如果后续接入多人联机、用户账号或排行榜需要考虑隐私和数据安全不能裸奔上线。12. 总结这个项目的价值不在于游戏本身多好玩而在于把 AI 编程的成本和效率看得非常清楚。不用 GPU不用复杂环境一个浏览器、一个对话窗口、几分钱就能完成一个完整可玩的小游戏 demo。最值得先验证的就是5 分钟跑通第一版这个链路提示词写清楚、本地服务跑起来、发现问题直接丢给 AI 修。最容易踩的坑是反复让 AI 改小参数token 费用悄悄涨上去。后续如果你有兴致可以把它扩展成带武器进化、Boss 关卡的完整版本或者把同一套流程拿去生成答题工具、简历页面、数据可视化看板。这种低成本快速试错的开发方式比单纯定义一个工具好用不少至少它真的能出结果。
