# “打飞机”小程序App原型设计需求文档

## 1. 概述

本文档旨在为“打飞机”小程序的核心界面提供清晰的设计需求，主要面向UI/UX设计人员，用于指导原型设计。文档充分考虑了手机触摸屏的操作特性。核心界面包括“准备页面”和“打击页面”。

---

## 2. 核心页面设计需求

### 2.1 准备页面

**页面目标:** 玩家在此页面中通过触控操作完成飞机的布局，并确认进入“准备就绪”状态。

#### 2.1.1 界面核心元素

1.  **游戏棋盘 (10x10 网格):**
    *   **功能:** 用于放置飞机的主要区域。
    *   **设计要求:**
        *   应为一个 10x10 的网格布局，每个格子大小一致，适合触控点击。
        *   格子有清晰的边框。
        *   **触控反馈:** 点击格子时，应有视觉反馈（如背景色瞬时变化或涟漪效果）。
        *   坐标标识：在棋盘的上方和左侧应有坐标轴，上方为字母（A-J），左侧为数字（1-10）。

2.  **飞机状态与选择区:**
    *   **功能:** 展示可用的飞机，并允许玩家选择要操作的飞机。
    *   **设计要求:**
        *   提供三个按钮，分别代表“飞机1”、“飞机2”、“飞机3”。
        *   当一架飞机被成功放置到棋盘上后，对应的按钮应变为“选中”或“已放置”状态（如改变颜色或样式）。
        *   当玩家在棋盘上**点击**已放置的飞机时，此区域对应的飞机按钮也应同步显示为“当前选中”状态。
        *   如果所有飞机都已放置，此区域的按钮都应处于“已放置”状态。

3.  **布局操作按钮组 (针对触控优化):**
    *   **功能:** 控制飞机的放置、移动和旋转。
    *   **设计要求:**
        *   **方向控制:** “上、下、左、右”四个方向按钮，用于在添加飞机前，预设飞机的机头朝向。**此为第一种放置方式的辅助按钮。**
        *   **移动控制:** 提供四个方向箭头按钮（上、下、左、右），用于在棋盘上移动当前选中的飞机。
        *   **旋转控制:** 提供一个旋转按钮，用于顺时针旋转当前选中的飞机。
        *   **删除按钮:** 用于删除当前在棋盘上选中的飞机。

4.  **准备确认按钮组:**
    *   **功能:** 玩家完成布局后，进行最终确认。
    *   **设计要求:**
        *   **完成按钮:**
            *   当棋盘上没有满3架飞机时，此按钮应为“禁用”状态。
            *   当3架飞机都已放置好后，此按钮变为“可用”状态。
        *   **删除按钮:** （此处有重复，建议整合）一个“清空”或“重置”按钮，用于一键清除所有已放置的飞机，方便重新布局。

5.  **状态提示区:**
    *   **功能:** 向玩家反馈当前的游戏状态。
    *   **设计要求:**
        *   在页面底部或一个显著位置，显示文本信息，如“请放置三架飞机”、“已准备，等待对手中...”、“对手已准备就绪”。

#### 2.1.2 交互流程

1.  **进入页面:** 默认显示一个空的10x10棋盘。
2.  **放置飞机:**

    *   **直接点击机身**
        *   玩家直接点击棋盘上的一个**空白**格子。
        *   系统以此格为飞机的中心点（或机身的一部分），自动生成一架默认朝向（例如，机头朝上）的飞机。
        *   如果空间不足以放置飞机，应给出提示（如格子闪烁红色或toast提示），且不放置飞机。

    *   **通用规则:**
        *   飞机成功放置后，“飞机x”按钮状态改变，表示一架飞机已被使用。
        *   当3架飞机都放置完毕后，放置功能自动禁用。

3.  **选择与操作飞机:**
    *   **单击**棋盘上已放置的飞机，该飞机进入“选中”状态（如高亮或边框变化），此时可对它进行移动或旋转。
    *   使用移动和旋转按钮调整“选中”飞机的位置和形态。
    *   点击“删除”按钮，移除选中的飞机。
4.  **完成准备:**
    *   当3架飞机全部放置后，“完成”按钮激活。
    *   玩家点击“完成”，布局操作按钮全部变为“禁用”状态，页面提示“已准备，等待对手中...”。

---

### 2.2 打击页面

**页面目标:** 玩家在此页面通过触控选择坐标进行攻击，并查看攻击结果。

#### 2.2.1 界面核心元素

1.  **攻击棋盘 (10x10 网格):**
    *   **功能:** 展示对手的区域，供玩家选择打击坐标。
    *   **设计要求:**
        *   与准备页面的棋盘样式基本一致，带坐标轴，格子大小易于触控。
        *   **格子状态:** 需要清晰地区分以下几种状态：
            *   **未打击:** 默认状态。
            *   **待确认打击:** 玩家**点击**格子后，在按下“打击”按钮前的状态（如背景变为“巧克力色”）。棋盘上同时只能有一个“待确认”的格子。
            *   **未命中:** 打击后，服务器返回结果为“未命中”的状态（如显示一个“X”或特定图标）。
            *   **命中:** 打击后，服务器返回结果为“命中”的状态（如格子变色，显示火焰等）。
            *   **击毁:** 打击后，服务器返回结果为“击毁”的状态（如显示更强烈的击毁效果，并将该飞机的其余所有“命中”格子一同标记为“已击毁”）。

2.  **操作与状态区:**
    *   **功能:** 执行打击操作和显示信息。
    *   **设计要求:**
        *   **打击按钮:**
            *   当玩家在棋盘上选择了一个“待确认打击”的格子后，此按钮变为“可用”状态。
            *   点击后，按钮进入“加载中/打击中...”状态，直到服务器返回结果。
        *   **状态提示:** 显示当前回合信息，如“轮到你攻击”、“等待对手攻击...”。
        *   **攻击结果反馈:** 每次攻击后，应有弹窗或醒目提示，明确告知玩家“命中”、“未命中”或“击毁”。

3.  **我方飞机布局参考图 (可选但建议):**
    *   **功能:** 在打击页面的一个角落或侧边，以缩略图形式展示玩家自己在准备阶段的飞机布局。
    *   **设计要求:**
        *   这是一个只读视图，不可交互。
        *   当自己的飞机被对手击中时，此参考图上的对应位置也应同步更新状态。

#### 2.2.2 交互流程

1.  **进入页面:** 轮到玩家攻击时，进入此页面。显示一个干净的10x10攻击棋盘。
2.  **选择目标:** 玩家在棋盘上**点击**一个目标格子，该格子变为“待确认打击”状态，“打击”按钮激活。如果玩家点击其他格子，则新的格子变为“待确认”，旧的格子恢复默认。
3.  **确认打击:** 玩家点击“打击”按钮。
4.  **等待结果:** 按钮禁用，棋盘暂时不可点击，等待服务器返回结果。
5.  **展示结果:**
    *   服务器返回结果后，棋盘上对应的格子根据结果（命中/未命中/击毁）更新其视觉状态。
    *   弹出提示，告知玩家打击结果。
6.  **回合结束:** 页面自动跳转到“等待页面”，或直接在当前页面显示“等待对手攻击...”的遮罩，直到下一回合开始。