教程

用 AI + ToApp 开发你的第一个手机游戏：从零做一个飞机大战 App

2026-07-24 · 作者 seegood · 约 14 分钟阅读

手绘风格的手机飞机大战游戏示意图：玩家战机在屏幕底部，向落下的敌机发射发光子弹，深色太空背景带星星粒子 — 在手机上用 AI 和 ToApp 做一款飞机大战游戏

如果你已经读过上一篇教程，应该已经知道：零基础的人，只要有 AI 和 ToApp，就能在手机上做出一个属于自己的 Android 应用。但那篇讲的是工具类 App——习惯打卡、个人主页这类偏静态的页面。

这篇我们换一个更有意思的方向：做一个能玩的手机游戏。

不是那种只能点一下、跳一下的简单网页小游戏，而是一个完整的飞机大战：玩家战机在屏幕底部移动、自动发射子弹、敌机从上方不断出现、击毁敌机得分、被击中扣生命值、生命耗尽显示 Game Over。最关键的是——它依然只需要一个 HTML 文件，依然全程不需要你写一行代码，依然全部在手机上完成。

这篇文章会延续上一篇的零基础视角。我不会假设你懂游戏开发、懂 Canvas、懂 JavaScript。你只需要会把想法告诉 AI，会保存文件，会用 ToApp 打包——就够了。

你需要准备的三样东西

比上一篇多一样——因为我们要做游戏，建议你先花几分钟想清楚“想做一个什么样的游戏”。

1. 一个 AI 大模型的对话窗口。ChatGPT、Claude、Gemini、DeepSeek、文心一言、豆包都可以。不需要付费版，免费的足够用。

2. 一部安卓手机，并且装好了 ToApp。如果还没装，先去这里下载。完全免费，所有数据本地处理，不需要电脑。

3. 一个大致的游戏想法。这篇教程会带你做“飞机大战”，但你可以把里面的元素换成太空飞船、潜水艇、魔法生物、赛车……只要核心玩法是“控制一个角色躲避/射击下落的敌人”，这篇教程的结构都适用。

准备好了吗？我们开始。

游戏设计：我们要做什么

在让 AI 写代码之前，先让我们对要做的游戏有一个清晰描述。这个描述会直接影响 AI 生成的结果。

我们要做的飞机大战包含这些元素：

玩家战机：位于屏幕底部，玩家用手指拖动它左右移动。
自动射击：战机不需要玩家按射击键，会自动向上发射子弹。
敌机：从屏幕顶部随机位置出现，向下飞行。速度会越来越快。
碰撞与得分：子弹击中敌机，敌机爆炸，玩家得分；敌机撞到玩家或逃到底部，玩家扣一条命。
生命值：玩家有 3 条命，扣完游戏结束。
视觉风格：深色太空背景、霓虹光效、爆炸粒子——和 ToApp 的深色界面比较搭。

飞机大战核心机制手绘示意图：玩家战机、向上发射的子弹、从顶部落下的敌机、得分 +10 和三条生命值 — 飞机大战核心玩法：拖动战机、自动射击、击落敌机得分、保护生命值

为什么选这种设计？因为它刚好卡在“简单”和“完整”的中间点：代码不会太复杂，AI 一次就能生成；但做出来又是一个真正“能玩”的游戏，而不是一个只能点一下的 Demo。

一个小建议：第一次做的时候，不要加太多功能。什么道具系统、排行榜、存档、音效——这些都可以后面再加。先把“能移动、能射击、能得分、能结束”这四个核心闭环跑通，你的第一个游戏就已经成功了。

把游戏需求告诉 AI

打开你的 AI 对话窗口。接下来这段话你可以直接复制粘贴，也可以根据自己的想法修改。关键原则是：说清楚游戏类型、画面风格、操作方式、胜负规则、技术约束。

下面是我已经调试好的一段提示词。它足够具体，能让大多数 AI 一次性生成一个可运行的飞机大战：

请帮我生成一个完整的单文件 HTML5 飞机大战游戏，文件名为 index.html，要求如下：

1. 使用 HTML5 Canvas 绘制游戏画面
2. 深色太空背景，带缓慢下落的星星粒子效果
3. 玩家战机位于屏幕底部，可以通过触摸或鼠标拖动左右移动
4. 战机自动向上发射子弹，子弹有发光效果
5. 敌机从屏幕上方随机位置出现并向下移动，数量和速度会随分数逐渐提升
6. 子弹击中敌机后产生爆炸粒子效果，玩家得分 +10
7. 玩家初始有 3 条生命，敌机撞到玩家战机或到达屏幕底部时扣 1 条命
8. 生命值耗尽后显示 Game Over 界面和“重新开始”按钮
9. 屏幕顶部显示当前分数和剩余生命值
10. 所有 CSS 样式和 JavaScript 都内联在 HTML 文件中，不引用任何外部资源
11. 适配手机屏幕，全屏显示，禁止页面滚动，禁用默认触摸行为
12. 使用 requestAnimationFrame 实现游戏循环，保证运行流畅

手绘风格示意图：用户在 AI 对话框中描述飞机大战游戏需求，AI 回复包含 HTML、CSS 和 JavaScript 的代码 — 把清晰的游戏需求描述给 AI，让它一次性生成可运行的单文件 HTML 游戏

把这段发给 AI 之后，它会回复你一大段代码。这段代码通常包含三部分：

<style> 标签里的样式：设置全屏、深色背景、隐藏滚动条。
<canvas> 标签：游戏画面真正绘制的地方。
<script> 标签里的 JavaScript：处理玩家输入、更新敌机和子弹位置、检测碰撞、更新分数。

AI 生成的代码可能长这样（这里是简化示意，你的会比这个丰富）：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星际战机</title>
    <style>
        body { margin: 0; overflow: hidden; background: #050510; }
        canvas { display: block; width: 100vw; height: 100vh; }
    </style>
</head>
<body>
    <canvas id="game"></canvas>
    <script>
        const canvas = document.getElementById('game');
        const ctx = canvas.getContext('2d');
        // AI 会在这里生成完整的游戏逻辑
    </script>
</body>
</html>

保存为 index.html

拿到代码后，按照上一篇教程的方法保存成 index.html。推荐做法：

如果 AI 支持直接下载：找到代码块旁边的“下载”或“导出”按钮，直接保存为 HTML。
如果不支持：长按复制代码，打开手机上的文本编辑器（如 MT 管理器、QuickEdit），新建文件，粘贴进去，保存为 index.html。

保存好之后，先不要急着打开 ToApp。我们先用手机浏览器打开这个文件，确认游戏能玩。

在浏览器里试玩

在手机文件管理器中找到 index.html，选择“用浏览器打开”。你应该会看到一个深色背景，战机在底部，敌机从上方落下。

测试时重点检查这几点：

拖动战机：手指按住战机左右移动，战机是否跟随？
自动射击：战机是否持续向上发射子弹？
击中敌机：子弹命中后敌机是否消失并加分？
扣生命：敌机撞到你或逃到底部，生命值是否减少？
游戏结束：3 条命用完后是否出现 Game Over 和重新开始按钮？
全屏适配：画面是否铺满整个屏幕，没有出现白边或滚动条？

如果某一项不正常，回到 AI 对话框告诉它。比如：

战机拖动的时候不跟手，请改成手指按在哪里，战机就平滑移动到哪里。

或者：

敌机速度太慢了，请让敌机速度随分数逐渐加快，并且每隔一段时间生成更多敌机。

AI 会帮你改。你不需要懂代码，只需要描述问题。

为什么一定要先测试？浏览器是最快的测试环境。如果游戏在浏览器里都不能正常运行，打包成 APK 后大概率也不行。先把浏览器里的版本调顺，再进 ToApp。

用 ToApp 打包成 APK

游戏在浏览器里跑顺之后，剩下的步骤和打包普通网页完全一样。

打开 ToApp，在创建页面选择“本地文件”模式，然后选择“导入单个 HTML 文件”。找到你刚才保存的 index.html，导入进来。

ToApp 选择本地文件模式界面截图，显示导入 ZIP 文件和导入单个 HTML 文件两个选项 — 在 ToApp 创建页面选择“本地文件”模式，然后选择“导入单个 HTML 文件”

导入之后，设置应用信息：

应用名称：比如“星际战机”、“飞机大战”、“我的空战”。
应用图标：你可以让 AI 生成一张飞机或飞船图标（PNG 格式），也可以直接用手机相册里的图片。如果懒得弄，ToApp 会提供默认图标。
包名：根据应用名称自动生成，保持默认即可。

填写应用名称、上传图标，包名会根据名称自动生成

如果你想让游戏体验更沉浸，可以在“更多设置”里开启边到边显示，让游戏画面延伸到屏幕边缘。深色模式也可以打开，和太空主题更配。

设置完成后，点击“生成 APK”。ToApp 会在手机本地完成打包，通常只需要几秒到十几秒。

安装到手机

生成完成后，ToApp 会询问是否直接安装。点击安装，这时 Android 系统可能会弹出“禁止安装来自此来源的应用”的提示。

解决方法和上一篇一样：

在弹出的提示里点“设置”或“允许从此来源安装”。
在“安装未知应用”权限页面找到 ToApp，打开开关。
返回 ToApp，重新点击安装。

安装完成后，回到手机桌面，你会看到自己命名的游戏图标。点开它。

这一刻，你做的不再是一个网页，而是一个真正安装在手机上的游戏 App。它不需要网络，不需要浏览器，像一个普通应用一样躺在桌面里。你可以随时打开玩一局。

这就是你做的第一个手机游戏。

看懂 AI 生成的代码（可选）

虽然你不需要写代码，但简单了解 AI 生成的代码结构，以后想改游戏时会更有底气。一个典型的飞机大战 HTML 文件主要包含这些模块：

初始化：设置 Canvas 大小、获取绘图上下文、监听触摸/鼠标事件。
游戏循环：用 requestAnimationFrame 不断更新画面，每帧做三件事：更新状态、检测碰撞、重新绘制。
玩家对象：记录战机位置、大小、生命值。
子弹数组：存储所有正在飞行的子弹，每帧更新它们的位置。
敌机数组：存储所有敌机，每帧更新位置并判断是否超出屏幕。
粒子效果：敌机被击中时生成的小光点，过一会儿消失，用来模拟爆炸。
碰撞检测：判断子弹是否击中敌机、敌机是否撞到玩家。
UI 绘制：在屏幕顶部画出分数和生命值。

不需要记住这些名词。只要知道：如果你以后想让 AI 帮你加功能，你可以直接说“加一个护盾道具，捡到后 5 秒内无敌”，AI 就知道该在这些模块里插入新的逻辑。

怎么让游戏更好玩

第一个版本跑通之后，你可以让 AI 帮你逐步增加功能。下面是一些适合新手尝试的扩展方向，按复杂度从低到高排列：

换皮肤：把战机从三角形改成飞船、把敌机改成陨石、把背景从星空改成海洋。只需要改 AI 的绘制部分。
加难度曲线：让敌机速度更快、生成更频繁，或者出现血量更厚的“精英敌机”。
加道具：比如“双发子弹”、“护盾”、“清屏炸弹”。捡到后短时间内改变玩家状态。
加音效：射击、爆炸时使用 Web Audio API 生成简单音效。注意不要用外部音频文件，保持单文件。
本地最高分：用 localStorage 记录最高分，下次打开游戏还能看到。
BOSS 战：每得一定分数后出现一个大型敌机，需要多次命中才能击败。

手绘风格的游戏扩展方向示意图：护盾道具、双发子弹、BOSS 敌机、最高分奖牌和音效 — 跑通第一个版本后，可以逐步加入道具、BOSS、音效和本地最高分

每次只加一个新功能，测试通过再加下一个。这样不会因为改动太多而找不到问题。

写在最后

做第一个游戏和做第一个 App 有点像，都会经历一个“它真的动了”的惊讶时刻。但游戏带来的反馈更直接：你拖动战机，它立刻跟着走；你击中敌机，它立刻爆炸；你生命耗尽，屏幕上立刻出现 Game Over。这种即时反馈会让人上瘾——不是玩游戏上瘾，而是“创造东西”上瘾。

很多人会觉得自己不可能做游戏，因为游戏开发听起来需要引擎、需要美术、需要物理、需要音效。但今天我们做的这个飞机大战证明了一件事：一个单文件 HTML 游戏，加上一个能把网页打包成 App 的工具，已经足够让你做出一个能玩、能分享、能安装到手机上的游戏。

代码是 AI 写的，但游戏设计是你的：你决定了它叫“星际战机”还是“深海猎手”，决定了它是什么颜色、什么难度、有没有道具。你在和 AI 的对话中做了所有关键决策。这就是零代码时代的开发方式——人负责想法和判断，AI 负责实现。

好了，去打开你刚做的游戏，玩一局。如果你愿意，把最高分截图发给我看看。

文章太长？看不懂？

点此一键复制，发给你的 AI，让它分步教会你如何用 ToApp 和 AI 做一个飞机大战手机游戏

seegood

ToApp 独立开发者，专注于让零基础用户也能用 AI 生成自己的 App。了解更多

准备好做你的下一个游戏了吗？

ToApp 完全免费，无广告，所有数据本地处理。把你的每一个游戏想法，都装进口袋里。

免费下载 ToApp →