feat: 新增对战页面原型并重构需求文档新增对战页面.html原型,实现攻击、模拟和观察模式的界面布局与基础交互。同时,重构游戏原型设计需求文档,将原“打击页面”拆分为“我的回合”和“对手回合”,并明确了飞机模拟、实时瞄准等核心功能。

This commit is contained in:
史悦
2025-09-11 10:42:24 +08:00
parent fe48be1df2
commit 1d138f1ce4
5 changed files with 1393 additions and 42 deletions

View File

@@ -32,7 +32,32 @@
"args": [ "args": [
"prototype-designer" "prototype-designer"
] ]
},
{
"from": "role_activated_with_memory",
"command": "init",
"timestamp": "2025-09-11T02:30:41.768Z",
"args": [
{
"workingDirectory": "e:/我的项目/DFJ/新DFJ",
"ideType": "vscode"
}
]
},
{
"from": "initialized",
"command": "welcome",
"timestamp": "2025-09-11T02:30:54.353Z",
"args": []
},
{
"from": "service_discovery",
"command": "action",
"timestamp": "2025-09-11T02:31:26.644Z",
"args": [
"prototype-designer"
]
} }
], ],
"lastUpdated": "2025-09-11T00:59:24.952Z" "lastUpdated": "2025-09-11T02:31:26.688Z"
} }

View File

@@ -4,8 +4,8 @@
"metadata": { "metadata": {
"version": "2.0.0", "version": "2.0.0",
"description": "project 级资源注册表", "description": "project 级资源注册表",
"createdAt": "2025-09-11T00:58:57.004Z", "createdAt": "2025-09-11T02:30:41.803Z",
"updatedAt": "2025-09-11T00:58:57.015Z", "updatedAt": "2025-09-11T02:30:41.806Z",
"resourceCount": 3 "resourceCount": 3
}, },
"resources": [ "resources": [
@@ -17,9 +17,9 @@
"description": "思维模式指导AI的思考方式", "description": "思维模式指导AI的思考方式",
"reference": "@project://.promptx/resource/role/prototype-designer/design-thinking.thought.md", "reference": "@project://.promptx/resource/role/prototype-designer/design-thinking.thought.md",
"metadata": { "metadata": {
"createdAt": "2025-09-11T00:58:57.009Z", "createdAt": "2025-09-11T02:30:41.805Z",
"updatedAt": "2025-09-11T00:58:57.009Z", "updatedAt": "2025-09-11T02:30:41.805Z",
"scannedAt": "2025-09-11T00:58:57.009Z", "scannedAt": "2025-09-11T02:30:41.805Z",
"path": "role/prototype-designer/design-thinking.thought.md" "path": "role/prototype-designer/design-thinking.thought.md"
} }
}, },
@@ -31,9 +31,9 @@
"description": "执行模式,定义具体的行为模式", "description": "执行模式,定义具体的行为模式",
"reference": "@project://.promptx/resource/role/prototype-designer/design-workflow.execution.md", "reference": "@project://.promptx/resource/role/prototype-designer/design-workflow.execution.md",
"metadata": { "metadata": {
"createdAt": "2025-09-11T00:58:57.010Z", "createdAt": "2025-09-11T02:30:41.805Z",
"updatedAt": "2025-09-11T00:58:57.010Z", "updatedAt": "2025-09-11T02:30:41.805Z",
"scannedAt": "2025-09-11T00:58:57.010Z", "scannedAt": "2025-09-11T02:30:41.805Z",
"path": "role/prototype-designer/design-workflow.execution.md" "path": "role/prototype-designer/design-workflow.execution.md"
} }
}, },
@@ -45,9 +45,9 @@
"description": "专业角色,提供特定领域的专业能力", "description": "专业角色,提供特定领域的专业能力",
"reference": "@project://.promptx/resource/role/prototype-designer/prototype-designer.role.md", "reference": "@project://.promptx/resource/role/prototype-designer/prototype-designer.role.md",
"metadata": { "metadata": {
"createdAt": "2025-09-11T00:58:57.012Z", "createdAt": "2025-09-11T02:30:41.806Z",
"updatedAt": "2025-09-11T00:58:57.012Z", "updatedAt": "2025-09-11T02:30:41.806Z",
"scannedAt": "2025-09-11T00:58:57.012Z", "scannedAt": "2025-09-11T02:30:41.806Z",
"path": "role/prototype-designer/prototype-designer.role.md" "path": "role/prototype-designer/prototype-designer.role.md"
} }
} }

View File

@@ -75,45 +75,81 @@
--- ---
### 2.2 打击页面 ### 2.2 对战页面
**页面目标:** 玩家在此页面通过触控选择坐标进行攻击,并查看攻击结果 **页面目标:** 玩家在此页面进行回合制对战,包括攻击对手和观察我方被攻击情况。页面分为“我的回合”和“对手回合”两种状态
#### 2.2.1 界面核心元素 ---
#### 2.2.1 我的回合 (攻击对手)
**核心目标:** 攻击对手棋盘,并可使用模拟功能辅助决策。
**界面核心元素:**
1. **攻击棋盘 (10x10 网格):** 1. **攻击棋盘 (10x10 网格):**
* **功能:** 展示对手的区域,供玩家选择打击坐标 * **功能:** 攻击对手的核心区域,同时内置飞机布局模拟功能。棋盘上会叠加显示历史攻击结果和当前模拟的飞机
* **设计要求:** * **设计要求:**
* 与准备页面的棋盘样式基本一致,带坐标轴,格子大小易于触控 * 样式与准备页面一致,带坐标轴
* **格子状态:** 需要清晰地区分以下几种状态: * **攻击结果状态:**
* **未打击:** 默认状态 * **打偏 (未命中):** 显示“X”或特定图标
* **待确认打击:** 玩家**点击**格子后,在按下“打击”按钮前的状态(如背景变为“巧克力色”)。棋盘上同时只能有一个“待确认”的格子 * **命中:** 显示火焰等命中效果
* **未命中:** 打击后服务器返回结果为“未命中”的状态如显示一个“X”或特定图标 * **摧毁:** 显示强烈的摧毁效果
* **命中:** 打击后,服务器返回结果为“命中”的状态(如格子变色,显示火焰等) * **模拟飞机样式:** 模拟放置的飞机应有独特的视觉样式(如半透明、虚线边框),与真实的攻击结果标记明确区分
* **击毁:** 打击后,服务器返回结果为“击毁”的状态(如显示更强烈的击毁效果,并将该飞机的其余所有“命中”格子一同标记为“已击毁”)。
2. **操作与状态区:** 2. **飞机模拟区:**
* **功能:** 提供可用于模拟的飞机模型。
* **设计要求:**
* 此区域的设计应参考**准备页面**的“飞机状态与选择区”和“布局操作按钮组”。
* 玩家可从此区域选择并操作飞机,将其放置到上方的攻击棋盘上进行模拟。
3. **操作与状态区:**
* **功能:** 执行打击操作和显示信息。 * **功能:** 执行打击操作和显示信息。
* **设计要求:** * **设计要求:**
* **打击按钮:** * **打击按钮:** 玩家在棋盘上**点击**一个未攻击过的格子作为目标后,此按钮激活。
* 当玩家在棋盘上选择了一个“待确认打击”的格子后,此按钮变为“可用”状态 * **状态提示:** 清晰显示“我的回合”
* 点击后,按钮进入“加载中/打击中...”状态,直到服务器返回结果 * **攻击结果反馈:** 每次攻击后,应有弹窗或醒目提示
* **状态提示:** 显示当前回合信息,如“轮到你攻击”、“等待对手攻击...”。
* **攻击结果反馈:** 每次攻击后,应有弹窗或醒目提示,明确告知玩家“命中”、“未命中”或“击毁”。
3. **我方飞机布局参考图 (可选但建议):** **交互流程:**
* **功能:** 在打击页面的一个角落或侧边,以缩略图形式展示玩家自己在准备阶段的飞机布局。
1. **进入回合:** 自动切换至此页面,显示对手的棋盘(包含我方历史攻击记录)。
2. **决策与操作 (可随时进行):**
* **模拟布局:** 从“飞机模拟区”选择飞机,在攻击棋盘上进行拖拽、旋转、删除等操作,以推演对手可能的布局。这些模拟飞机仅为临时辅助,不影响攻击。
* **选择攻击目标:** **单击**棋盘上任一未攻击过的格子,该格子高亮,表示“待打击”,同时“打击”按钮激活。
3. **确认打击:** 点击“打击”按钮。发起攻击后,棋盘上所有模拟的飞机将自动清除。
4. **等待并展示结果:**
* 棋盘上对应的格子根据结果(命中/打偏/摧毁)更新其视觉状态。
* 弹出醒目的结果提示。
5. **回合结束:** 自动切换到“对手回合”页面。
---
#### 2.2.2 对手回合 (观察我方)
**核心目标:** 清晰地看到我方棋盘的被攻击情况,并能实时观察到对手的瞄准意图。
**界面核心元素:**
1. **我方棋盘 (10x10 网格):**
* **功能:** 显示我方飞机布局以及对手的所有攻击记录。
* **设计要求:** * **设计要求:**
* 这是一个只读视图,不可交互 * 清晰展示我方三架飞机的完整布局
* 当自己的飞机被对手击中时,此参考图上的对应位置也应同步更新状态。 * **格子状态:**
* **被攻击 (打偏):** 对手攻击但我方该位置无飞机部分。
* **被攻击 (命中):** 对手攻击命中我方飞机部件。
* **对手正在瞄准:** 实时显示对手当前选择的、但还未确认攻击的格子(例如,用闪烁的准星或特殊的边框高亮),此状态会随对手的选择而实时变化。
* **机头被摧毁:** 当机头被击中时,整架飞机需要有特殊且醒目的“被摧毁”样式(例如,整架飞机变灰并显示爆炸/损坏图标),以明确表示该飞机已失效。
#### 2.2.2 交互流程 2. **操作与状态区:**
* **功能:** 显示状态并提供视图切换功能。
* **设计要求:**
* **状态提示:** 清晰显示“对手回合”。
* **切换至攻击视图按钮:** 提供一个明确的按钮(如“切换到攻击页”或“战术模拟”),允许玩家在对手回合时,手动切换回“我的回合”的攻击与模拟棋盘,以便利用对手的思考时间进行我方的策略规划。
1. **进入页面:** 轮到玩家攻击时进入此页面。显示一个干净的10x10攻击棋盘。 **交互流程:**
2. **选择目标:** 玩家在棋盘上**点击**一个目标格子,该格子变为“待确认打击”状态,“打击”按钮激活。如果玩家点击其他格子,则新的格子变为“待确认”,旧的格子恢复默认。
3. **确认打击:** 玩家点击“打击”按钮 1. **进入回合:** 自动切换至此页面,显示我方棋盘和被攻击情况
4. **等待结果:** 按钮禁用,棋盘暂时不可点击,等待服务器返回结果 2. **观察对手:** 实时看到对手正在瞄准的格子位置变化
5. **展示结果:** 3. **结果展示:** 当对手确认攻击后,棋盘上对应格子更新状态(命中/打偏),如果是机头,则整架飞机更新为“被摧毁”状态。
* 服务器返回结果后,棋盘上对应的格子根据结果(命中/未命中/击毁)更新其视觉状态 4. **可选操作:** 玩家可随时点击“切换至攻击视图”按钮,跳转回自己的攻击与模拟棋盘进行思考
* 弹出提示,告知玩家打击结果 5. **回合结束:** 对手攻击完成后,系统自动切换回“我的回合”页面
6. **回合结束:** 页面自动跳转到“等待页面”,或直接在当前页面显示“等待对手攻击...”的遮罩,直到下一回合开始。

File diff suppressed because it is too large Load Diff

View File

@@ -255,6 +255,7 @@ enum MessageType {
// 游戏操作 // 游戏操作
PLACE_PLANE = 'PLACE_PLANE', PLACE_PLANE = 'PLACE_PLANE',
PREPARE_ATTACK = 'PREPARE_ATTACK', // 玩家选择但未确认打击的位置
ATTACK_POSITION = 'ATTACK_POSITION', ATTACK_POSITION = 'ATTACK_POSITION',
GAME_STATE_SYNC = 'GAME_STATE_SYNC', GAME_STATE_SYNC = 'GAME_STATE_SYNC',
@@ -331,6 +332,7 @@ interface GameUILayout {
1. **点击攻击**: 直接点击对方棋盘位置 1. **点击攻击**: 直接点击对方棋盘位置
2. **确认机制**: 重要攻击需二次确认 2. **确认机制**: 重要攻击需二次确认
3. **视觉反馈**: 3. **视觉反馈**:
- **实时瞄准提示**: 在对手回合,棋盘上应实时显示对手正在瞄准(已选择但未确认)的格子。
- 攻击动画效果 - 攻击动画效果
- 结果显示动画 - 结果显示动画
- 音效配合 - 音效配合