AI应用实践:不懂编程,如何用ChatGPT开发H5小游戏?

彩虹网

大家都知道AI现在功能强大,能帮我们完成很多事情,甚至有人用ChatGPT自己写APP的都有。拿换个思路,如果用AI来开发一款游戏,应该如何实现呢?

AI应用实践:不懂编程,如何用ChatGPT开发H5小游戏?

前几天,我用 ChatGPT 的 GPT-4o 开发了一个 H5小游戏「龙舟接粽子大赛」。

从技术实现上,这个游戏只是一个静态页面,对程序员来说,非常容易实现,但是,对不会写代码的产品经理而言,还是很有难度的。

说实话,作为产品经理,我不懂编程,一个人+ AI,1 天内上线一个 H5小游戏,还是挺有成就感的。

在 AI 时代,产品经理有创意、有想法,完全可以用 AI 快速开发产品 Demo,进行市场验证。

今天做个复盘,分享下如何用 ChatGPT 开发 H5小游戏?

内容有点多,相信你看完,可以更好理解做一个产品的全过程,以及每个环节如何使用 AI 辅助工作。(文末附AI工具清单

做一个产品,除了想法,还要明确需求细节、功能与流程、逻辑规则、界面UI等等,开发完了,还要通过测试,才能发布上线。

因此,我把这个游戏当做小型产品来做,包括:需求、设计、开发、测试和发布,这 5 个环节。

AI应用实践:不懂编程,如何用ChatGPT开发H5小游戏?

这个过程,AI 扮演了产品的程序员、设计师,还有产品经理导师,我们一起协作完成任务。

你看,开发一个看似简单的小游戏,也是在做一个完整的产品,也能积累实践经验。

01 需求环节

刚开始,我还不确定要做什么游戏,只有个模糊的想法,更别说需求。于是,我先跟 GPT 聊,它给出了两个不错的方案,还直接生成代码。

AI应用实践:不懂编程,如何用ChatGPT开发H5小游戏?

上下滚动查看更多可是,我不懂运行呀,继续问,让它教我操作。

AI应用实践:不懂编程,如何用ChatGPT开发H5小游戏?

果然在电脑上成功运行,效果还行吧?

AI应用实践:不懂编程,如何用ChatGPT开发H5小游戏?

不得不感叹 GPT 代码能力真强大,完全可以用 GPT 来开发 H5小游戏。

在验证了技术可行性后,要明确需求,我更希望做跟赛龙舟有关的游戏,问 GPT ,赛龙舟的游戏能直接用html来生成吗?(为了让它更好地帮我干活,还得多夸夸它)

AI应用实践:不懂编程,如何用ChatGPT开发H5小游戏?

都怪我这个产品经理,没讲清楚需求,只能让它再改一次。

新版本出来,试玩了一会,效果还不错,不过,障碍物太多,难度太大,用户可能玩不下去。

AI应用实践:不懂编程,如何用ChatGPT开发H5小游戏?

于是,我得寸进尺,让 GPT 给优化建议。

没想到,它给了几个靠谱的改进方向后,又直接就秒改出新代码。

AI应用实践:不懂编程,如何用ChatGPT开发H5小游戏?

经过多轮讨论和试玩后,需求基本明确,让 GPT 根据我们的对话总结游戏规则和逻辑,我再检查补充。

AI应用实践:不懂编程,如何用ChatGPT开发H5小游戏?

上下滚动查看更多考虑到要在端午节发布,时间比较紧,按照MVP(最小可行化产品)的思路,暂时不搞复杂功能和数据统计,只实现核心功能。至此,这个游戏的功能需求基本明确,后面就相对简单了。

你发现没?

在需求环节,尤其在「需求不明确」,或者「不知选哪个方案好」的情况下,AI 的作用巨大,它能帮我们理清思路、明确需求,还能分析方案的利弊,帮我们把方案实现出来,让我们体验和对比。

02 设计环节

这个环节,产品经理通常要拿产品原型,跟设计师沟通,设计师理解需求后,设计UI。

AI应用实践:不懂编程,如何用ChatGPT开发H5小游戏?

由于界面简单,需要的 UI 也少,我直接用 GPT 的 DALL.E 来设计(浮标在网上找的)。

还是先让 GPT 给建议,它的回答很美好,生成的图片却有点尴尬,不太符合我的预期,只能调整提示词,最后选了个人比较满意方案。

AI应用实践:不懂编程,如何用ChatGPT开发H5小游戏?

有了素材,再用 AI 抠图工具「魔力笔刷」抠图,去掉背景,用 PS 合成图片。看看这最终效果如何?

AI应用实践:不懂编程,如何用ChatGPT开发H5小游戏?

游戏有了 UI皮肤,还要有背景音乐,玩起来才有感觉。

照例先让 GPT 给建议,然后,用最近很火的 Suno AI 生成背景音乐,在网上下载常见的吃金币和游戏结束音效。

AI应用实践:不懂编程,如何用ChatGPT开发H5小游戏?

03 开发环节

看到这,你也许会发现,开发变简单、高效了。因为整个沟通过程,GPT 一直在输出代码,可以立即验证。真是比敏捷开发,还敏捷。为了让它先跟我讨论需求,还得专门告诉它,不用输出代码,等要输出代码再告诉它。

当然,AI 写代码,也有会 bug,这也是整个开发过程中,我最花时间的环节——测试。

04 测试环节

测试是比较费时间的,产品经理要模拟用户实际的使用场景,不断地用产品,看看有没有 bug。

期间,GPT 还真遇到一个 bug ,我们折腾了好久。

本来游戏运行好好的,我让它调整龙舟和粽子图片尺寸的计算方式,新版本运行时没显示粽子。

我反馈给 GPT ,它自己就加了调试信息,告诉我在浏览器控制台看日志,并把日志反馈给它。

我调试后,直接发截图给它,它找到一个问题,又开始一顿疯狂输出代码。可惜,还是没解决。

AI应用实践:不懂编程,如何用ChatGPT开发H5小游戏?

我考虑到时间较紧,果断让它换一种方式计算图片尺寸,这个 bug 就没了。

所以,遇到问题,有时得从其他角度想办法,也许换一种方式,原来的问题就不存在了。

05 发布环节

实际工作中,通常由开发同事部署发布产品。我没研究过部署,只能请教 GPT,它推荐了 Github。

我先把代码上传到 Github,生成页面链接,确实免费又方便。可是,国内访问 Github 的速度实在太慢,而且不稳定。

AI应用实践:不懂编程,如何用ChatGPT开发H5小游戏?

几经折腾研究,对比了好几个云平台后,选择腾讯云。

终于,自己一个人完成了产品从构思到部署上线的全部事情。

06 总结

最后,做点总结。

第一,这个项目不是要做一个很多人用的酷炫游戏,而是验证一个人不懂编程在 AI 的协助下独立开发一个产品的可能性。

从产品角度,这个游戏有很多地方可以完善。比如,加入微信好友排行榜、加数据埋点完善统计等等。

有了这次实践,后续开发其他的产品 Demo,可以更有经验、更高效。

第二,GPT 真是一个非常强大、耐心的好搭档,能配合我的想法,提出建议和优化方向,还能随时快速生成代码,帮我验证想法。

比如,测试中发现 bug,AI 没有任何情绪,一次又一次,根据我的调试反馈去排查问题,修改代码。

第三,这样的实践,也可以锻炼我们产品经理在每个环节需要的能力。

比如,在需求环节,跟 GPT 讨论需求,就像我们跟业务方沟通需求、跟程序员探讨技术可行性,锻炼了我们思考、沟通表达需求的能力。

又比如,在开发环节,跟 GPT 反馈问题和调试效果,就像跟开发沟通遇到的问题,锻炼了我们沟通协作、处理问题的能力。

希望你有所收获,玩的愉快哦!

工具清单:

1、代码开发、UI设计、答疑:ChatGPT

网址:https://chatgpt.com/

2、游戏音乐生成:Suno AI

网址:https://suno.com/

3、图片合成:稿定设计的在线 PS

网址:https://ps.gaoding.com/#/

4、AI 抠图:魔力笔刷

网址:https://www.remove.bg/zh/

5、代码仓库:Github

网址:https://github.com/

6、云服务器:腾讯云

网址:

https://cloud.tencent.com/

免责声明:由于无法甄别是否为投稿用户创作以及文章的准确性,本站尊重并保护知识产权,根据《信息网络传播权保护条例》,如我们转载的作品侵犯了您的权利,请您通知我们,请将本侵权页面网址发送邮件到qingge@88.com,深感抱歉,我们会做删除处理。