目录

• 第一步：一步到位的提示词
• 第二步：本地搭建
• 第三步：替换素材
• 第四步：验收成果与避坑指南
• 结语

“我想做个游戏。”

这句话放在过去，通常意味着三件事：

1. 头发离家出走。
2. 先看100个小时的 Unity 教程，打开还是只会创建个 Cube（立方体）。
3. 电脑桌面多了一个叫“game”的文件夹，然后就没有然后了。

大人，时代变了。

以前做游戏要懂 C++，要懂渲染管线。现在？你只需要懂 如何使唤AI。

我教大家手搓《太空肉鸽射击游戏》（类似吸血鬼幸存者+雷电）。只要一句提示词，会复制粘贴，20分钟后，你就能在朋友圈晒出你的独立游戏 Demo。

第一步：一步到位的提示词

很多人用 AI 写代码翻车，是因为需求提得太多，AI 只能写一千多行。

我们不需要这游戏多复杂，只需要具备现代游戏的三大爽点：捡垃圾（收集碎片）、升级三选一（肉鸽要素）、打Boss（类魂要素）。

最最最关键的一点：得能换肤！ 很多 AI 生成的代码是一次性的，想像王者荣耀一样换个皮肤？得懂代码才行。

所以，我精心调教了一个提示词。

提示词：

# 角色
你是一位精通HTML5 Canvas和JavaScript的游戏开发专家。
任务
请为一个名为"Pixel Sky Striker"的像素风格飞行射击游戏编写一个完整的、单文件的HTML代码（包含HTML, CSS, 和 JavaScript）。代码需要在浏览器中直接打开即可运行，无需外部资源。
游戏设计
1. 核心玩法

类型：纵向卷轴飞行射击（STG）。
控制：

玩家通过键盘方向键（上下左右）或WASD控制飞机移动。
飞机自动射击，无需按键。
限制飞机不能飞出屏幕边界。


目标：击败敌军，收集碎片升级，并在关卡最后击败BOSS。

2. 视觉风格

背景：深色太空背景，带有移动的星空效果（视差滚动），营造飞行感。
图形绘制：不要使用图片，全部使用 Canvas API (fillRect, arc 等) 绘制像素风格的矩形或几何图形。
颜色区分（非常重要）：

主角：蓝白色战机。
主角子弹：亮黄色或荧光绿色，细长矩形。
敌军：红色或橙色，造型各异。
敌军子弹：深红色或紫色的圆形球体。
碎片（经验值）：青色或亮蓝色的闪烁小方块。
BOSS：巨大的暗红色结构，带有警告色的核心。



3. 游戏机制细节
A. 敌军系统

敌军从屏幕顶部生成，向下移动。
移动模式：

敌军不能只是直线向下，必须包含简单的AI移动（如正弦波移动、甚至轻微追踪玩家X轴位置），增加射击难度。


敌军会周期性向下方发射子弹。

B. 碎片与升级系统 (Rogue-like元素)

掉落：击杀敌军后，必定掉落“能量碎片”。
拾取：

玩家接近碎片一定距离（磁吸范围）时，碎片自动飞向玩家并被拾取。


升级阈值：

第一次升级：收集 10 个碎片。
第二次升级：再收集 20 个碎片（累计30）。


升级UI：

当达到升级条件时，游戏暂停。
屏幕中央弹出一个半透明的UI面板。
提供 3个随机选项（卡片形式）。
玩家点击选项后，游戏恢复并应用效果。


武器升级逻辑：

如果选择了已有的武器，增强其属性（如：射速更快、伤害更高、子弹变大）。
如果选择了新武器，增加发射模式（如：从单发变成双发、增加散弹、增加侧翼导弹）。
可选升级池：

机炮强化：射速大幅提升。
多重射击：增加子弹数量（扇形散射）。
强力弹头：子弹伤害和体积增加。





C. 关卡流程

阶段 1：普通敌军波次（持续约60秒或击杀一定数量敌人）。
BOSS 战：

屏幕出现 "WARNING" 提示。
BOSS 登场，血量长，发射复杂的弹幕（如环形弹幕或扇形弹幕）。
击败 BOSS 后显示 "VICTORY" 画面。


失败条件：玩家被敌军子弹或身体撞击，扣除生命值。生命值为0时显示 "GAME OVER" 并提供“重新开始”按钮。

4. 技术实现要求

使用 requestAnimationFrame 进行游戏循环。
必须包含简单的 AABB 碰撞检测（矩形碰撞）或圆心距离检测。
代码结构清晰，将 Player, Enemy, Bullet, Particle, GameLoop 分离为类或对象。
CSS 样式：确保 Canvas 居中，游戏容器美观，字体使用类似 ‘Courier New’ 或像素字体。

请现在编写代码，确保代码完整，不要截断。

AI 生成的代码预览

第二步：本地搭建

AI 代码生成完了，不需要安装 VS Code，记事本就够了。

1. 建文件夹

在你的电脑桌面上，新建一个文件夹。比如“R星未来项目”。

2. 创建核心文件

在这个文件夹里，右键 -> 新建 -> 文本文件。 把名字改成 index.html。 注意： 如果你的电脑看不到 .txt 后缀，请去文件夹设置里把“显示文件扩展名”勾上。这一步拦住了90%的入门者，但难不倒你。

文件创建示意图

3. 注入灵魂

用记事本打开 index.html，把 AI 给的大段代码，全部复制粘贴，保存，关闭。

双击这个文件，你的浏览器会弹出一个窗口，里面有一个简陋但能玩的飞机大战。

游戏运行效果预览

第三步：替换素材

继续和 Gemini 沟通，修改得到自己想要的游戏代码后，准备换皮。

现在游戏里全是红红绿绿的方块，太程序员审美了。我们要把它变成真正的游戏设计。

1. 搞点素材

你需要准备几张背景透明的 PNG 图片。 去哪找？

• 懒人法：直接去百度搜“飞机素材 png”，让 AI 抠图。
• 极客法：让 nano banana 给你画几张像素风战机。
• 灵魂画手：打开 Windows 画图，自己画一个。

像素飞机素材示例

我们需要三张图：

• 玩家飞机：命名为 player.png
• 杂兵飞机：命名为 enemy.png
• 大Boss：命名为 boss.png

把这三张图，直接拖进刚才那个 picture 文件夹里，和 index.html 放在一起。

图注：这就是传说中的“项目工程目录”，是不是很简单？

2. 修改配置

我们要让 AI 使用我们的本地图片。

提示词：

请帮我修改上面的代码，保持游戏逻辑不变，使用本地图片素材。
本地素材路径：C:\Users\Administrator\Desktop\game\picture

玩家飞机：使用 "player.png"
普通敌军：使用 "enemy.png"
BOSS：使用 "boss.png"

请注意：

如果图片还没有加载完成，请确保游戏不会报错（可以先用简单的色块代替，或者等待加载）。
子弹和碎片继续使用原来的Canvas几何图形绘制即可，不需要图片。

重新复制粘贴代码，右键点击 index.html，选择 打开方式 > 记事本 > 全选并粘贴。

保存！

第四步：验收成果与避坑指南

再次双击 index.html。 如果不出意外，你那简陋的方块，已经变成了酷炫的战机！这感觉，就像给刚买的毛坯房完成了精装修。

最终成品效果展示

避坑贴士：

1. 图片方向不对？ 如果你的飞机在游戏里是横着飞的，说明素材原本就是横着的。 解决办法：用电脑自带的看图软件打开图片，把它旋转一下，让机头朝上，然后保存。不用改代码，刷新网页就行。

2. 图片显示不出来？ 检查两点：

   • 文件名是不是写错了？player.png 和 Player.png 在代码里是两个东西。
   • 浏览器是否出于安全，阻止了本地图片加载，推荐使用 VS Code 扩展市场中 Live Server。

3. 游戏加载不出来？ 按 F12，复制错误信息给 AI，AI 会帮你调试。

结语

看，制作一个属于自己的游戏，真的非常简单。

现在，关掉这篇文章，去新建一个属于你的R星文件夹吧。