Skip to content
AI 编程入门 · 从想法到作品JLU iOS CLUB / LEARNING NOTES

从零制作太空射击游戏

从一架能移动和开火的飞船开始,经过六轮制作,完成炮口、Boss 战、暂停与三个不同玩法的关卡。

LEARNING NOTES07

这次做一款桌面浏览器游戏《深空防线》。先让飞船动起来,玩一局,找到需要修改的地方,再逐步加上 Boss 和新关卡。每一轮都从上一轮能运行的版本继续,完成一项具体变化后再试玩。

完成后的第三关,Boss 血条进入第二阶段,战场出现扇形弹与竖直激光
最终做到的第三关「轨道船坞」。画面顶部显示 PHASE 2,场上同时有扇形弹和激光。本章会从最初的移动、开火一步步做到这里。

先准备一个能反复修改的项目 ​

新建一个练习文件夹,让 Agent 在这个文件夹里工作。首轮从空目录开始;中途接着做时,可以下载对应的阶段版本。把整个版本目录复制到练习文件夹,保留其中的 index.html、styles.css 和 game.js,用桌面浏览器打开 index.html。

下载《深空防线》六轮游戏源码

每完成一轮,保留一份当时能运行的副本。不要把新一轮的 game.js 单独塞进旧版本:页面元素和样式可能已经跟着变化。下文提示词根据原资料整理,适合在自己的工作副本中跟做。

制作顺序这一轮做什么完成后应能观察到什么
01 首版移动、开火、敌机、计分与重开可以完整玩完一局
02 炮口与弹道给双列子弹明确的出弹位置新子弹从两个炮口飞出
03 Boss 战出场、两阶段攻击、胜负结算击毁第 10 架敌机后进入 Boss 战
04 暂停与恢复冻结战斗,处理按键状态恢复时正确响应仍按住的键
05 废弃矿场岩石掩体、三波敌机和新 Boss飞船可穿过岩石,子弹会击碎岩石
06 轨道船坞激光关卡、第三个 Boss、切关检查在预警结束前躲开固定的危险列

工具准备见安装与启动。这里直接进入制作;需要回查时,再看任务描述、调试与交接、Skill和浏览器操作。

第一轮 · 先做出可以玩完的一局 ​

先确定一局游戏的闭环:玩家移动和开火,敌机从上方出现,击毁后加分,受击后扣生命,生命耗尽后结算,再从初始状态重开。第一版只做这条流程。

交给 Agent 的任务:

text
在当前空目录制作桌面浏览器太空射击游戏《深空防线》。
使用 HTML、CSS、JavaScript 和简单图形,不安装依赖,打开 index.html 即可玩。

玩家用方向键或 WASD 移动,按住空格连射,飞船不能移出战场。
敌机从上方出现,击毁一架加 100 分;玩家初始 3 条命,受击扣 1 条命。
显示操作说明、分数与生命。生命耗尽后显示最终得分,按 Enter 可重开。

请先实现移动与开火,再接入敌机、碰撞、计分、结算和重开。
同一架敌机只能计分或造成碰撞伤害一次。
重开时清空敌机、子弹和分数,恢复 3 条命;连续重开不能让游戏加速。
交付运行入口、关键文件说明和实际验证过的结果。

制作时按三步推进。 先打开页面试四向移动,确认飞船不会离开边界;接着按住空格,看子弹是否稳定发出、能否击毁敌机;最后主动受击,走完失败和重开。前一步没跑通,就把具体操作和现象反馈给 Agent,修好后再接下一步。

第一版深空防线,飞船向上发出双列子弹,机身尚未画出对应炮口
第一版已经能向上发射双列子弹。下一轮要补的细节就在机头:画面还看不出两列子弹分别从哪里发出。

完成这一轮前,实际试一次: 击毁一架敌机看分数;让同一架敌机撞上飞船看扣命;用完生命进入结算,再连续重开两次。每次都应回到 0 分、3 条命,旧敌机和子弹被清空,生成速度保持正常。保存为「01 首版」。

第二轮 · 让炮口与弹道对齐 ​

从首版继续。这里已经有向上的双列弹道,需要在机头画出两个炮口,并让新子弹使用这两个位置生成。

先让 Agent 说明坐标怎么共用,再修改。 飞船绘制和子弹生成都要读取同一组炮口位置。若两处分别写一套偏移量,静止时可能看着接近,移动或修改机身以后却容易错开。

text
在首版上添加左右两个可见炮口,保留现有移动、长按空格和双列弹道。
左右子弹分别从对应炮口朝机头前方发射。
横移时,炮口与新子弹出生点必须跟随飞船一起移动。

请说明如何共用炮口坐标,再实施。完成后检查:原地连射、左移连射、
右移连射,以及结算重开后的第一次开火。把结果保存为第二版。
第二版的机头有两个发光炮口,最近的一对子弹分别与左右炮口对齐
第二版。先找机头前的两个发光炮口,再看最靠近机身的那一对子弹;这两处应分别对齐。

验收要盯住“刚出现的子弹”。 原地按住空格,然后分别向左、向右移动并持续开火。旧子弹继续沿原来的轨迹前进,不应被拖着横移。需要逐帧判断时,录一段短视频,对照子弹出生那一帧的炮口位置。最后重开,检查第一对新子弹仍然对齐,保存为「02 炮口与弹道」。

第三轮 · 把 Boss 战接入一局游戏 ​

从第二版继续。先决定什么时候出现 Boss、攻击如何提醒玩家,以及打完后这一局如何结束。《深空防线》采用“击毁第 10 架普通敌机后进入 Boss 战,击败 Boss 即本局胜利”的规则。

环节要实现的行为怎么检查
出场第 10 次击毁后停止生成普通敌机,预告后只出现一个 Boss从 9 架打到 10 架,看预告和独立血条
第一阶段先提示危险方向,再发射扇形弹看见预警后移动,确认有躲避机会
半血换招血量首次降到一半或以下时切换一次,增加锁定攻击预警出现后离开原位置,看危险区是否留在原处
结算击败 Boss 显示胜利,奖励只加一次;双方同帧归零判玩家失败分别覆盖胜利、失败和同时归零的边界情况
重开清空旧 Boss、敌机、子弹与预警,恢复开局状态从胜利页和失败页分别重开

制作分两次落地。 先接通“普通敌机 → 预告 → Boss 入场 → 结算”,确认不会反复生成 Boss;再加入扇形弹、半血换招和锁定攻击。这样遇到问题时,可以明确是在流程衔接还是某个招式上出错。

展开本轮任务提示词
text
在第二版上加入两阶段 Boss 战,保留双炮口、移动和长按空格开火。
击毁第 10 架普通敌机后停止刷新的普通敌机,显示来袭预告,随后出现一个 Boss 和独立血条。
第一阶段先显示危险方向,再发射扇形弹。
血量首次到一半或以下时只换阶段一次;第二阶段增加锁定攻击,
锁定后的攻击位置固定,让玩家可以离开危险区。

击败 Boss 后显示本局胜利,奖励只记一次。玩家先阵亡判失败,
同一帧双方归零也判失败。胜败都能重开,清空旧敌机、Boss、弹幕和预警,
恢复初始生命,分数和击毁数归零。

先说明上述状态如何衔接,再分步实施。交付第三版和实际验收结果。
第三版击败 Boss 后显示防线守住了与重新出击按钮
第三版的胜利结算。看到「防线守住了」后,本局应停止推进,点击「重新出击」开始新的一局。此图由调试方式缩短 Boss 战后补拍,分数属于演示当局。

正常试玩至少走通一次出场与结算。半血阈值、奖励防重和同帧阵亡不容易靠一张截图证明,可以让 Agent 补充针对这些规则的检查,分别记录实际试玩与代码检查。保存为「03 Boss 战」。

第四轮 · 暂停后,接着刚才的操作 ​

从第三版继续,加上 P 暂停和恢复,同时显示 Boss 预警剩余时间。暂停时,飞船、敌机、子弹和战斗计时都应停住;恢复后从原状态继续。

这轮曾出现一个具体问题:一直按住空格,按 P 暂停,再按 P 恢复,射击却停了;必须松开空格再按。调查发现,暂停操作清空了“当前按住哪些键”的记录。手还按着,游戏已经忘记了这个输入。

先复现,再沿输入路径修复。 让 Agent 找到按键按下、暂停、恢复、判断开火和松键的处理位置。暂停可以停止战斗更新,但已经按住的键不应无故丢失;暂停期间收到松键事件时,仍然要把相应的键从记录中移除。

text
在第三版添加 P 暂停与恢复,显示 Boss 预警剩余时间。
暂停时冻结移动、射击、敌机、弹幕和预警倒计时。

按住空格或方向键,暂停再恢复,全程未松手时应继续响应;
暂停期间已经松开的键,恢复后不能继续生效。
请先检查按键记录与战斗更新的关系,解释准备修改的地方,再实现并逐项试玩。
单独说明:暂停期间才新按下的键,恢复时怎样处理。
第四版暂停时,飞船位于场地中央附近
先按住右键,再按 P 暂停。记住飞船与场地中央竖线的相对位置,右键始终不要松开。
保持右键按下并恢复后,飞船移到了中央竖线右侧
恢复约 0.36 秒后,飞船向右移动。这组截图说明第四版保留了暂停前已经登记的按键。

再测三种时序,不能只试一次暂停。

操作顺序恢复时要观察什么资料包第四版的状态
暂停前按住右键,全程不松手是否立即继续右移实测会继续移动
暂停期间才按住右键,恢复时仍按着是否承认新按下的键实测仍停在原地,需要松开重按
暂停期间松开右键,再恢复是否停止移动应停止;需在自己的版本验证松键路径
暂停期间才按下右键的对照,恢复后飞船仍停在中央附近
对照组:暂停后才按住右键。第四版恢复后仍留在原处,因为暂停分支没有登记新按键。这是阶段版本的已知限制。

如果你希望“恢复时所有仍按住的键都立即生效”,就继续要求 Agent 在暂停期间维护按下和松开的记录,只冻结战斗更新。改完重测表中的三组,再对空格执行同样的检查;最后在 Boss 预警中暂停,确认倒计时不会偷偷结束。保留这一轮结果与未完成项,再进入关卡制作。

第五轮 · 做一个玩法不同的「废弃矿场」 ​

从第四版继续。第二关的变化是可破坏的岩石掩体:飞船能穿过,子弹会被挡住,小岩石一发碎,大岩石两发碎。 先把这组碰撞规则说清楚,再让 Agent 加波次和新敌人。

先做入口和重置。 顶栏增加 01 / 02 切关,第二关从 0 分、3 条命开始。切关立即重开选中的关卡,旧弹幕和 Boss 不带过去。第二关失败后,从自己的第一波重开。

再做场景和碰撞。 摆放大小岩石,给飞船的出生区留出空间。分别处理飞船经过岩石、玩家子弹命中岩石和敌方子弹命中岩石。岩石只影响子弹,不造成飞船接触伤害,也不计入敌机击毁配额。

第五版的第二关废弃矿场,场内有两块大岩石和两块小岩石
第五版,顶栏选中 02。第一波场内有两大两小四块岩石,下方出生区保持空旷。找准一块小岩石,接下来都用同一块做检查。

最后接上波次与 Boss。 三波敌机的击毁配额分别为 8、10、12;达到本波配额并清空场上敌机后才进入下一波。第二、三波加入远程敌机 Sapper,第三波结束后进入两阶段 Boss「矿脉钻机」战。它的后半场会震碎剩余岩石,迫使玩家从借掩体躲避转为在开阔地移动。

展开第二关制作任务
text
在第四版上添加独立第二关「废弃矿场」,保留第一关所有原有规则。
先增加 01/02 切关和关卡重置,再实现岩石碰撞,最后接入波次与 Boss。

切关立即从 0 分、3 条命重开;死亡回到本关第一波,清空旧敌机、弹幕与预警。
岩石只挡子弹,不挡飞船、不造成接触伤害;小岩石 1 发碎,大岩石 2 发碎。
玩家打碎岩石得 10 分,岩石不计入击毁配额。
三波配额 8/10/12,配额达成且场上敌机清空才进下一波。
第二、三波加入远程敌机 Sapper,其子弹也会被岩石挡住。
三波结束后进入两阶段「矿脉钻机」Boss 战;半血后震碎剩余岩石,核心暴露。

先列出第二关的敌人、攻击与碰撞规则,再实施。
每一步检查后回到第一关,确认第 10 架敌机触发 Boss、胜负与重开仍正常。

用连续三帧检查“穿过”和“击碎”。

检查起点,飞船位于右下方小岩石的正下方
① 起点:认准飞船正上方的小岩石,先不射击。
飞船向上穿过同一块小岩石,生命仍然是三条
② 只移动:飞船经过岩石,耐久仍为 3/3,岩石仍在。说明岩石没有挡住飞船或造成接触伤害。
同一块小岩石被一颗子弹击碎,原位置出现碎片,得分增加到十
③ 再射击:回到起点,子弹命中同一块小岩石后产生碎片,分数变为 10。这组截图用调试接口布置起点和单颗子弹,由游戏自身处理碰撞。

试玩时再检查大岩石需要两次命中、敌方子弹被岩石挡住、波次正确推进,以及切回第一关后规则保持正常。资料包第五版通过了 28 项 Node 检查,但当时完整的 Safari 手感验收仍待补;自己的版本仍要实际走完这些操作。保存为「05 废弃矿场」。

第六轮 · 用激光做出「轨道船坞」 ​

从第五版继续。第三关沿用飞船操作、波次推进和胜负结算,把核心威胁换成固定纵列的激光:先标出危险位置,再发射,玩家可以在预警结束前横移离开。

先写下本关的具体规则。 第三关只保留普通冲锋敌机 Charger,三波配额为 10、12、14;没有岩石和 Sapper,第二、三波才出现关卡激光。Boss「环轨母舰」有 3000 血,第一阶段使用扇形弹,1500 血时进入第二阶段,扇射之外再加入激光。

实现激光时,把预警与伤害分开。 激光生成时记录玩家所在的横坐标,危险列随后保持固定。预警阶段只提示,发射阶段才判断伤害;激光结束、切关和重开都要清理旧状态。暂停时,预警和持续时间应一起冻结。

text
在第五版上制作独立第三关「轨道船坞」,沿用已有波次、移动、双炮、暂停与结算。
增加顶栏 03 入口,切关与重开都清空旧关卡状态。

本关只生成 Charger,三波击毁配额为 10/12/14,没有岩石和 Sapper。
第二、三波增加竖直激光:生成时锁定玩家当时的横坐标,预警期间不造成伤害,
位置固定,玩家可以横移躲开;预警结束才发射,结束后清除。
Boss 为「环轨母舰」,3000 血,第一阶段扇射,1500 血时只转阶段一次,
第二阶段保留扇射并增加激光。击败后显示本关胜利。

先确认激光预警时长、持续时长和出现间隔,再实施。
回归第一关的 Boss 流程与第二关的岩石、波次和 Sapper,记录实际检查结果。

如果已经整理了自己的关卡制作 Skill,可以让它沿用“读取现状、确认规则、实现、复查旧关”的步骤;本轮的新机制仍按上面的具体规则制作。

第三关战场出现竖直激光栅格,飞船仍位于亮线范围内
第三关的激光栅格。此帧激光已经发射,飞船仍在亮线内;试玩时应在预警阶段横移,让激光亮起时飞船已离开这一列。

先在普通波次检查“预警 → 横移 → 激光发射 → 清理”,再进入 Boss 战检查半血换招。对照本章开头的成品截图,顶部应显示 PHASE 2,场上既有扇形弹,也有竖直激光。第二阶段只触发一次,不能每次受伤都重新切换。

最后做一次跨关验收。 从默认 01 切到 03,再返回 01。每次都看常驻关卡编号和高亮按钮,检查分数、生命以及旧弹幕是否重置。接通浏览器工具后,可以直接交给 Agent 执行下面的任务,不需要重新学习配置。

text
打开当前游戏页面,读取初始状态,从 01 切到 03,再切回 01。
每次切换后记录常驻关卡编号、选中的按钮、分数与生命。
检查是否残留上一关的 Boss、激光或弹幕;报告实际操作和控制台错误。
切到第三关后,页头关卡编号为 03,03 按钮高亮
切到第三关:左侧页头为 ORBITAL ARCADE / 03,中间的 03 按钮同时高亮。
返回第一关后,页头关卡编号为 01,01 按钮高亮
回到第一关:页头和选中按钮一起恢复为 01。这两张是手动切关补拍;判断 Agent 是否实际完成操作,还要核对它的工具调用记录。

交付前,把一局完整玩完 ​

逐项做最后一轮检查,记录实际结果。发现问题就写明所在版本、操作顺序、预期和实际现象,回到对应步骤修复。

检查范围实际要做的动作
基础操作四向移动到边缘;原地与横移连射,观察新子弹与炮口
第一关正常打到第 10 架敌机,经历预告、Boss 两阶段和结算
暂停分别测试一直按住、暂停期间新按下、暂停期间松开;观察预警计时
第二关穿过岩石、打碎大小岩石、观察敌弹被阻挡,完成三波与 Boss
第三关预警后移出危险列,检查半血换招、胜利与失败
重开与切关胜败后重开;连续重开两次;在三关间来回切换,看状态是否清空

留下可运行的入口、各轮副本和一份检查记录。记录里区分“实际试玩通过”“代码或脚本检查通过”“还没验证”,这样下一次继续制作时,知道能从哪里接着往前走。

本章截图与阶段行为来自《太空射击实战资料包(精简版)》。截图包含 Edge 补拍与交付时的自动化画面,调试布置的场景已在图注注明。它们帮助定位要观察的细节,完整操作仍需在自己的版本里验证。

本站点基于 MIT License 发布