2. 图文手把手教你由0到1基于AI完成“垃圾消除小游戏”
上一篇文章 首个完全由AI生成的APP上架啦 - ColorPicker 被喷得有点惨，本来是想分享一下最近使用AiCoding的探索发现，结果被好些大佬说是 “毫无技术含量、全是生产互联网垃圾”。说实话，看到这些评论还有点伤心，毕竟八年技术分享无人问，一朝水文大众喷。
虽然不被技术大咖认可，但我的初衷依然和上篇文章回复保持一致
既然大家都说没有技术难度、是在制造互联网垃圾，那正好可以拿这个主题来校验一下，搞一个毫无技术难度的垃圾消除游戏，下面完整记录这个AICoding生成的游戏全过程，给对这方面感兴趣的小伙伴一个路线参考
全程挑战一下，由AI来生成一个毫无技术难度的小游戏 -- 羊了个羊-垃圾消除版，并分别生成wap版/小程序版/apk版输出
首先是技术栈与开发工具如下：
Uniapp
HBuilder + Trae + Android Studio + 微信小程序开发
一、初始化一个项目工程
打开HBuilder，依次点击：
1. 新建项目
方案1：文件 -> 新建 -> 项目
方案2：点击快速创建项目的按钮，如下图
2. 指定项目信息
- 由于我们希望一套代码，多端运行（wap--手机浏览器，小程序，APP），因此最左边选择 uni-app
- 输入项目名、存储路径，选择应用模板
3. 使用Trae加载上面的工程
- 打开应用，会看到下面的截图
- 然后点击打开文件夹 -- 找到上面生成工程指定的文件夹，选中即可
此时我们的前置准备工作已经完成，即将进入正式的AICoding阶段
二、AICoding阶段
1. 首先在HBuilder上运行一下项目
- 点击下图中所示的播放图标
- 在弹出的下拉框中，选择 运行到 Chrome
然后你就会看到一个自动打开了一个浏览器，内容长下面这样
因为我们的目标输出是基于手机玩耍的小游戏，因此我们可以在浏览器这里按住F12/或者鼠标右键，点击检查，进入开发者模式
按照下图的方式进入移动视角
2. 进入Trae，让他帮我们生成小游戏
- 在编辑器的右边AI对话框中，选择 Builder模式，大模型选择 Claude-3.7-Sonnet
- 开始提问，给出我们的诉求，下面的描述文案没有任何修辞，就是普通的大白话(毫无技巧可言）
然后我们就等待大模型帮我们生成各种代码，在这个过程中，会不断的出现下面这种询问你是否接受的情况，一路无脑选择全部接受即可
在最后输出完成之后，它想要运行项目，查看实现的羊了个羊游戏效果；因为我们是HBuilder进行预览，所以直接拒绝它就行
然后我们切换回上一步打开的Chrome浏览器，看看效果；结果很不幸的是并不是我们预期的内容
3. 错误调试阶段
小概率情况，首次生成的内容不可用，我们需要将对应的错误喂给大模型，让他自己去修复
上面这种样式，表示生成的代码有问题，那么我们就直接告诉它，修改这些问题
- 将上面的错误截图，丢到对话框，直接让Claude来修正
如果你有编程经验的话，上面这种问题实际上也很好发现，如我们看下它生成的代码
- 正常的代码，标签都是配套出现的，这里 只有
<script>没有</script>； 只有</style>没有开头的<style>
等上面修复完毕之后，我们在看看Chrome浏览器的运行情况
- 第一张图，为启动页
- 第二张图为开始游戏之后的页面（没有出现预期的游戏画面，需要我们继续进行调试）
- 第三张图为游戏介绍页面
虽然功能还不齐全，但至少没有报错了，UI美化的问题我们放在最后；接下来我们重点调教一下游戏界面
4. 游戏界面显示调教
我们直接对话让它进行修改，这个过程可能需要多轮对话（对于小白而言，这个过程就只能看玄学了，当然如果你掌握一些编程基础，也可以快速发现问题，让后针对性的让AI进行修正）
实际不展示游戏区域的原因并不是上面第一轮截图提示的钩子问题，而是样式的问题（大多数白屏都是样式原因导致的）
当我们将游戏区域换出来之后发现底部的候选区域当前页显示不出来，还需要下滑；说明游戏区域太大了，我们可以调整一下游戏区域的高度，比如最高占屏幕的 2/3； 其次就是每个卡片太大了，也需要调整一下
然后开始新一轮的样式调整
调整完毕之后再看看效果，比之前要好一点了，当然依然存在问题，部分卡片超出游戏区域了，没关系继续让它调整
5. 游戏逻辑调教
我们需要修复一些游戏性的问题：
- 如游戏模式，取消倒计时；改为候选区域填满表示游戏失败
- 比如同一层的卡片，不应该存在位置重叠的情况
- 为了更好的游戏性，可以固定限制相邻两层的间距为1/2个卡片
然后再游戏试玩的过程中，你还会发现其他的一些问题，比如（底部卡槽填满了，没有告诉用户失败； 卡片明显被遮挡但是又可以被选中等）
- 发现问题不要怕，一给个让它改就行，默默安慰自己享受老板吩咐人干活的快感吧~
下面是一些游戏逻辑相关的改造问答，就不详细列举了
一些调整之后，我们再看看最终的效果
6. UI样式调整
到应用商店，找一下羊了个羊的官方宣传图，或者下载游戏截个图，丢给trae来调整下整体布局样式，使其更美观一点
整体调整之后，比之前稍微好看一点了，不满意的小伙伴可以继续进行调教； 为了更贴合主题，我们将卡片的icon，从现在的动物换成各种垃圾
最后再整体调整一下游戏的各个布局（包括开始界面，游戏卡片中图标的大小，游戏logo等），改完之后我们完整的体验一下这个 “垃圾消除游戏”
找豆包，帮我生成icon的文生图提示词；然后再用豆包的文生图获取我们的游戏logo
- 第一次生成的图片不适合作为app的icon，需要更简约一点，就简单的调整下,一次不行多试几次
基本功能完成，接下来我们整体体验一下这个垃圾小游戏
打开公众号原文，体验视频的演示效果： 毫无技术难度：由0到1基于AI完成“垃圾消除小游戏”
三、小结
这一篇主要通过图文的方式，演示了如何借助Trae来从0到1实现一个小游戏；接下来我们如何将同样通过图文的方式，手把手教你将上面实现的小游戏，打包上线，请看下一篇