# miao

**Repository Path**: tisboy/miao

## Basic Information

- **Project Name**: miao
- **Description**: 抽卡系统
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-17
- **Last Updated**: 2026-01-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 抽卡系统

一个基于Vue 3 + Nuxt 3 + Three.js的3D抽卡系统，用于展示和抽取古代史人物卡片。

## 功能特性

- ✨ 3D卡片旋转展示
- 🎯 随机抽卡功能
- 🎵 音效系统（背景音乐、抽卡音效、选中音效）
- 📊 SQLite数据库记录抽卡数据
- 🎨 响应式设计，适配不同屏幕尺寸
- 🚀 流畅的动画效果
- 💾 持久化存储，数据不会因刷新页面丢失

## 技术栈

| 技术 | 版本 | 说明 |
| --- | --- | --- |
| Nuxt.js | 3.x | 前端框架 |
| Vue.js | 3.x | 渐进式JavaScript框架 |
| Three.js | 0.170.0 | 3D图形库 |
| SQLite3 | 5.1.7 | 关系型数据库 |
| sql.js | - | SQLite的JavaScript版（已迁移到sqlite3） |

## 安装教程

### 环境要求

- Node.js >= 18.0.0
- npm >= 9.0.0

### 安装步骤

1. **克隆项目**
   ```bash
   git clone https://gitee.com/tisboy/miao.git
   ```

2. **安装依赖**
   ```bash
   cd gacha-system
   npm install
   ```

3. **启动开发服务器**
   ```bash
   npm run dev
   ```

4. **访问应用**
   在浏览器中访问 `http://localhost:3000`

## 使用说明

### 基本操作

1. **查看卡片**：鼠标悬停在卡片上可以放大查看卡片详情
2. **抽卡**：点击底部的"抽卡"按钮开始抽卡
3. **停止抽卡**：抽卡过程中点击"停止"按钮停止抽卡
4. **返回卡片列表**：点击空白区域返回卡片旋转列表

### 音效系统

- 首次进入页面时，音效系统处于禁用状态
- 进行任意交互（点击、触摸、按键等）后自动启用音效
- 背景音乐自动播放，音量较小
- 抽卡和选中卡片时播放相应音效

### 数据库功能

- 自动记录所有抽中的卡片
- 防止重复抽中相同的卡片
- 当所有卡片抽完时，显示完成提示
- 数据持久化存储，不会因刷新页面或清空缓存而丢失

## 项目结构

```
gacha-system/
├── assets/              # 静态资源
│   └── images/          # 卡片图片
├── pages/               # 页面组件
│   └── index.vue        # 主页面
├── public/              # 公共资源
│   ├── audio/           # 音频文件
│   └── favicon.jpg      # 网站图标
├── server/              # 服务器端代码
│   ├── api/             # API端点
│   │   ├── drawn-cards.delete.js  # 清空抽卡记录
│   │   ├── drawn-cards.get.js     # 获取抽卡记录
│   │   └── drawn-cards.post.js    # 记录抽卡数据
│   └── database.js      # 数据库连接和初始化
├── .gitignore           # Git忽略文件
├── database.db          # SQLite数据库文件
├── nuxt.config.ts       # Nuxt配置
├── package-lock.json    # 依赖锁文件
└── package.json         # 项目配置
```

## 注意事项

1. **浏览器兼容性**
   - 推荐使用Chrome、Firefox、Edge等现代浏览器
   - 不支持IE浏览器

2. **音频 autoplay 政策**
   - 由于浏览器政策限制，音频需要用户交互后才能播放
   - 首次进入页面时，请进行任意交互以启用音效

3. **性能优化**
   - 卡片数量不宜过多，建议不超过50张
   - 图片尺寸建议统一，以获得最佳显示效果

## 许可证

MIT License

## 贡献

### 参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

## 联系方式

如有问题或建议，请通过以下方式联系：

- b站: 松哥的喵
- Gitee: https://gitee.com/tisboy/miao.git

---

**更新日志**

- 2026-01-18: 迁移到sqlite3数据库，优化抽卡逻辑
- 2026-01-17: 修复音频autoplay问题，添加音效系统
- 2026-01-16: 实现3D卡片旋转展示和抽卡功能
- 2026-01-15: 初始化项目，搭建基础架构