> ## Content Index > Fetch the complete content index at: https://www.hubwiz.com/blog/llms.txt > Use this file to discover other available public pages before exploring further. # 用 AI 构建和部署网页游戏 - URL: https://www.hubwiz.com/blog/build-and-deploy-web-games-with-ai/ - Published: 2026-05-03T11:01:55.000Z - Updated: 2026-10-13T16:15:09.000Z - Description: 每个人都能构建游戏：非技术人员指南。 - Author: admin - Tags: APPLICATION, #Import 2026-10-14 14:41 当我还是个孩子的时候，我非常喜欢德国浏览器游戏网站 SpieleAffe.de（游戏猴子）。 这个网站有很多小游戏，你可以在浏览器中玩，或者通过共享同一个键盘和朋友一起玩，非常有趣。 这些小型浏览器游戏在精美智能手机应用出现之前是一种潮流。 好处是这些游戏完全免费，而且数量众多。 ![](https://www.hubwiz.com/blog/content/images/2026/05/image-7.png) 现在，15 年多过去了，得益于 AI 和技术的进步，我们可以在几分钟内自己构建和部署这样的简单游戏。 在这篇博客文章中，我将向你展示每个人如何构建、部署和分享自己的浏览器游戏。 不需要任何技术或编程知识。 让我们开始吧。 ## 1、构建游戏 我们将使用 Google Gemini 开始构建我们的在线浏览器游戏。 虽然有一些更好的方式来用生成式 AI 构建游戏和应用，但 Google Gemini 因其慷慨的免费计划和不需要编程经验而脱颖而出。 这使它成为入门的完美选择。如果我们变得更加高级，我们仍然可以切换到 Claude Code、Google Gravity 或 Codex。 但让我们先用 Google Gemini 开始。 在这篇博客文章中，我想创建一个打砖块游戏。 在这个经典的街机游戏中，我们控制一个挡板来弹球打碎方块。游戏的目标是清除所有方块，同时不让球掉落。 ![](https://www.hubwiz.com/blog/content/images/2026/05/image-8.png) 但你可以随意构建任何你想要的游戏。以下是一些灵感，也应该可以：吃豆人、太空侵略者、青蛙过河或挖挖乐。 对于游戏创建的第一次迭代，我们使用以下提示来解释我们对游戏的期望。 ``` 构建一个完整的打砖块浏览器游戏。 包含单人模式和双人模式。 两个玩家应使用同一个键盘。 游戏有 5 个难度递增的关卡。 每个关卡必须使用不同的砖块布局或阵型。 创建一个精美的用户界面，包括主菜单、暂停屏幕、游戏结束屏幕、关卡完成屏幕、分数显示、生命值显示和关卡指示器。 添加发光效果、动画、粒子、音效和响应式画布缩放。 添加道具，如更大的挡板、更慢的球、多球、额外生命等等... 在暂停菜单中添加道具说明。 ``` 然后将这个提示复制并粘贴到 ChatGPT 的上下文窗口中。 需要注意的是，我们需要为这个项目激活 Canvas（画布）。 否则，我们将无法即时编辑和测试我们的游戏。 ![](https://www.hubwiz.com/blog/content/images/2026/05/image-9.png) 发送提示后，ChatGPT 开始工作，首先考虑编程，然后在画布上逐 token 生成游戏。 第一次结果如下。不完美，但我们快到了。 ![](https://www.hubwiz.com/blog/content/images/2026/05/image-10.png) 如果我们对结果不满意，可以相应地调整提示，或者用相同的提示再试一次，因为生成模型是统计模型。 因此，我们每次都会看到略有不同的结果，如下一张图片所示，它使用了完全相同的提示。 此外，我们还可以通过提供新的提示来改进当前版本，告诉 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`。 ![](https://www.hubwiz.com/blog/content/images/2026/05/image-11.png) 使用 OpenAI 的 Image-2 模型以相关博客段落为上下文的 GitHub 解释可视化。 GitHub 保留变更历史，因此团队可以看到编辑了什么、建议改进，并安全地合并每个人的工作。 如果你还没有，创建一个新的 GitHub 账户。我从自己的经验知道，GitHub 乍一看可能令人生畏。然而，一旦你掌握了基础知识，它就会成为软件开发和构建更大游戏的强大工具。 ![](https://www.hubwiz.com/blog/content/images/2026/05/image-12.png) 创建 GitHub 账户后，我们应该看到类似下方显示的屏幕。 点击左侧绿色的"Create Repository"按钮打开新的配置窗口。 GitHub 仓库就像一个在线项目文件夹，我们在这里存储文件、跟踪变更和协作。我们可以把它想象成一个具有每次编辑完整历史的共享文件夹。 ![](https://www.hubwiz.com/blog/content/images/2026/05/image-13.png) 为了创建仓库，我们提供名称、描述，将可见性设置为私有，并默认开启 README.md。 ![](https://www.hubwiz.com/blog/content/images/2026/05/image-14.png) 点击绿色的"Create Repository"按钮后，会显示下一个页面，展示生成的仓库。 ![](https://www.hubwiz.com/blog/content/images/2026/05/image-15.png) 现在点击 Add file，然后将 ChatGPT 的程序代码复制粘贴到新的空文件中。将此文件命名为 index.html，这通常用作网站的起始文件。 ![](https://www.hubwiz.com/blog/content/images/2026/05/image-16.png) 然后，我们点击"Commit changes"按钮。GitHub 提交是项目文件变更的保存快照。如果我们犯了错误，可以在项目的提交历史之间跳转，这非常有用。 ![](https://www.hubwiz.com/blog/content/images/2026/05/image-17.png) ### 2.2 在 Vercel 上部署 GitHub 代码 下一步，我们将使用之前创建的 GitHub 仓库在 Vercel 上部署。 Vercel 是一个云平台，使开发者能够通过自动将 Git 提交转换为实时网站来部署和扩展 Web 应用。 ![](https://www.hubwiz.com/blog/content/images/2026/05/image-18.png) 创建 Vercel 账户时，我建议使用你现有的 GitHub 账户，因为你的代码已经存储在那里。 ![](https://www.hubwiz.com/blog/content/images/2026/05/image-19.png) 创建账户并登录后，我们应该看到类似下方的仪表板。 可以通过点击右上角的白色"Add New…"按钮来创建新项目。 ![](https://www.hubwiz.com/blog/content/images/2026/05/image-20.png) 下一步，我们通过点击"Continue with GitHub"将创建的 GitHub 仓库链接到要部署代码的 Vercel。 ![](https://www.hubwiz.com/blog/content/images/2026/05/image-21.png) 之后，会打开以下窗口，你可以在其中选择你的 GitHub 账户/名称和正确的仓库，我们提交文件的仓库。 在我们的案例中，应用非常简单。不需要任何应用预设。其他一切可以保持不变。 ![](https://www.hubwiz.com/blog/content/images/2026/05/image-22.png) 点击部署后，程序在 Vercel 服务器上启动。 恭喜，我们在 AI 的帮助下构建并部署了我们的第一个在线浏览器游戏。 ## 3、尽情玩你的游戏 现在，我可以在这里写，仅仅通过几个提示就能构建这样有趣的游戏是多么令人惊叹。 然而，说服你最好的方式是让你自己试试。 这是游戏的链接。[玩打砖块](https://arkanoid-eight.vercel.app/?ref=hubwiz.com) 祝你玩得开心 ![](https://www.hubwiz.com/blog/content/images/2026/05/image-23.png) ## 4、结束语 当然，这不是一个可扩展的大作游戏，还有很大的改进空间。 此外，如果你要构建专业的视频游戏，你不会把整个代码库放在一个文件中。 然而，这里的例子强调了一个最重要的观点：即使是非技术人员，构建自己的应用和游戏也变得多么简单。 最后一点：如果你遵循这个指南，请坚持使用不需要用户管理或登录系统的应用和 Web 应用。 那是另一篇博客文章的话题，永远不应该完全用生成式 AI 进行随意编码。 --- 原文链接: [Build & Deploy your own online Browser Game with AI](https://medium.com/data-science-collective/build-deploy-your-own-online-browser-game-with-ai-4604a5995865?ref=hubwiz.com) 汇智网翻译整理，转载请标明出处 > **这是「AI 基建 / 评测 / 安全」专题的一部分。**完整地图见：[AI 基建 / 评测 / 安全完全指南](https://www.hubwiz.com/blog/ai-infra-stack/)