216 lines
5.0 KiB
Markdown
216 lines
5.0 KiB
Markdown
# 游戏方块容器 - 优化版本
|
||
|
||
## 🚀 项目概述
|
||
|
||
这是一个基于Vue 3和WebSocket的实时游戏监控系统，用于显示4个游戏方块的连接状态和动态圆点。
|
||
|
||
## ✨ 优化内容
|
||
|
||
### 1. **性能优化**
|
||
- ✅ **WebSocket连接管理优化**：使用连接池和自动重连机制
|
||
- ✅ **DOM操作优化**：使用Vue响应式数据替代直接DOM操作
|
||
- ✅ **内存管理**：限制圆点数量，防止内存泄漏
|
||
- ✅ **动画性能**：使用CSS3硬件加速和will-change属性
|
||
|
||
### 2. **代码结构优化**
|
||
- ✅ **组件化设计**：将方块组件化，提高代码复用性
|
||
- ✅ **服务类分离**：WebSocket逻辑独立到服务类
|
||
- ✅ **配置管理**：统一的配置文件管理
|
||
- ✅ **工具类**：通用工具函数和日志系统
|
||
|
||
### 3. **用户体验优化**
|
||
- ✅ **响应式设计**：支持不同屏幕尺寸
|
||
- ✅ **加载状态**：连接状态指示器和加载动画
|
||
- ✅ **键盘快捷键**：快速操作功能
|
||
- ✅ **状态栏**：实时显示连接状态和统计信息
|
||
|
||
### 4. **错误处理增强**
|
||
- ✅ **完善的错误处理**：WebSocket连接错误处理
|
||
- ✅ **自动重连机制**：指数退避算法
|
||
- ✅ **日志系统**：分级日志记录
|
||
- ✅ **性能监控**：性能测量和分析
|
||
|
||
### 5. **安全性优化**
|
||
- ✅ **输入验证**：坐标范围验证
|
||
- ✅ **连接验证**：WebSocket连接状态检查
|
||
- ✅ **错误边界**：防止应用崩溃
|
||
|
||
## 🛠️ 技术栈
|
||
|
||
- **前端框架**：Vue 3
|
||
- **通信协议**：WebSocket
|
||
- **样式**：CSS3 + 响应式设计
|
||
- **协议缓冲**：Protobuf.js
|
||
- **工具库**：自定义工具类
|
||
|
||
## 📁 项目结构
|
||
|
||
```
|
||
web/
|
||
├── index.html # 主页面
|
||
├── game.js # 主应用逻辑
|
||
├── config.js # 配置文件
|
||
├── utils.js # 工具类
|
||
├── style.css # 样式文件
|
||
├── proto/ # 协议文件
|
||
│ ├── action.proto # 动作协议
|
||
│ └── define.proto # 定义协议
|
||
└── README.md # 项目说明
|
||
```
|
||
|
||
## 🚀 快速开始
|
||
|
||
### 1. 启动项目
|
||
```bash
|
||
# 使用任何HTTP服务器启动项目
|
||
python -m http.server 8000
|
||
# 或
|
||
npx serve .
|
||
```
|
||
|
||
### 2. 访问应用
|
||
打开浏览器访问 `http://localhost:8000`
|
||
|
||
## ⌨️ 键盘快捷键
|
||
|
||
| 快捷键 | 功能 |
|
||
|--------|------|
|
||
| `H` | 隐藏/显示状态栏 |
|
||
| `C` | 清除所有圆点 |
|
||
| `R` | 重新连接所有WebSocket |
|
||
|
||
## ⚙️ 配置说明
|
||
|
||
### WebSocket配置
|
||
```javascript
|
||
websocket: {
|
||
baseUrl: 'ws://localhost:8501', // WebSocket服务器地址
|
||
reconnectAttempts: 5, // 重连次数
|
||
reconnectDelay: 1000, // 重连延迟
|
||
heartbeatInterval: 30000, // 心跳间隔
|
||
connectionTimeout: 10000 // 连接超时
|
||
}
|
||
```
|
||
|
||
### 游戏配置
|
||
```javascript
|
||
game: {
|
||
maxDotsPerSquare: 100, // 每个方块最大圆点数
|
||
dotLifetime: 30000, // 圆点生命周期
|
||
gridSize: { width: 400, height: 400 }, // 网格大小
|
||
animationDuration: 300 // 动画持续时间
|
||
}
|
||
```
|
||
|
||
## 🔧 自定义配置
|
||
|
||
### 修改WebSocket服务器地址
|
||
在 `config.js` 中修改 `websocket.baseUrl`：
|
||
|
||
```javascript
|
||
websocket: {
|
||
baseUrl: 'ws://your-server:port',
|
||
// ... 其他配置
|
||
}
|
||
```
|
||
|
||
### 调整性能参数
|
||
```javascript
|
||
performance: {
|
||
enableAnimations: true, // 启用动画
|
||
enableHoverEffects: true, // 启用悬停效果
|
||
enableBackdropFilter: true, // 启用背景模糊
|
||
maxFPS: 60 // 最大帧率
|
||
}
|
||
```
|
||
|
||
## 📊 性能特性
|
||
|
||
### 1. **响应式布局**
|
||
- 桌面端：2x2网格布局
|
||
- 平板端：2x2自适应布局
|
||
- 移动端：1x4垂直布局
|
||
|
||
### 2. **动画优化**
|
||
- CSS3硬件加速
|
||
- 帧率控制
|
||
- 动画性能监控
|
||
|
||
### 3. **内存管理**
|
||
- 圆点数量限制
|
||
- 自动清理机制
|
||
- 内存泄漏防护
|
||
|
||
## 🐛 调试功能
|
||
|
||
### 日志系统
|
||
```javascript
|
||
// 在浏览器控制台查看详细日志
|
||
utils.debug('调试信息');
|
||
utils.info('一般信息');
|
||
utils.warn('警告信息');
|
||
utils.error('错误信息');
|
||
```
|
||
|
||
### 性能监控
|
||
```javascript
|
||
// 测量函数执行时间
|
||
const { result, duration } = utils.measurePerformance('函数名', () => {
|
||
// 要测量的代码
|
||
});
|
||
```
|
||
|
||
## 🔒 安全特性
|
||
|
||
### 1. **输入验证**
|
||
- 坐标范围检查
|
||
- 数据类型验证
|
||
- 恶意数据过滤
|
||
|
||
### 2. **连接安全**
|
||
- WebSocket状态验证
|
||
- 连接超时处理
|
||
- 错误恢复机制
|
||
|
||
## 📱 移动端支持
|
||
|
||
- 响应式设计
|
||
- 触摸友好的界面
|
||
- 性能优化
|
||
- 电池友好的动画
|
||
|
||
## 🎨 主题定制
|
||
|
||
### 颜色方案
|
||
可以通过修改CSS变量来自定义主题：
|
||
|
||
```css
|
||
:root {
|
||
--primary-color: #ff6b6b;
|
||
--secondary-color: #4ecdc4;
|
||
--background-color: #f5f5f5;
|
||
--border-color: #555;
|
||
}
|
||
```
|
||
|
||
## 🤝 贡献指南
|
||
|
||
1. Fork 项目
|
||
2. 创建功能分支
|
||
3. 提交更改
|
||
4. 推送到分支
|
||
5. 创建 Pull Request
|
||
|
||
## 📄 许可证
|
||
|
||
MIT License
|
||
|
||
## 📞 支持
|
||
|
||
如有问题或建议，请提交 Issue 或联系开发团队。
|
||
|
||
---
|
||
|
||
**版本**: 2.0.0
|
||
**最后更新**: 2024年
|
||
**维护者**: 游戏开发团队 |