用 AI 构建和部署网页游戏
每个人都能构建游戏：非技术人员指南。
微信 ezpoda免费咨询：AI编程 | AI模型微调| AI私有化部署
AI模型价格对比 | AI工具导航 | ONNX模型库 | Tripo 3D | Meshy AI | ElevenLabs | KlingAI | ArtSpace | Phot.AI | InVideo
当我还是个孩子的时候，我非常喜欢德国浏览器游戏网站 SpieleAffe.de（游戏猴子）。
这个网站有很多小游戏，你可以在浏览器中玩，或者通过共享同一个键盘和朋友一起玩，非常有趣。
这些小型浏览器游戏在精美智能手机应用出现之前是一种潮流。
好处是这些游戏完全免费，而且数量众多。
现在，15 年多过去了，得益于 AI 和技术的进步，我们可以在几分钟内自己构建和部署这样的简单游戏。
在这篇博客文章中，我将向你展示每个人如何构建、部署和分享自己的浏览器游戏。
不需要任何技术或编程知识。
让我们开始吧。
1、构建游戏
我们将使用 Google Gemini 开始构建我们的在线浏览器游戏。
虽然有一些更好的方式来用生成式 AI 构建游戏和应用，但 Google Gemini 因其慷慨的免费计划和不需要编程经验而脱颖而出。
这使它成为入门的完美选择。如果我们变得更加高级，我们仍然可以切换到 Claude Code、Google Gravity 或 Codex。
但让我们先用 Google Gemini 开始。
在这篇博客文章中，我想创建一个打砖块游戏。
在这个经典的街机游戏中，我们控制一个挡板来弹球打碎方块。游戏的目标是清除所有方块，同时不让球掉落。
但你可以随意构建任何你想要的游戏。以下是一些灵感，也应该可以：吃豆人、太空侵略者、青蛙过河或挖挖乐。
对于游戏创建的第一次迭代，我们使用以下提示来解释我们对游戏的期望。
构建一个完整的打砖块浏览器游戏。
包含单人模式和双人模式。
两个玩家应使用同一个键盘。
游戏有 5 个难度递增的关卡。
每个关卡必须使用不同的砖块布局或阵型。
创建一个精美的用户界面，包括主菜单、暂停屏幕、游戏结束屏幕、关卡完成屏幕、分数显示、生命值显示和关卡指示器。
添加发光效果、动画、粒子、音效和响应式画布缩放。
添加道具，如更大的挡板、更慢的球、多球、额外生命等等...
在暂停菜单中添加道具说明。
然后将这个提示复制并粘贴到 ChatGPT 的上下文窗口中。
需要注意的是，我们需要为这个项目激活 Canvas（画布）。
否则，我们将无法即时编辑和测试我们的游戏。
发送提示后，ChatGPT 开始工作，首先考虑编程，然后在画布上逐 token 生成游戏。
第一次结果如下。不完美，但我们快到了。
如果我们对结果不满意，可以相应地调整提示，或者用相同的提示再试一次，因为生成模型是统计模型。
因此，我们每次都会看到略有不同的结果，如下一张图片所示，它使用了完全相同的提示。
此外，我们还可以通过提供新的提示来改进当前版本，告诉 Gemini 应该改变什么。这样，我们可以根据需要逐步调整游戏。
当我们对结果满意时，可以下载代码并保存到本地机器上。
下一步，需要将这段代码复制粘贴到 git 仓库中，为在线部署做准备。
2、部署游戏并与世界分享
到目前为止，我们只能在 Gemini Canvas 中玩游戏。这很酷，但如果我们想与世界和朋友分享我们天才的游戏设计创意，我们需要将它们部署到服务器上。
过去，这相当复杂，需要高级计算机科学技能。
今天，它几乎和在电脑上安装应用程序一样简单。
但是，在我们部署和分享游戏之前，我们需要将它保存到 GitHub 上。
2.1 设置 GitHub
GitHub 是一个用于分享、存储和协作软件项目的服务。
它解决了在项目中拥有同一文件多个版本的问题，比如 project_1、project_2、project_final、project_final_2、project_real_final 和 project_real_final_2。
GitHub 保留变更历史，因此团队可以看到编辑了什么、建议改进，并安全地合并每个人的工作。
如果你还没有，创建一个新的 GitHub 账户。我从自己的经验知道，GitHub 乍一看可能令人生畏。然而，一旦你掌握了基础知识，它就会成为软件开发和构建更大游戏的强大工具。
创建 GitHub 账户后，我们应该看到类似下方显示的屏幕。
点击左侧绿色的"Create Repository"按钮打开新的配置窗口。
GitHub 仓库就像一个在线项目文件夹，我们在这里存储文件、跟踪变更和协作。我们可以把它想象成一个具有每次编辑完整历史的共享文件夹。
为了创建仓库，我们提供名称、描述，将可见性设置为私有，并默认开启 README.md。
点击绿色的"Create Repository"按钮后，会显示下一个页面，展示生成的仓库。
现在点击 Add file，然后将 ChatGPT 的程序代码复制粘贴到新的空文件中。将此文件命名为 index.html，这通常用作网站的起始文件。
然后，我们点击"Commit changes"按钮。GitHub 提交是项目文件变更的保存快照。如果我们犯了错误，可以在项目的提交历史之间跳转，这非常有用。
2.2 在 Vercel 上部署 GitHub 代码
下一步，我们将使用之前创建的 GitHub 仓库在 Vercel 上部署。
Vercel 是一个云平台，使开发者能够通过自动将 Git 提交转换为实时网站来部署和扩展 Web 应用。
创建 Vercel 账户时，我建议使用你现有的 GitHub 账户，因为你的代码已经存储在那里。
创建账户并登录后，我们应该看到类似下方的仪表板。
可以通过点击右上角的白色"Add New…"按钮来创建新项目。
下一步，我们通过点击"Continue with GitHub"将创建的 GitHub 仓库链接到要部署代码的 Vercel。
之后，会打开以下窗口，你可以在其中选择你的 GitHub 账户/名称和正确的仓库，我们提交文件的仓库。
在我们的案例中，应用非常简单。不需要任何应用预设。其他一切可以保持不变。
点击部署后，程序在 Vercel 服务器上启动。
恭喜，我们在 AI 的帮助下构建并部署了我们的第一个在线浏览器游戏。
3、尽情玩你的游戏
现在，我可以在这里写，仅仅通过几个提示就能构建这样有趣的游戏是多么令人惊叹。
然而，说服你最好的方式是让你自己试试。
这是游戏的链接。玩打砖块
祝你玩得开心
4、结束语
当然，这不是一个可扩展的大作游戏，还有很大的改进空间。
此外，如果你要构建专业的视频游戏，你不会把整个代码库放在一个文件中。
然而，这里的例子强调了一个最重要的观点：即使是非技术人员，构建自己的应用和游戏也变得多么简单。
最后一点：如果你遵循这个指南，请坚持使用不需要用户管理或登录系统的应用和 Web 应用。
那是另一篇博客文章的话题，永远不应该完全用生成式 AI 进行随意编码。
原文链接: Build & Deploy your own online Browser Game with AI
汇智网翻译整理，转载请标明出处
