从“键盘躲避”到“极致UI”：我的《一箭又一箭》AIGC开发历险记

🌟 从“键盘躲避”到“极致UI”：我的《一箭又一箭》AIGC开发历险记

💡 博主碎碎念：本次开发过程一波三折，经历了对需求的彻底误解、推倒重来、AI生成死局的绝望、以及无数次Git推送失败的崩溃。但最终，我交出了一份自己非常满意的作品。

📌 一、 作业基本信息

项目	内容
这个作业属于哪个课程	H202601软件工程与软件工程实践
这个作业要求在哪里	2026 秋软件工程个人作业（第二次）
这个作业的目标	使用 Python 和 AIGC 完成“一箭又一箭”小游戏，实践需求分析、图形交互、路径检测、测试与过程记录。
学号	052402111
GitHub 仓库	Annabelle-Lin/ArrowGame

---

二、 项目展示与核心功能

本项目采用现代化的莫兰迪柔和配色与圆角设计。不仅在核心玩法上完全达标，更在视觉与听觉上进行了大量额外扩展，希望能给玩家带来更流畅、高级的体验。

1. 开始界面

开始界面包含游戏名称、开始按钮、玩法介绍以及顶部的四个箭头图标。界面采用极简的莫兰迪配色与圆角设计，底部明确提示“共5个关卡，每关3次失误机会”，让玩家在进入游戏前就能清晰了解游戏目标与规则。

2. 游戏界面与核心操作

游戏界面采用左右分栏布局：左侧为 10x10 的圆角方格棋盘，不同方向的箭头用不同的柔和颜色区分；右侧为数据面板，实时显示当前关卡、剩余箭头数、失误次数（红心表示），底部提供“重新开始”与“返回首页”按钮。点击前方无阻挡的箭头，箭头会平滑飞出；点击被阻挡的箭头，则扣除红心并提示错误。界面整体规整、交互反馈清晰。

3. 单关通关反馈

当玩家清空当前关卡的所有箭头后，界面会平滑淡入并显示“通关！”文字，同时提供“下一关”按钮。这体现了游戏内建的完整状态机，能够顺畅地处理关卡切换。

4. 失败界面与状态重置

当失误次数耗尽时，界面切换至“挑战失败”状态，并准确指出是哪一关的箭头挡住了你。下方提供“重新开始”按钮，点击即可重置当前关卡的所有箭头布局与失误次数，保证了游戏体验的流畅性，形成了完整的状态流转闭环。

5. 最终胜利（全部通关）

当玩家依次通关所有 5 个关卡后，会触发最终胜利界面，显示“恭喜通关！你完成了所有挑战！”。这不仅是对玩家的激励，也是我游戏状态机完整性的最终体现（包含开始、游戏中、单关通关、失败、全部通关五种状态）。

6.动态演示

🎬 1. 完整正向流程（开始游戏 → 通关 → 下一关）

🎥 动图解说：完整游戏流转与关卡切换

这段GIF演示了游戏最核心的完整正向流程。

1. 🚀 状态切换与悬停反馈：鼠标点击开始界面按钮时，按钮会伴随放大变灰的悬停反馈。点击后伴随平滑的淡入过渡效果进入第一关。
2. ✨ 核心玩法与音效：鼠标悬停在箭头上时同样有轻微放大效果。点击无阻挡的箭头，箭头伴随粒子爆炸特效顺利飞出，同时播放清脆的“嗖”的飞出音效，右侧数据面板（剩余箭头数）实时更新。
3. 🏆 通关反馈：当清空棋盘所有箭头后，界面再次通过淡入动画弹出“通关！”提示，点击“下一关”无缝切换至第2关。这完美展现了game_state状态机在“开始 → 游戏中 → 单关通关”之间的灵活流转。

🎬 2. 异常处理与状态重置（失误 → 失败 → 重开 / 回首页）

🎥 动图解说：容错机制与状态机闭环

这段GIF重点展示了游戏的鲁棒性与完整的状态闭环。

1. 🛡️ 碰撞反馈与音效：连续点击有阻挡的箭头，箭头方块产生晃动变红反馈，同时播放“咚”的撞击音效，右侧红心（失误次数）逐次扣除。这部分验证了精准的前方阻挡检测逻辑和音效系统。
2. ❌ 失败判定：第3颗红心耗尽后，界面淡入弹出“挑战失败”界面，并指出具体的失败关卡。
3. 🔄 状态重置：点击“重新开始”，按钮有悬停放大变灰效果，系统重置当前关卡的箭头布局与失误次数（红心恢复3颗）。
4. 🏠 返回首页：再点击“返回首页”，同样带有悬停反馈和黑色遮罩淡出，无缝跳转回开始界面。这体现了游戏状态机在任何阶段都能被完美重置和跳转的极高灵活性。

✨ 核心扩展功能：

1. 流畅的动画反馈：箭头不是瞬间消失，而是带有 is_flying 状态平滑飞出；成功消除时，原位置会爆出粒子特效。
2. 沉浸式音效：飞出伴随“嗖”声，点击被阻挡的箭头有“咚”的撞击声。
3. 丝滑的转场过渡：开始、失败、通关界面切换时，带有0.3秒的黑色遮罩淡入动画，告别生硬跳转。
4. 完整的关卡系统：内置5个经严密推演、绝对有解的关卡，以及最终通关的胜利界面。

---

三、 项目介绍与实现思路

1. 数据结构与网格表示

游戏棋盘采用 10x10 的二维数组（list）表示。0表示空格，1/2/3/4 分别代表上、下、左、右四个方向的箭头。
每个格子的像素坐标通过 行号 * 单元格大小 与 列号 * 单元格大小 映射到 Pygame 的绘制界面上。

2. 核心机制：路径检测方法 (重点解析)

路径检测是游戏逻辑的重中之重。不能只检查紧邻的格子，必须沿着箭头的方向进行“射线”式检测。
核心逻辑用伪代码表示为：

# 假设点击的箭头在第 row 行、第 col 列，方向为 DIR，dx, dy 为方向增量
while True:
    row += dx
    col += dy
    # 1. 越界检查（碰到边界，飞出棋盘）
    if row < 0 or row >= ROWS or col < 0 or col >= COLS:
        return "fly_out"  # 成功飞出
    # 2. 阻挡检测（碰到其他箭头）
    if grid[row][col] != 0:
        return "blocked"  # 被阻挡

通过这个 while 循环，能完美实现隔着多个空格也能正确检测阻挡的效果，这也是解开死局的关键。

3. 状态机与动画

游戏使用 game_state 变量控制开始、游戏中、单关通关、全部通关、失败五种状态。在状态切换时，引入 transition_alpha 变量处理渐变遮罩，提升了整体的视觉体验。

---

四、 AIGC 协作实录 (我的踩坑与反思)

表：AIGC 辅助开发过程

子任务	借助何种 AIGC 技术	AI 实现或提供了什么	效果如何	人工修改过程
需求重构	ChatGPT	生成点击检测与二维数组框架	搭建了基础框架	彻底废弃了之前理解错误的键盘躲避游戏代码，重新让AI生成
路径检测	DeepSeek	生成四个方向的检测代码	向上判断时出现越界报错	向AI反馈报错，修改了边界条件 (row >= 0) 后正常
关卡设计	DeepSeek	生成关卡二维数组	存在两个箭头面对面的死局	手动调整并验证了5个绝对有解的关卡
UI 界面美化	DeepSeek	生成莫兰迪配色与圆角排版	界面现代化，视觉良好	调整了侧边栏按钮坐标防止重叠，剔除了AI生成的丑陋奖杯图标
动画与音效	DeepSeek	生成粒子系统与淡入过渡逻辑	粒子生命周期过长导致轻微卡顿	调整粒子参数，优化代码结构，实现流畅动画

💡 代表性交互过程描述：

• 关于死局修复：AI 随机生成的关卡经常出现两个箭头面对面互相阻挡，导致游戏永远无法通关。我向 AI 描述了这一逻辑漏洞，要求“关卡必须保证有解”。AI 给出的新数据依然有瑕疵，最终我根据路径检测逻辑，手动调整了部分箭头的分布，保证了可玩性。
• 关于UI美化：前期 AI 生成的界面非常“程序员审美”（灰色网格、直角、默认字体）。我重新输入了极其详细的 Prompt（要求莫兰迪色系、圆角、左右分栏、自定义面板），才实现了最终的“整容级”效果。这让我明白，Prompt 的精准度直接决定了 AI 的输出质量。
• 关于Git历险：在推送代码时，遭遇了长达数天的 Connection was reset。我尝试了切换节点、取消代理、连接手机热点，最终通过网页端上传完成了保底。这让我学会了在极端网络环境下的应急处理。

---

五、 测试与 Git 记录

1. 测试记录

编号	测试内容	预期结果	实际结果	是否通过
T01	点击前方无阻挡的箭头	箭头飞出棋盘并消失	箭头飞出，计数更新	是
T02	点击前方有阻挡的箭头	箭头不飞出，失误次数减1	箭头晃动，红心减少	是
T03	点击位于边缘且朝向棋盘外的箭头	箭头正常消失，不发生越界错误	箭头正常飞出，无越界报错	是
T04	消除本关全部箭头	显示通关并进入下一关	成功进入下一关，关卡数更新	是
T05	失误次数耗尽	显示失败并允许重新开始	弹出失败界面，心数清零	是
T06	游戏进行中重新开始	箭头布局和失误次数恢复	状态重置成功，恢复3颗红心	是

2. Git 与版本控制

本项目严格执行了 Git 工作流，累计进行多次有效提交。以下为部分核心 Commit 记录：

• init: 初始化项目结构与 AI 记录文件
• feat: 实现一箭又一箭基础点击与路径检测逻辑
• fix: 修复关卡死局bug，增加箭头飞出动画与状态管理
• feat: 重构UI界面，采用现代化圆角与侧边栏布局
• docs: 完善 README、测试记录，项目最终交付

---

六、 PSP 表格

任务	预估耗时 (小时)	实际耗时 (小时)	差异 (小时)
需求分析与游戏设计	1.0	1.5	+0.5
Python 与图形库学习	2.0	2.0	0
游戏界面实现	2.0	3.0	+1.0
路径与碰撞逻辑实现	3.0	4.0	+1.0
关卡设计	1.0	1.5	+0.5
AIGC 辅助开发	2.0	2.5	+0.5
测试与修改	1.0	1.5	+0.5
README 与博客撰写	1.0	2.0	+1.0
合计	13.0	18.0	+5.0

---

七、 心得体会 (收获与反思)

在这次作业中，我深刻体会到了 AIGC 工具在软件开发中的巨大潜力，同时也认识到了它的局限性。

首先，需求对齐是第一步。 一开始我因为没读懂题目，把“点击解谜”做成了“键盘躲避”，导致代码全部作废。这让我明白，在写代码前一定要彻底理解需求，方向错了，再努力也是白费。

其次，AI 是极佳的副驾驶，但不能当机长。 AI 能秒出框架，但经常在复杂的路径检测上出现越界错误，还会写出“面对面死局”的关卡。是人工的测试、反馈和局部重构，才把代码打磨完善。我们不能无脑复制 AI 的代码，必须能够阅读和修改它们。

最后，工程素养体现在细节中。 克服了 GitHub 推送断连的痛苦后，我掌握了本地 Git 提交与网页端上传结合的工作流。看着自己从0到1，把粗糙的网格变成拥有粒子特效和极简 UI 的完整小游戏，成就感满满！这次作业不仅锻炼了我的编码能力，更让我学会了如何驾驭 AI 工具来解决实际问题。

项目源码已上传至 GitHub，详情见 README.md 与 AI使用记录.md。