# game_pata

**Repository Path**: yannischen/game_pata

## Basic Information

- **Project Name**: game_pata
- **Description**: 一款融合策略路径规划、数值成长、自动战斗元素的跨平台休闲小游戏。基于 UniApp框架 开发，主攻微信小程序平台，同时兼容 H5浏览器 运行。玩家通过点选可击败的低等级敌人，观看角色自动寻路并进行随机化的战斗动画，目标是挑战更高层数的迷宫。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2026-06-20
- **Last Updated**: 2026-09-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ⚔️ 爬塔升级大作战 (Climb Tower Battle)

一款融合**策略路径规划、数值成长、自动战斗**元素的跨平台休闲小游戏。

## 📋 项目概览

**技术栈**: UniApp + Vue 3 + TypeScript + Pinia + Canvas 2D  
**目标平台**: 微信小程序（主） + H5浏览器（次）  
**当前版本**: v1.6 (2026-06-20)  

### 核心玩法

1. **点选式操作**: 点击地图上的敌人发起挑战
2. **智能寻路**: 角色沿最短路径自动移动到目标位置
3. **随机战斗**: 观看完整的战斗动画（胜负基于等级差概率判定）
4. **数值升级**: 击败敌人获得分数，分数=等级，不断变强挑战更高层数
5. **100层目标**: 从新手期到终极Boss层的完整难度曲线

### 🎯 v1.6 版本特色功能

#### 失败动画序列增强（核心新增）

战斗失败后的完整视觉体验：

| 阶段 | 动作 | 时长 | 视觉效果 |
|------|------|------|----------|
| 敌人放大 | 100% → 弹性放大到150% | 300ms | `easeOutElastic` 缩放（带回弹overshoot） |
| 嘲讽姿态 | 左右摇摆 ±8° + 上下弹跳 ±8px | 3000ms | 得意洋洋的连续动作循环 |
| 恢复原大小 | 缩回至100% | 800ms | `easeInBack` 回弹缓动 |
| **总计** | **完整序列** | **4100ms** (~4.1秒) | |

同时触发 **"实力不足!"** 文字浮现：
- 字体: 40px 鲜红色粗体斜体 (#FF2222)
- 动画: 浮现0.5s → 保持2.3s → 淡出0.5s (总计3.5s)
- 多层文字阴影增强视觉冲击力

---

## 🗂️ 项目结构

```
src/
├── pages/                    # 页面文件
│   ├── index/index.vue      # 首页（主菜单+规则说明）
│   ├── game/game.vue         # 游戏主逻辑页面（Canvas渲染+UI覆盖层）
│   └── result/result.vue     # 通关/GameOver结果展示页
├── components/               # 全局公共组件
│   ├── GameCanvas.vue        # Canvas渲染容器（主循环+事件处理+分层渲染）
│   ├── StickFigure.vue       # 火柴人绘制组件（待机/胜利/倒地三种姿态）
│   └── BattleAnimation.vue   # 战斗动画控制器（胜负双分支+v1.6嘲讽系统）
├── utils/                    # 工具函数库（纯逻辑，无平台依赖）
│   ├── types.ts              # TypeScript 类型定义全集（~250行接口）
│   ├── config.ts             # 游戏配置常量（数值公式/难度曲线/动画参数）
│   ├── pathfinding.ts        # BFS寻路算法实现（支持墙壁障碍）
│   ├── mazeGenerator.ts      # 迷宫生成器（递归回溯法）
│   ├── battleCalculator.ts   # 战斗计算核心（胜负判定/惩罚模式/v1.5概率系统）
│   ├── random.ts             # 随机数工具（加权随机/Fisher-Yates洗牌等）
│   └── AudioManager.ts       # 音频管理器（双平台适配：InnerAudioContext/Audio）
├── stores/                   # Pinia状态管理层
│   ├── gameStore.ts          # 游戏主状态（玩家/关卡/动画/粒子/浮动文字）
│   ├── enemyStore.ts         # 敌人数据管理（存活列表/v1.6嘲讽状态机）
│   └── userStore.ts          # 用户设置与本地存档（最高纪录/统计持久化）
├── platforms/                # 平台特定适配代码
│   └── adapter.ts            # 平台统一接口层（触摸事件/存储/音频/震动/分享）
├── App.vue                   # 应用根组件
├── main.ts                   # 入口文件（初始化Pinia）
├── manifest.json             # UniApp应用配置（双端构建参数）
├── pages.json                # 页面路由配置
├── uni.scss                  # 全局SCSS设计令牌变量（颜色/尺寸/动画/Z-index层级）
└── package.json              # 项目依赖清单
```

## 🚀 快速开始

### 环境要求

- Node.js >= 16.x
- pnpm (推荐) 或 npm
- HBuilderX 或 VSCode + Volar插件

### 安装依赖

```bash
# 使用pnpm（推荐）
pnpm install

# 或使用npm
npm install
```

### 开发运行

```bash
# 微信小程序开发模式
pnpm run dev:mp-weixin
# 然后在微信开发者工具中导入 dist/dev/mp-weixin 目录

# H5浏览器开发模式
pnpm run dev:h5
# 自动在浏览器打开 http://localhost:3000
```

### 生产构建

```bash
# 构建微信小程序包（需确保主包<2MB限制）
pnpm run build:mp-weixin
# 输出目录: dist/build/mp-weixin/

# 构建H5版本
pnpm run build:h5
# 输出目录: dist/build/h5/
```

---

## 🎮 核心机制详解

### ⚔️ 战斗系统 (v1.5重大更新)

**胜率公式**:
```
baseWinRate = 50% + (playerLevel - enemyLevel) × 5%
范围限制: [5%, 95%]
```

**示例**:
- Lv.9 vs Lv.5 (高4级) → 胜率 = **70%** ✅ 较稳
- Lv.9 vs Lv.9 (同级)   → 胜率 = **50%** ⚖️ 博弈
- Lv.9 vs Lv.15 (低6级)→ 胜率 = **20%** 💀 危险

**失败惩罚三级自适应**:
| 等级区间 | 模式 | 扣分比例 | 时间惩罚 |
|----------|------|----------|----------|
| Lv.1-5   | mild | 0%（不扣分）| 5秒 |
| Lv.6-20  | normal | 10% | 10秒 |
| Lv.21+   | severe | 20% | 15秒 |

### 🗺️ 迷宫与关卡

**100层难度曲线**:

| 层数段 | 阶段名称 | 敌人等级范围 | 密度 | 特色 |
|--------|----------|--------------|------|------|
| 1-20   | 新手期 | [1, 15] | 低 | 大量金币，学习基础 |
| 21-50  | 成长期 | [10, 50] | 中 | 出现同级敌人博弈 |
| 51-80  | 挑战期 | [40, 150] | 高 | 路径复杂，需谨慎规划 |
| 81-99  | 地狱期 | [100, 300] | 极高 | 极度危险，逆袭机会 |
| 100    | Boss层 | [150, 500] | 中 | 终极Boss战 + 通关动画 |

### 🎨 视觉规范

**敌人颜色编码**:
- 🟢 **绿色** (`#00ff00`): 低级敌人（安全，推荐攻击）
- 🟡 **黄色** (`#ffff00`): 同级敌人（五五开博弈）
- 🔴 **红色** (`#ff0000`): 高级敌人（危险但可尝试逆袭）

**玩家角色**: 🔵 **蓝色** (`#4da6ff`) 火柴人形象

---

## 🛠️ 技术架构亮点

### 自研模块清单（零第三方依赖风险）

| 模块 | 位置 | 代码量 | 说明 |
|------|------|--------|------|
| BFS寻路算法 | `utils/pathfinding.ts` | ~180行 | 支持墙壁检测，返回最短路径 |
| 迷宫生成器 | `utils/mazeGenerator.ts` | ~220行 | 递归回溯法，动态调整密度和敌人分布 |
| 战斗计算器 | `utils/battleCalculator.ts` | ~280行 | 含v1.5概率系统、三级惩罚、Game Over判定 |
| 音频管理器 | `utils/AudioManager.ts` | ~260行 | 双平台统一API，支持音效/BGM/音量控制 |
| 状态管理 | `stores/*.ts` | ~800行 | Pinia三Store架构（game/enemy/user） |
| 平台适配器 | `platforms/adapter.ts` | ~320行 | 触摸事件/存储/震动/分享全平台差异屏蔽 |

### 性能优化策略

- ✅ Canvas分层渲染（静态地图层 + 动态实体层 + UI层分离）
- ✅ 对象池模式（粒子特效复用，避免GC卡顿）
- ✅ 分包加载策略（主包<1.5MB，音效/装饰按需下载）
- ✅ 条件编译（`#ifdef MP-WEIXIN` / `#ifdef H5` 最小化跨平台代码）
- ✅ Tween.js驱动平滑动画（requestAnimationFrame / setTimeout降级）

### 包体积预算

| 类别 | 预估大小 | 说明 |
|------|----------|------|
| UniApp框架+Vue | ~400KB | 核心运行时（压缩后） |
| Pinia状态管理 | ~15KB | 轻量级响应式框架 |
| tween.js动画库 | ~10KB | 业界标准Tween引擎 |
| 自研所有工具模块 | ~120KB | 纯JS/TS无依赖 |
| UI组件+样式 | ~80KB | SCSS编译后 |
| **预估总计** | **~625-900KB** | **远低于2MB主包限制** ✅ |

---

## 📝 开发路线图（已完成 ✅ / 进行中 🔄）

### Phase 0: 项目初始化 ✅
- [x] UniApp项目搭建 + Vue 3 + TypeScript配置
- [x] Vite构建工具链 + SCSS预处理
- [x] manifest.json/pages.json双端路由配置
- [x] 全局SCSS设计令牌系统（uni.scss）

### Phase 1: 核心原型 (MVP) ✅
- [x] TypeScript类型定义全集（types.ts）
- [x] 游戏配置参数外置（config.ts含v1.5/v1.6全部参数）
- [x] BFS寻路算法（pathfinding.ts）
- [x] 迷宫生成器（mazeGenerator.ts含100层难度曲线）
- [x] 战斗计算核心（battleCalculator.ts含胜负双分支）
- [x] 随机数工具集（random.ts）
- [x] Pinia状态管理三层架构（gameStore/enemyStore/userStore）
- [x] 平台适配器统一接口（adapter.ts）

### Phase 2: 完整体验 ✅ (核心已完成，细节可后续迭代)
- [x] Canvas渲染容器（GameCanvas.vue含主循环）
- [x] 火柴人绘制组件（StickFigure.vue三姿态+颜色编码）
- [x] 战斗动画控制器（BattleAnimation.vue胜负分支+v1.6嘲讽系统）
- [x] 音频管理器（AudioManager.ts双端适配）
- [x] 本地存档系统（userStore持久化）
- [x] 首页UI（index.vue含规则说明+图例）
- [x] 游戏页面UI（game.vue含信息面板+Game Over弹窗）
- [x] 结算页面（result.vue含完美通关/普通结束双版本）
- [ ] **待完善**: 壁壁网格渲染（drawMazeWalls）
- [ ] **待完善**: 金币收集物渲染（drawCoins）
- [ ] **待完善**: 粒子系统完整实现（drawParticles生命周期更新）
- [ ] **待完善**: 浮动文字物理运动（drawFloatingTexts插值+淡出）
- [ ] **待完善**: 完整Tween移动引擎（寻路→逐帧移动→碰撞检测）
- [ ] **待完善**: 音效资源文件制作/集成（MP3格式<2MB总大小）

### Phase 3: 打磨上线 (Phase 2完成后启动)
- [ ] 性能专项优化（FPS监控+对象池+Canvas分层）
- [ ] 新手引导教程（3步交互教程+高亮指引）
- [ ] 全面真机测试（iPhone/Android主流机型覆盖）
- [ ] 双端部署发布（微信审核流程+H5托管Vercel/Netlify）
- [ ] 数据埋点与监控（关键行为追踪+错误日志上报）

---

## 🤝 贡献指南

本项目为个人学习项目，欢迎Issue讨论和PR贡献！

### 开发规范
- 使用TypeScript严格模式
- 遵循Vue 3 Composition API最佳实践
- 所有工具函数必须纯逻辑无UI依赖（便于单元测试）
- 提交前确保 `pnpm run type-check` 无错误

---

## 📄 许可证

MIT License

---

## 🙏 致谢

- **UniApp团队** (DCloud) - 出色的跨平台开发框架
- **Vue.js团队** - 优雅的前端解决方案
- **Pinia** - 轻量且强大的状态管理
- **tween.js** - 流畅的动画过渡引擎
- **dayjs** - 极简日期处理库

---

**最后更新**: 2026-06-20 | **维护者**: AI Assistant | **版本**: v1.6