# study_Cursor

**Repository Path**: zlaxx/study_-cursor

## Basic Information

- **Project Name**: study_Cursor
- **Description**: 学习cursor
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-20
- **Last Updated**: 2025-06-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🎮 Vue 3 消消乐游戏

一个基于 Vue 3 + Vite 构建的现代化消消乐小游戏，具有丝滑动画效果和挑战模式。

## 🌟 游戏特色

### 🎯 核心玩法
- **经典消消乐**: 点击相邻相同颜色方块进行消除
- **挑战模式**: 60秒内达到1000分即可通关
- **步数限制**: 30步限制，增加策略性
- **智能提示**: 一键提示可消除的方块组合

### 🎨 视觉效果
- **超丝滑动画**: 精心设计的方块下落动画系统
- **多层次动效**: 新方块入场、短中长距离下落的不同动画
- **视觉反馈**: 消失、缩放、旋转、阴影等丰富效果
- **响应式设计**: 适配不同屏幕尺寸

### ⏰ 游戏机制
- **倒计时系统**: 60秒倒计时挑战
- **目标分数**: 1000分通关目标
- **实时统计**: 分数、步数、时间的实时显示
- **胜负判定**: 多种游戏结束条件

## 🏗️ 项目结构

```
study_-cursor/
├── public/                     # 静态资源目录
├── src/                        # 源代码目录
│   ├── components/             # Vue 组件
│   │   ├── GameHeader.vue      # 游戏标题组件
│   │   ├── GameInfo.vue        # 游戏信息显示组件
│   │   ├── GameBoard.vue       # 游戏棋盘容器组件
│   │   ├── GameCell.vue        # 单个方块组件
│   │   ├── GameControls.vue    # 游戏控制按钮组件
│   │   ├── GameOverModal.vue   # 游戏结束弹窗组件
│   │   └── XiaoXiaoLeGame.vue  # 主游戏组件
│   ├── composables/            # 组合式函数
│   │   └── useGameLogic.js     # 游戏逻辑核心
│   ├── App.vue                 # 根组件
│   ├── main.js                 # 应用入口
│   └── style.css               # 全局样式
├── index.html                  # HTML 入口文件
├── package.json                # 项目依赖配置
├── vite.config.js              # Vite 构建配置
├── .gitignore                  # Git 忽略文件
└── README.md                   # 项目文档
```

## 🔧 技术栈

### 前端框架
- **Vue 3**: 使用 Composition API
- **Vite**: 现代化构建工具
- **JavaScript ES6+**: 现代 JavaScript 语法

### 核心技术
- **响应式系统**: Vue 3 的 reactive 和 ref
- **组合式函数**: 可复用的游戏逻辑
- **CSS 动画**: 复杂的关键帧动画和过渡效果
- **事件系统**: 组件间通信和用户交互

### 开发工具
- **NPM**: 包管理器
- **Git**: 版本控制
- **ESLint**: 代码规范（可选）

## 📦 组件架构

### 组件层次结构
```
App.vue
└── XiaoXiaoLeGame.vue (主游戏容器)
    ├── GameHeader.vue (游戏标题)
    ├── GameInfo.vue (信息显示)
    ├── GameBoard.vue (棋盘容器)
    │   └── GameCell.vue × 64 (64个方块)
    ├── GameControls.vue (控制按钮)
    └── GameOverModal.vue (结束弹窗)
```

### 组件功能说明

#### `GameHeader.vue` - 游戏标题
- 显示游戏名称和装饰

#### `GameInfo.vue` - 信息面板
- 实时显示得分/目标分数
- 剩余步数显示
- 倒计时显示（带警告效果）
- 游戏状态提示

#### `GameBoard.vue` - 游戏棋盘
- 8×8 网格布局
- 方块容器管理
- 点击事件传递

#### `GameCell.vue` - 方块组件
- 6种颜色的emoji方块
- 复杂的动画状态管理
- 4种不同的下落动画
- 消失动画效果

#### `GameControls.vue` - 控制面板
- 重新开始按钮
- 提示功能按钮

#### `GameOverModal.vue` - 结束弹窗
- 胜利/失败不同显示
- 详细统计信息
- 重新开始功能

#### `XiaoXiaoLeGame.vue` - 主游戏容器
- 组件协调管理
- 数据流控制
- 事件处理中心

## 🎮 游戏逻辑 (`useGameLogic.js`)

### 核心功能
- **游戏状态管理**: 分数、步数、时间、游戏状态
- **棋盘逻辑**: 初始化、方块生成、连通性检测
- **重力系统**: 超丝滑的方块下落算法
- **动画控制**: 精确的时序控制和状态管理
- **胜负判定**: 多条件游戏结束检测

### 关键算法
- **连通区域检测**: DFS算法寻找相邻同色方块
- **重力模拟**: 物理感的下落效果
- **动画序列**: 分层延迟的动画触发系统

## 🚀 快速开始

### 环境要求
- Node.js 16+ 
- NPM 7+

### 安装依赖
```bash
npm install
```

### 启动开发服务器
```bash
npm run dev
```

### 构建生产版本
```bash
npm run build
```

### 预览生产版本
```bash
npm run preview
```

## 🎯 游戏规则

### 基本规则
1. **消除条件**: 点击相邻的相同颜色方块（至少2个）
2. **计分规则**: 
   - 基础分：每个方块 10 分
   - 奖励分：超过2个方块的额外奖励（每个+5分）
3. **胜利条件**: 60秒内达到1000分
4. **失败条件**: 时间用完或步数用完且未达到目标

### 游戏机制
- **重力效果**: 消除后上方方块自动下落填补
- **新方块生成**: 顶部自动补充随机颜色方块
- **提示功能**: 智能寻找可消除的方块组合
- **动画保护**: 动画期间禁止操作，确保游戏逻辑正确

## 🎨 动画系统

### 动画类型
1. **消失动画**: 方块被消除时的缩放旋转效果
2. **新方块入场**: 从顶部外滑入的弹性动画
3. **短距离下落**: 1-2格的轻快动画
4. **中距离下落**: 3-4格的平衡动画  
5. **长距离下落**: 5+格的完整物理动画

### 技术特点
- **精确时序控制**: 毫秒级的动画延迟管理
- **缓动函数**: 使用贝塞尔曲线实现自然动效
- **视觉增强**: 阴影、模糊、亮度等视觉效果
- **性能优化**: 合理的动画时长和帧率控制

## 🔮 未来规划

### 功能扩展
- [ ] 多种游戏模式（无限模式、闯关模式）
- [ ] 道具系统（炸弹、彩虹球等）
- [ ] 成就系统和排行榜
- [ ] 音效和背景音乐
- [ ] 移动端适配优化

### 技术优化
- [ ] TypeScript 重构
- [ ] 单元测试覆盖
- [ ] PWA 支持
- [ ] 国际化支持
- [ ] 主题切换功能

## 📄 开发规范

本项目遵循 Vue 3 官方推荐的开发规范：
- 使用 Composition API
- 组件命名采用 PascalCase
- 文件结构清晰，职责分离
- 响应式数据管理
- 事件驱动的组件通信

## 🤝 贡献指南

欢迎提交 Issue 和 Pull Request 来改进这个项目！

## 📜 许可证

MIT License

---

🎮 **开始游戏，挑战60秒1000分！** 🎮