🙋‍♂️挑战用1天,让AI从0到1搭建纯前端 "塔防游戏"

1. 引言

😄 最近活不多,又想捣鼓点什么消磨下摸🐟时间,之前用 Trae+Coze+掘金MCP 做了三个小工具:

《Coze+Trae+掘金MCP = "✨掘金微热榜"》

《【Trae + 掘金MCP】不写代码,靠嘴遁花0.5h定制公号排版工具》

《👀Trae + 掘金MCP = 裸眼3D文字海报生成器》

🤔 只让AI干这点活,总感觉有点大材小用了,看着 Trae 剩下这么多的请求额度:

🙋‍♂️ 我决定 搞波大的 ,用 AI 来做一款游戏~

先上一波最终效果 (全AI生成 😄,不止代码,还有游戏图片素材):

😄 记录下捣鼓过程,想用 AI整游戏 的的读者,可以参考下自己整一个,本文大纲如下:

2. 游戏选题

🤔 em... 要做一款什么类型的游戏呢?地铁通勤时疯狂记录 灵感 💡:

😄 思来想去,先做一个「塔防 」的游戏,之前有一阵子疯狂沉迷 绿色循环圈外传 ,王者都不玩了,🤣 真是应了那句话 "改变习惯最好的方法,就是培养另一个习惯取代它"。🤔 游戏玩法比较简单:

出怪、 怪绕圈、造塔/升级塔打怪,圈子里的怪超过限制就输,熬过多少波就赢。

🤣 当然,最主要的原因还是,我只说了两句话,Trae 就给我造了一个 简单能玩的雏形 ,用 Windows 自带的「画图 」简单画了下 地图草稿

写提示词

生成效果

🐂 啊,接着就是在此上的完善 玩法细节 + 界面美化了。

3. 玩法细节

3.1. 写玩法草稿

💁‍♂️ 花时间思考,写下游戏玩法的 草稿

3.2. AI完善细节

😏 这里选的是有 "地表最强文科生 " 之称的 Gemini 2.5 Pro,直接写提示词:

我准备开发一款TD塔防游戏,下面我写的玩法草稿,你给我完善下细节:xxx

输出结果:

👍 无敌 ❗️ 不过不是什么功能都要,复制粘贴下改改,写一份 需求文档草稿 ,让 Trae 照着整一份更专业的 "需求文档 ",然后做下开发 任务拆解 ,"文档先行 ",这是保证 "AI产出质量 " 的 "铁律":

生成的 需求文档.md

生成的 任务拆解.md

看了下没啥问题,接着让 Trae 按照这份文档开搞:

中途可能会出现思考次数达到上限,点击 "继续" 就好:

有什么不对就直接跟Trae说:

运行效果:

😄 接着就是反复跟 Trae Battle ,通过 Prompt(提示词) 不断调整成我们期望的样子,有个重要的 建议

当Trae 生成/改完的代码 暂时满足 你需要的某个状态 时 (如:整体效果还好,有些小瑕疵要改改),先进行下 Git Commit 保存下,然后再让它去生成代码或者改BUG,🤡 AI 有时会像个 弱智 一样,乱改代码,或者写BUG,没解决这个问题还引入新的问题,Trae 支持 重置当前某个会话 前的状态,注意是 "当前 " ❗️ ❗️ ❗️ ,你去 历史会话 里找到的会话记录,是不能重置的 ❗️ 所以,及时 Git Commit 兜底,方便代码回退~

😆 Battle 过程比较耗时,直接跳过,给出最终的效果图 (基本能玩,虽然BUG多多)~

熬过 10波 就通关啦~

😀 后面又让Trae 优化了一下怪物行走的路线:

👏 基本能玩,Trae 生成的代码,塔和怪物都是用的 emoji 表情,感觉有点Low,俗话说 "人靠衣装马靠鞍 ",接着让 AI 生成下 游戏素材 ,美化下界面,势必要把 逼格拉满 ❗️ ❗️ ❗️

4. 界面美化

4.1. "套"游戏素材生成提示词

🤡 没做过游戏,也不知道要出啥图,怎么出,图片怎么加载,直接问 Trae

Trae 部分输出结果:

然后还输出了什么 "预加载策略 "、"图片复用机制 "、"内存优化策略 " 等等,暂不关心,了解完 生成图片的尺寸和透明背景要求 ,接着生成哪些图片呢?🤔 自己一个个慢慢整理,然后逐个写提示词,这得画多长时间?大人,时代变了,这些活,全让AI来干~

写下提示词:

Trae 部分输出结果:

🏹 弹道素材 (24x24px)、💥 特效素材 (32x32px)、UI图标素材 (32x32px) 都列出来了,它甚至还给我了一些生成建议,我哭死。°(°¯᷄◠¯᷅°)°。:

4.2. AI 生成游戏素材

😄 万事俱备,接着就是找一个 文生图AI 来出图了,复制粘贴提示词,试了下平时在用的几个生成 文章美女封面图 的AI,效果都不太满意 🤷‍♀️,最主要是 画风不统一 ,而且 不支持透明背景 ,还得我自己一张张抠 (虽然心现在有AI代劳😐),术业有专攻 ,还是找 游戏素材领域的专用AI模型 。搜了一圈,发现了介个 → Holopix AI

🤣 主要是 图文案例 里 "背包守卫战 " 教程里生成的 史莱姆 深得我心:

接着首页点 "icon道具",很多不同风格专门做icon的模型:

😶 也不一定要 像素风格 的模型,支持生图后 转换成像素图:

😶 接着就是漫长的试不同的模型生图,看那个合心意,最后 敌人 素材生成用的「Q版粗线条魔幻风格角色」模型,粘贴下提示词,然后生成:

尺寸建议选 1:1 256x256 ,生成一张只要1算力 (尺寸越大越多),然后下载图片的时候选择 自动去除背景

需要把尺寸改为 48x48 ,这里先用图片转换工具改改,后面图片素材都准备好了,再用 Trae 写个批处理脚本:

把图片丢图床上,这里我直接用的 Github 作为图床,生成URL后,写提示词让 Trae 试试:

看下替换结果:

接着就是照葫芦画瓢,把剩余几种怪也搞出来:

接着是 塔、弹道和特效 ,换个模型「欧美多边形风格道具」同样是粘贴提示词生成素材图片,喜欢的就下载:

把所有图片素材都上传的 Ghitub图床 ,我用的 PicGo 会重命名文件,所以要简单写下对应关系,再让 Trae 改:

看下修改后的效果 (Gif帧数比较低,看起来卡,玩起来很流畅):

👏 不错,还TM有攻击特效🤣,接着搞下 格子 贴图,同样问 Trae素材生成提示词

Trae 部分输出结果:

😄 换「竖版空白场景模型」来生成,在生成结果里选了两张觉得还可以的:

😀 老规矩,让 Trae 安排一波:

效果:

👏 Nice ,最后, 让 Trae 干掉 箭头格子边框 、以及做一些 UI微调,最终效果:

😄 接着切 AgentBuilder with MCP ,通过 掘金MCP 对项目进行 部署

打开 预览链接,填下信息发布,等审核通过,别人就可以通过这个链接来体验这个游戏啦~

5. 小结

😄 断断续续,花了近一天时间,不写一行代码 ,仅通过和 AI 撕逼 ,就实现了这款 "制作精良 " 的 纯前端塔防游戏 ------掘金循环圈 。🤣 我一开始只是抱着试一试的心态,没想到真的搞出来了,不得不感叹 AI 发展的日新月异

😐 换以前做个这样的 小游戏 ,至少得搞一两个月,写代码 是其次,游戏素材 才令人头疼 🙃,想省钱,自己刚好又会PS,一个个 ICON 做到你眼花,愿意花钱外包给别人,某宝咸鱼几百块跑不了的 (甚至更贵)。😶 而现在,有了 Holopix AI 这类 游戏素材领域的专用AI模型 ,🤷‍♀️ TM出游戏素材跟闹着玩一样: (几秒一张) + 便宜 (2-4分钱一张图),我还是只是简单的用了下 文生图 ,用 perplexity 总结了一下这货的功能:

🙇 专业 ,2333,🐶 对于那些 换皮游戏 (玩法不变,只改UI) 应该是 "降本增效 " 的利器。😶扯的有点远了,回到这个 塔防游戏 ,还有很多 待完善 的点:

  • 没音效 :😏 代码图片素材 都是 AI 生成的,这 "游戏音效 " 不得也交给 AI
  • 不够精细/玩法单调:怪物和塔的类型太少,塔升级只有加属性,满级应该搞个分支进化,塔技能/塔信息/怪物完善,**「抽卡」**怎么能没有🤣 ❓ 10波太少,还没运营起来,就赢了,根本不够玩...
  • BUG:加速时银行卡加钱速度没变、塔升满级造攻击光环攻击反而下降、赢了没有弹窗...

😄 玩的人多的话,再来慢慢玩完善吧,或者直接做一个"虚假广告 "的 转刀游戏 耍耍,🤣 就这种经常刷到的:

体验地址「塔防游戏------掘金循环圈」

游戏源码「coder-pig/VibeCodingTry」

相关推荐
围巾哥萧尘13 分钟前
「掌握Trae IDE」 Trae + Git Agent + EdgeoneMCP,20 分钟用 Trae 完成网页开发和部署🧣
mcp
这里有鱼汤1 小时前
🚀逆天神器来了!MCP Chrome:超越Playwright,让AI接管你的浏览器,我当场震撼!
github·mcp
EdisonZhou2 小时前
多Agent协作入门:并发编排模式
llm·aigc·.net core
AIGC包拥它2 小时前
AI教学设计助手:生成好教案的Prompt技术实战(二)
人工智能·prompt·aigc
未来影子11 小时前
Spring Ai Alibaba Gateway 实现存量应用转 MCP 工具
gateway·springai·mcp
小和尚同志12 小时前
使用 Dify 工作流实现每日热点简报
人工智能·aigc
墨风如雪14 小时前
PPT 我自己就能做!智谱新模型“玩转”工作汇报,简直是打工人福音!
aigc
小溪彼岸20 小时前
【Gradio】初识Gradio
aigc
堆栈future21 小时前
大模型时代的三巨头—Grok、ChatGPT与Gemini深度解析
llm·aigc·openai
redreamSo1 天前
AI Daily | AI日报:斯坦福:AI当第一作者的学术会议来了; Chai-2:重构药物设计逻辑的「药界ChatGPT」; 实测:AI让顶尖程序员写代码慢19%
程序员·aigc·资讯