如何用ChatGPT开发H5小游戏？

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

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

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

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

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

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

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

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

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

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

01 需求环节

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

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

果然在电脑上成功运行，效果还行吧？

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

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

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

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

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

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

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

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

你发现没？

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

02 设计环节

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

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

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

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

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

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

03 开发环节

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

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

04 测试环节

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

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

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

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

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

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

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

05 发布环节

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

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

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

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

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/