diff --git a/.promptx/pouch.json b/.promptx/pouch.json index cb02b16..665d706 100644 --- a/.promptx/pouch.json +++ b/.promptx/pouch.json @@ -4,7 +4,7 @@ { "from": "initial", "command": "action", - "timestamp": "2025-09-10T09:45:59.716Z", + "timestamp": "2025-09-11T00:58:40.753Z", "args": [ "prototype-designer" ] @@ -12,7 +12,7 @@ { "from": "role_activated_with_memory", "command": "init", - "timestamp": "2025-09-10T09:46:10.631Z", + "timestamp": "2025-09-11T00:58:56.984Z", "args": [ { "workingDirectory": "e:/我的项目/DFJ/新DFJ" @@ -22,17 +22,17 @@ { "from": "initialized", "command": "welcome", - "timestamp": "2025-09-10T09:46:22.721Z", + "timestamp": "2025-09-11T00:59:09.325Z", "args": [] }, { "from": "service_discovery", "command": "action", - "timestamp": "2025-09-10T09:46:32.635Z", + "timestamp": "2025-09-11T00:59:24.773Z", "args": [ "prototype-designer" ] } ], - "lastUpdated": "2025-09-10T09:46:32.830Z" + "lastUpdated": "2025-09-11T00:59:24.952Z" } diff --git a/.promptx/resource/project.registry.json b/.promptx/resource/project.registry.json index 7b17ad8..48775ee 100644 --- a/.promptx/resource/project.registry.json +++ b/.promptx/resource/project.registry.json @@ -4,8 +4,8 @@ "metadata": { "version": "2.0.0", "description": "project 级资源注册表", - "createdAt": "2025-09-10T09:46:10.664Z", - "updatedAt": "2025-09-10T09:46:10.669Z", + "createdAt": "2025-09-11T00:58:57.004Z", + "updatedAt": "2025-09-11T00:58:57.015Z", "resourceCount": 3 }, "resources": [ @@ -17,9 +17,9 @@ "description": "思维模式，指导AI的思考方式", "reference": "@project://.promptx/resource/role/prototype-designer/design-thinking.thought.md", "metadata": { - "createdAt": "2025-09-10T09:46:10.667Z", - "updatedAt": "2025-09-10T09:46:10.667Z", - "scannedAt": "2025-09-10T09:46:10.667Z", + "createdAt": "2025-09-11T00:58:57.009Z", + "updatedAt": "2025-09-11T00:58:57.009Z", + "scannedAt": "2025-09-11T00:58:57.009Z", "path": "role/prototype-designer/design-thinking.thought.md" } }, @@ -31,9 +31,9 @@ "description": "执行模式，定义具体的行为模式", "reference": "@project://.promptx/resource/role/prototype-designer/design-workflow.execution.md", "metadata": { - "createdAt": "2025-09-10T09:46:10.667Z", - "updatedAt": "2025-09-10T09:46:10.667Z", - "scannedAt": "2025-09-10T09:46:10.667Z", + "createdAt": "2025-09-11T00:58:57.010Z", + "updatedAt": "2025-09-11T00:58:57.010Z", + "scannedAt": "2025-09-11T00:58:57.010Z", "path": "role/prototype-designer/design-workflow.execution.md" } }, @@ -45,9 +45,9 @@ "description": "专业角色，提供特定领域的专业能力", "reference": "@project://.promptx/resource/role/prototype-designer/prototype-designer.role.md", "metadata": { - "createdAt": "2025-09-10T09:46:10.668Z", - "updatedAt": "2025-09-10T09:46:10.668Z", - "scannedAt": "2025-09-10T09:46:10.668Z", + "createdAt": "2025-09-11T00:58:57.012Z", + "updatedAt": "2025-09-11T00:58:57.012Z", + "scannedAt": "2025-09-11T00:58:57.012Z", "path": "role/prototype-designer/prototype-designer.role.md" } } diff --git a/01_文档/原型设计/入口页面.html b/01_文档/原型设计/入口页面.html index 45f1e3d..b7bdaff 100644 --- a/01_文档/原型设计/入口页面.html +++ b/01_文档/原型设计/入口页面.html @@ -364,32 +364,39 @@ margin-top: 2px; } - /* 开始按钮 */ - .start-button { + /* 游戏模式按钮容器 */ + .game-modes { width: 100%; - max-width: 300px; + max-width: 350px; + display: flex; + flex-direction: column; + gap: 16px; + } + + /* 主要按钮样式 */ + .btn-primary { min-height: var(--touch-target-min); border: none; border-radius: 12px; - font-size: 18px; - font-weight: 700; + font-size: 16px; + font-weight: 600; cursor: pointer; - padding: 16px 32px; - background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%); + padding: 14px 24px; + background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); color: #ffffff; - box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4); + box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; - gap: 10px; + gap: 8px; user-select: none; -webkit-tap-highlight-color: transparent; position: relative; overflow: hidden; } - .start-button::before { + .btn-primary::before { content: ''; position: absolute; top: 50%; @@ -402,23 +409,131 @@ transition: width 0.3s, height 0.3s; } - .start-button:hover { + .btn-primary:hover, .btn-primary:focus { transform: translateY(-2px); - box-shadow: 0 12px 35px rgba(99, 102, 241, 0.5); + box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4); } - .start-button:active { + .btn-primary:active { transform: translateY(0); - box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4); + box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4); } - .start-button:active::before { + .btn-primary:active::before { + width: 100%; + height: 100%; + } + + /* 成功按钮样式 */ + .btn-success { + min-height: var(--touch-target-min); + border: none; + border-radius: 12px; + font-size: 16px; + font-weight: 600; + cursor: pointer; + padding: 14px 24px; + background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light)); + color: #1a1a2e; + box-shadow: 0 4px 16px rgba(64, 224, 208, 0.3); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + user-select: none; + -webkit-tap-highlight-color: transparent; + position: relative; + overflow: hidden; + } + + .btn-success::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + background: rgba(255, 255, 255, 0.3); + border-radius: 50%; + transform: translate(-50%, -50%); + transition: width 0.3s, height 0.3s; + } + + .btn-success:hover, .btn-success:focus { + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(64, 224, 208, 0.4); + } + + .btn-success:active { + transform: translateY(0); + box-shadow: 0 2px 8px rgba(64, 224, 208, 0.4); + } + + .btn-success:active::before { + width: 100%; + height: 100%; + } + + /* 次要按钮样式 */ + .btn-secondary { + min-height: var(--touch-target-min); + border: none; + border-radius: 12px; + font-size: 16px; + font-weight: 600; + cursor: pointer; + padding: 14px 24px; + background: rgba(99, 102, 241, 0.15); + color: var(--primary-color); + border: 1px solid var(--primary-color); + backdrop-filter: blur(10px); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + user-select: none; + -webkit-tap-highlight-color: transparent; + position: relative; + overflow: hidden; + } + + .btn-secondary::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + background: rgba(99, 102, 241, 0.2); + border-radius: 50%; + transform: translate(-50%, -50%); + transition: width 0.3s, height 0.3s; + } + + .btn-secondary:hover, .btn-secondary:focus { + background: rgba(99, 102, 241, 0.25); + transform: translateY(-1px); + } + + .btn-secondary:active { + transform: translateY(0); + } + + .btn-secondary:active::before { width: 100%; height: 100%; } .button-icon { - font-size: 20px; + font-size: 18px; + } + + .button-subtitle { + font-size: 12px; + opacity: 0.8; + font-weight: 400; } /* 响应式设计 */ @@ -508,11 +623,7 @@
-
✈️
-
✈️
-
✈️
-
✈️
- +
✈️

打飞机对战

经典策略游戏，智慧与技巧的较量

@@ -539,11 +650,40 @@ - - + +
+ + + + + + + +
@@ -576,13 +716,37 @@ }); } - // 开始游戏按钮点击事件 - document.getElementById('startGame').addEventListener('click', () => { - // 这里可以添加跳转到游戏页面的逻辑 - console.log('开始游戏'); + // 游戏模式按钮点击事件 + document.getElementById('quickStart').addEventListener('click', () => { + console.log('快速开始 - 和AI对战'); if ('vibrate' in navigator) { - navigator.vibrate(20); + navigator.vibrate(15); } + // 这里可以添加跳转到AI对战页面的逻辑 + }); + + document.getElementById('onlineMatch').addEventListener('click', () => { + console.log('自动匹配 - 在线匹配对战'); + if ('vibrate' in navigator) { + navigator.vibrate(15); + } + // 这里可以添加跳转到匹配页面的逻辑 + }); + + document.getElementById('createRoom').addEventListener('click', () => { + console.log('创建房间'); + if ('vibrate' in navigator) { + navigator.vibrate(10); + } + // 这里可以添加跳转到创建房间页面的逻辑 + }); + + document.getElementById('joinGame').addEventListener('click', () => { + console.log('加入游戏'); + if ('vibrate' in navigator) { + navigator.vibrate(10); + } + // 这里可以添加跳转到加入游戏页面的逻辑 }); // 设置按钮点击事件 @@ -598,7 +762,10 @@ createStarField(); // 为所有可点击元素添加触觉反馈 - addHapticFeedback(document.getElementById('startGame')); + addHapticFeedback(document.getElementById('quickStart')); + addHapticFeedback(document.getElementById('onlineMatch')); + addHapticFeedback(document.getElementById('createRoom')); + addHapticFeedback(document.getElementById('joinGame')); addHapticFeedback(document.querySelector('.settings-btn')); }); diff --git a/01_文档/原型设计/房间等待[房主].html b/01_文档/原型设计/房间等待[房主].html new file mode 100644 index 0000000..559798f --- /dev/null +++ b/01_文档/原型设计/房间等待[房主].html @@ -0,0 +1,552 @@ + + + + + + 房间等待 - 打飞机对战 + + + +
+ +
+ +
+
123456
+
房间号
+
+ +
+ + +
+ +
+
+
张
+
+
张三（房主）
+
+
+ 🏆 + 156场 +
+
+ 📊 + 68%胜率 +
+
+
+
+
+
✅准备
+
+
+ + +
+
+
🤖
+
+
AI对手
+
+
+ 🎯 + 智能难度 +
+
+
+
+
+
⏳等待
+ +
+
+ + +
+ +
+
+
+ + + + \ No newline at end of file diff --git a/01_文档/原型设计/房间等待页面_线框图方案.md b/01_文档/原型设计/房间等待页面_线框图方案.md new file mode 100644 index 0000000..c0132e2 --- /dev/null +++ b/01_文档/原型设计/房间等待页面_线框图方案.md @@ -0,0 +1,198 @@ +# 房间等待页面 - 线框图设计方案 + +## 需求分析（更新版） + +### 页面功能 +- **页面类型**：房间等待页面（我创建的房间） +- **核心功能**：显示房间信息，管理对战双方 +- **默认状态**：房主 vs AI对手 + +### 关键元素 +1. **房间号**：自动生成的6位数字房间码 +2. **玩家卡片**：显示房主信息（自己） +3. **对手卡片**：显示对手信息（默认AI，可踢出） +4. **玩家数据**：对战次数、胜率等统计信息 +5. **管理功能**：踢出对手按钮 + +### 简化需求 +- ❌ 无时间设置 +- ❌ 无观战功能 +- ❌ 无其他复杂设置 +- ✅ 简洁的双人对战等待界面 + +## 线框图方案 + +### 方案一：上下对称式布局 + +``` +┌─────────────────────────────────────┐ +│ ← 返回 房间 123456 ⚙️ │ +├─────────────────────────────────────┤ +│ │ +│ ┌─────────────────────────────┐ │ +│ │ 👤 张三（房主） │ │ +│ │ │ │ +│ │ 🏆 对战次数：156场 │ │ +│ │ 📊 胜率：68% │ │ +│ │ ⭐ 等级：黄金III │ │ +│ │ │ │ +│ │ [准备完成] │ │ +│ └─────────────────────────────┘ │ +│ │ +│ ⚔️ VS ⚔️ │ +│ │ +│ ┌─────────────────────────────┐ │ +│ │ 🤖 AI对手 │ │ +│ │ │ │ +│ │ 🏆 对战次数：∞ │ │ +│ │ 📊 胜率：45% │ │ +│ │ ⭐ 等级：匹配中... │ │ +│ │ │ │ +│ │ [等待中] [❌踢出对手] │ │ +│ └─────────────────────────────┘ │ +│ │ +│ [开始游戏] │ +└─────────────────────────────────────┘ +``` + +**特点**： +- 优点：对称美观，信息完整 +- 适合：突出对战双方平等地位 +- 交互：直观的对战预览 + +### 方案二：左右并列式布局 + +``` +┌─────────────────────────────────────┐ +│ ← 返回 房间：123456 📋分享 │ +├─────────────────────────────────────┤ +│ │ +│ ┌────────────┐ ┌────────────┐ │ +│ │ 👤 张三 │ │ 🤖 AI对手 │ │ +│ │ (房主) │VS │ │ │ +│ │ │ │ │ │ +│ │ 对战：156 │ │ 难度：中等 │ │ +│ │ 胜率：68% │ │ 胜率：45% │ │ +│ │ 等级：黄金 │ │ 等级：银牌 │ │ +│ │ │ │ │ │ +│ │ ✅准备 │ │ ⏳等待 │ │ +│ └────────────┘ └────────────┘ │ +│ │ +│ [❌踢出AI] [🔄换个对手] [⚙️设置] │ +│ │ +│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │ +│ │ +│ [🚀开始对战] │ +└─────────────────────────────────────┘ +``` + +**特点**： +- 优点：信息紧凑，操作集中 +- 适合：信息密度高的场景 +- 交互：功能按钮集中在下方 + +### 方案三：卡片堆叠式布局 + +``` +┌─────────────────────────────────────┐ +│ 房间 123456 │ +│ ┌─────────────────┐ │ +├──────┤ ├────────────┤ +│ │ [📋复制邀请] │ ← 返回 │ +│ └─────────────────┘ │ +│ │ +│ ┌─👤 房主信息─┐ │ +│ │ 张三 (LV.15) │ │ +│ │ ──────────── │ │ +│ │ 🏆 156场 │ │ +│ │ 📊 68%胜率 │ │ +│ │ ✅ 已准备 │ │ +│ └──────────────┘ │ +│ │ +│ ┌─🤖 对手信息─┐ │ +│ │ AI智能对手 │ │ +│ │ ──────────── │ │ +│ │ 🎯 中等难度 │ │ +│ │ 📊 45%胜率 │ │ +│ │ ⏳ 匹配中... │ │ +│ │ │ │ +│ │ [❌踢出] │ │ +│ └──────────────┘ │ +│ │ +│ ┌─────────────────────────────────┐ │ +│ │ 🎮 开始游戏 │ │ +│ └─────────────────────────────────┘ │ +└─────────────────────────────────────┘ +``` + +**特点**： +- 优点：层次清晰，现代感强 +- 适合：移动端友好设计 +- 交互：卡片式交互体验 + +### 方案四：极简列表式布局 + +``` +┌─────────────────────────────────────┐ +│ ✕ 房间 123456 │ +│ │ +│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │ +│ │ +│ 👤 张三（房主） │ +│ 156场 • 68%胜率 • 黄金III ✅准备 │ +│ │ +│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │ +│ │ +│ 🤖 AI对手 │ +│ 智能难度 • 45%胜率 ❌踢出 │ +│ │ +│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │ +│ │ +│ │ +│ ┌─────────────────────────────────┐ │ +│ │ 开始游戏 │ │ +│ └─────────────────────────────────┘ │ +│ │ +│ 📋 分享房间码 │ +└─────────────────────────────────────┘ +``` + +**特点**： +- 优点：极简高效，信息清晰 +- 适合：追求简洁的用户 +- 交互：最少的视觉干扰 + +## 方案对比分析 + +| 维度 | 方案一（对称式） | 方案二（并列式） | 方案三（卡片式） | 方案四（列表式） | +|------|------------------|------------------|------------------|------------------| +| 视觉冲击 | 强 | 中 | 强 | 弱 | +| 信息密度 | 中 | 高 | 中 | 高 | +| 操作效率 | 中 | 高 | 中 | 高 | +| 移动适配 | 好 | 一般 | 很好 | 很好 | +| 现代感 | 中 | 中 | 强 | 强 | + +## 推荐选择 + +基于移动端打飞机游戏的特点，推荐： + +1. **首选方案三**：卡片堆叠式 - 现代感强，移动端友好 +2. **备选方案四**：极简列表式 - 信息清晰，操作高效 + +## 设计要点 + +### 关键信息层级 +1. **房间号** - 顶部显著位置 +2. **玩家状态** - 准备状态最重要 +3. **统计数据** - 次要信息，简化显示 +4. **操作按钮** - 底部固定，易于触达 + +### 交互考虑 +- **踢出对手**：确认提示防误操作 +- **开始游戏**：双方准备后才可点击 +- **分享房间**：便于邀请真人玩家 + +--- +**设计师**: prototype-designer +**创建时间**: 2025-09-11 +**状态**: 待用户确认方案选择 \ No newline at end of file diff --git a/01_文档/打飞机小程序需求说明书.md b/01_文档/打飞机小程序需求说明书.md index 81076c3..42d1600 100644 --- a/01_文档/打飞机小程序需求说明书.md +++ b/01_文档/打飞机小程序需求说明书.md @@ -62,7 +62,6 @@ interface Achievement { **功能列表**: - 微信登录/游客登录 - 用户资料管理（头像、昵称） -- 等级系统（经验值积累） - 成就系统（解锁条件和奖励） - 好友系统（添加、删除、邀请对战） - 排行榜（全服排名、好友排名） @@ -273,7 +272,6 @@ enum MessageType { 主界面 ├── 头部导航 │ ├── 用户头像+昵称 -│ ├── 等级显示 │ └── 设置按钮 ├── 游戏模式选择 │ ├── AI对战