全程挑战一下，由AI来生成一个毫无技术难度的小游戏 -- 羊了个羊-垃圾消除版，并分别生成wap版/小程序版/apk版输出
在文章最后，点击原文链接即可体验这个AI生成的垃圾小游戏
首先是技术栈与开发工具如下：
Uniapp
HBuilder + Trae + Android Studio + 微信小程序开发
一、初始化一个项目工程
打开HBuilder，依次点击：
Step1: 新建项目
方案1：文件 -> 新建 -> 项目
方案2：点击快速创建项目的按钮，如下图
Step2: 指定项目信息
由于我们希望一套代码，多端运行（wap--手机浏览器，小程序，APP），因此最左边选择 uni-app
输入项目名、存储路径，选择应用模板
Step3: 使用Trae加载上面的工程
打开应用，会看到下面的截图
然后点击打开文件夹 -- 找到上面生成工程指定的文件夹，选中即可
此时我们的前置准备工作已经完成，即将进入正式的AICoding阶段
二、AICoding阶段
Step1: 首先在HBuilder上运行一下项目
点击下图中所示的播放图标
在弹出的下拉框中，选择 运行到 Chrome
然后你就会看到一个自动打开了一个浏览器，内容长下面这样
因为我们的目标输出是基于手机玩耍的小游戏，因此我们可以在浏览器这里按住F12/或者鼠标右键，点击检查，进入开发者模式
按照下图的方式进入移动视角
Step2: 进入Trae，让他帮我们生成小游戏
1. 在编辑器的右边AI对话框中，选择 Builder模式，大模型选择 Claude-3.7-Sonnet
2. 开始提问，给出我们的诉求，下面的描述文案没有任何修辞，就是普通的大白话(毫无技巧可言）
然后我们就等待大模型帮我们生成各种代码，在这个过程中，会不断的出现下面这种询问你是否接受的情况，一路无脑选择全部接受即可
在最后输出完成之后，它想要运行项目，查看实现的羊了个羊游戏效果；因为我们是HBuilder进行预览，所以直接拒绝它就行
然后我们切换回上一步打开的Chrome浏览器，看看效果；结果很不幸的是并不是我们预期的内容
Step3: 错误调试阶段
小概率情况，首次生成的内容不可用，我们需要将对应的错误喂给大模型，让他自己去修复
上面这种样式，表示生成的代码有问题，那么我们就直接告诉它，修改这些问题
将上面的错误截图，丢到对话框，直接让Claude来修正
如果你有编程经验的话，上面这种问题实际上也很好发现，如我们看下它生成的代码
正常的代码，标签都是配套出现的，这里 只有<script> 没有</script>； 只有 </style> 没有开头的<style>
等上面修复完毕之后，我们在看看Chrome浏览器的运行情况
第一张图，为启动页
第二张图为开始游戏之后的页面（没有出现预期的游戏画面，需要我们继续进行调试）
第三张图为游戏介绍页面
虽然功能还不齐全，但至少没有报错了，UI美化的问题我们放在最后；接下来我们重点调教一下游戏界面
Step4: 游戏界面显示调教
我们直接对话让它进行修改，这个过程可能需要多轮对话（对于小白而言，这个过程就只能看玄学了，当然如果你掌握一些编程基础，也可以快速发现问题，让后针对性的让AI进行修正）
实际不展示游戏区域的原因并不是上面第一轮截图提示的钩子问题，而是样式的问题（大多数白屏都是样式原因导致的）
当我们将游戏区域换出来之后发现底部的候选区域当前页显示不出来，还需要下滑；说明游戏区域太大了，我们可以调整一下游戏区域的高度，比如最高占屏幕的 2/3； 其次就是每个卡片太大了，也需要调整一下
然后开始新一轮的样式调整
调整完毕之后再看看效果，比之前要好一点了，当然依然存在问题，部分卡片超出游戏区域了，没关系继续让它调整
Step5: 游戏逻辑调教
我们需要修复一些游戏性的问题：
如游戏模式，取消倒计时；改为候选区域填满表示游戏失败
比如同一层的卡片，不应该存在位置重叠的情况
为了更好的游戏性，可以固定限制相邻两层的间距为1/2个卡片
然后再游戏试玩的过程中，你还会发现其他的一些问题，比如（底部卡槽填满了，没有告诉用户失败； 卡片明显被遮挡但是又可以被选中等）
发现问题不要怕，一给个让它改就行，默默安慰自己享受老板吩咐人干活的快感吧~
下面是一些游戏逻辑相关的改造问答，就不详细列举了
一些调整之后，我们再看看最终的效果
Step6: UI样式调整
到应用商店，找一下羊了个羊的官方宣传图，或者下载游戏截个图，丢给trae来调整下整体布局样式，使其更美观一点
整体调整之后，比之前稍微好看一点了，不满意的小伙伴可以继续进行调教； 为了更贴合主题，我们将卡片的icon，从现在的动物换成各种垃圾
最后再整体调整一下游戏的各个布局（包括开始界面，游戏卡片中图标的大小，游戏logo等），改完之后我们完整的体验一下这个 “垃圾消除游戏”
找豆包，帮我生成icon的文生图提示词；然后再用豆包的文生图获取我们的游戏logo
第一次生成的图片不适合作为app的icon，需要更简约一点，就简单的调整下,一次不行多试几次
基本功能完成，接下来我们整体体验一下这个垃圾小游戏
已关注 关注 三、打包运行阶段
接下来就是将我们的垃圾小游戏打包发行，供其他小伙伴进行体验，我将分别介绍常见的三种打包发行方式
接下来的动作将主要在HBuilder中执行
1. 打包成H5游戏
h5游戏，主要用于浏览器直接访问玩耍，需要配置域名，没有域名的小伙伴，可以考虑一些云服务的PAGES服务来实现，接下来介绍下Cloudflare的托管部署方式
Step1: 打包
Hbuilder ，一次点击 发行 -> 网站PC Web 或手机H5 如果出现下面的异常，则按照下图方式进行修正
打开项目下的 manifest.json 文件
在右边的视图中，点击重新获取按钮
如果没有登录的，会让你输入unicod的账号密码，登录即可
成功之后，就会得到下面3所示的AppID
上面问题修复之后，再次进行打包，正确的样式如下
因为接下来的演示是基于Cloudflare进行托管，所以下面的域名可以先随便填一个
然后进入上面的输出目录，将目录下的内容打包为zip文件，如下图操作
Step2: 发行Cloudflare
没有账号的小伙伴自行注册，后续教程给出完整的注册使用流程，敬请蹲守一波?
直接进入 Workers & Pages 目录
点击create按钮，进入创建应用页面
切换Tab页到Pages -> 点击Upload assets -> 进入发布页面
输入项目名，此时会自动给你分配一个访问域名
接着上传zip压缩包
最后点击发布按钮
发布成功的页面如下，我们可以直接点击域名，看一下效果（重点说明一下：上传的压缩包，请确保index.html在最外层）
直接点击上面的域名，就可以访问我们的小游戏啦
域名是： https://sheepremove.pages.dev/
Step3: 发行到自己的服务器或者OSS托管
当然如果你有自己的服务器或者OSS，也是可以将h5游戏部署上去的，下面简单介绍下将H5游戏托管到免费的七牛云空间下
1，首先在oss上，创建对应的目录空间，如 /app/sheepremove
2，修改HBuilder中web打包的输出前缀
manifest.json 文件 -> web配置 -> 运行的基础路径
启用https协议这个看你自己的托管域名，支不支持https，支持就选中；不支持就取消
然后重新发行一次： 菜单发行 -> 网站-PC
3，上传文件到七牛云
注意此时是文件的形式上传，不用之前的zip压缩包了
4，体验一下
http://cdn.hhui.top/app/sheepremove/index.html
2. 打包成微信小游戏
接下来我们看一下将上面的垃圾小游戏生成微信小游戏来体验一下，此时我们需要借助微信开发工具
Step1: 微信开发者工具，生成appid
将生成的appid记录出来，后续打包时会用到
注意：这里选择小程序，如果选择小游戏时，uniapp输出到微信时会报错
Step2: 打包微信小程序
配置小程序AppID
case1：运行小程序
然后hbuilder会自动打开微信开发者工具，启动我们的 垃圾消除游戏 , 如下图
说明：多平台时，可能出现各种奇怪的问题，需要针对性的进行提问解决 如：在微信小程序运行时，也出现了一个小问题，游戏区域未显示，同样将问题抛给Trae来修复
case2: 发行小程序
这种场景适用于我们开发完毕，准备提交给微信后台去申请上线，流程如下（由于没准备上线小程序，所以就不演示小程序上线流程了，放在后续的教程进行介绍）
3. 打包成Android APP
接下来我们再来演示一下如何将上面的小游戏打包成android 应用包
Step1: uniapp开发者后台配置签名
首先进入开发者后台：https://dev.dcloud.net.cn/pages/app/list
然后点击应用，进入详情：
各平台信息 -> 点击新增
进入编辑页，依次补齐下面几个信息
Android App
正式版/测试版 -- 都可以
包名：打包出来的签名，按照惯性约定命名即可
应用签名 SHA1, SHA256 ---> 这个是基于你打包时的签名证书生成的 （后续android输出篇教程详细介绍）
配置完毕之后，点击提交，返回应用列表
点击创建离线Key，再弹窗中点击创建
然后应用列表的按钮变成查看离线key
然后保存弹窗出来的appid
Step2: 打包生成Android的离线资源
菜单点击发行
依次执行 App-Andoird/IOS-本地打包 -> 生成本地打包App资源
Step3: AndroidStudio实现apk输出
这里直接使用我已经封装好的Android基础工程，跳过基于uniapp的原始项目工程的改造过程；我们接下来看一下如何基于这个基础工程来生成我们的apk包
1.拷贝资源
进入android项目的 simpleDemo/src/main/assets/apps 目录
删除目录下的文件
将上面hbuilder生成的资源拷贝进来
2. 修改data/dcloud_control.xml中的appid
将appid改为上面文件夹名（也可以直接在uniapp的后台查看appid)
3. 修改AndroidManifest.xml中包名和dcloud_appkey
package：Step2中填的包名
appKey: Step2中获取的离线key
4. 修改build.gradle中的包名
Namespace: 上面的包名
applicationid：上面的包名
5. 修改应用名和logo
应用名：res/values/strings.xml 文件中 app_name
logo: res/drawable 下的 icon.9.png
将前面生成的icon，拷贝到上面的drawable目录下，然后删除原来的icon.9.png
6. 打包 - 步骤如下：
菜单，点击 Build
在下拉框中，选择 Generate Signed App Bundle/APK
选择APK
点击Next
输入打包证书地址、密码、别名等信息
选择release
点击create，等待下面打包成功的提示
在 simpleDemo/release 目录下可以看到输出的apk包
Step4：安装体验
直接用手机安装一下上面的apk，下面是实际的体验视频（在视频中你也会发现打开会有版本的弹窗提示，这个是uniapp的提醒，可以消除掉；以及android端的样式还需要调整下，这里就不详细展开了）
有兴趣体验的小伙伴，可以下载apk:（说明，这个安装包中集成了谷歌的测试广告，后续在apk打包篇中会介绍如何给应用加上广告变现）
http://cdn.hhui.top/app/sheepremove/%E5%9E%83%E5%9C%BE%E6%B6%88%E9%99%A4%E5%B0%8F%E6%B8%B8%E6%88%8F.apk
四、小结
这个垃圾消除小游戏的开动到apk的手机完整运行，再加上完成本篇文章，总计耗时 5 小时左右，说长不长，说短不短。
上面小游戏的所有代码全部由AI生成，我主要发挥的作用就是给ai喂我的想法、以及适当的告诉它怎么解决问题（有时候ai解决问题的速度有点让人难受），一个完整的流程下来，编程小白想要完成一个自己的h5/小程序/app游戏可能有点挑战，但是耐心怼一波，也不是不可能出现奇迹
最后我想说的一点是，AI正在飞速发展，作为一个十年的互联网的coder真心希望所有的程序员不要傲慢，你可能认为AICoding还很初级、经常制造各种垃圾，但不得不说现如今AiCoding已经对初级程序员已经发起了挑战，同时也为所有的非程序员，打开了一个实现自己想法/产品的大门。
我是一灰灰，后续我将会给大家带来更多的AICoding的系列教程，比如上面提到但是没有展开的
•各编程工具的安装、调试、基本使用姿势介绍•项目开发管理的阶段性保存方案•H5托管相关知识点：CloudFlare、GitHub Pages、自己专属服务器托管，接入Google AdSense变现•微信小程序的发包上线全流程•Android的广告集成相关
支付宝微信扫一扫，打赏作者吧～本文链接：https://www.kinber.cn/post/5126.html 转载需授权！
推荐本站淘宝优惠价购买喜欢的宝贝:
您阅读本篇文章共花了： 
