游戏方块容器 - 优化版本
🚀 项目概述
这是一个基于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. 启动项目
# 使用任何HTTP服务器启动项目
python -m http.server 8000
# 或
npx serve .
2. 访问应用
打开浏览器访问 http://localhost:8000
⌨️ 键盘快捷键
| 快捷键 | 功能 |
|---|---|
H |
隐藏/显示状态栏 |
C |
清除所有圆点 |
R |
重新连接所有WebSocket |
⚙️ 配置说明
WebSocket配置
websocket: {
baseUrl: 'ws://localhost:8501', // WebSocket服务器地址
reconnectAttempts: 5, // 重连次数
reconnectDelay: 1000, // 重连延迟
heartbeatInterval: 30000, // 心跳间隔
connectionTimeout: 10000 // 连接超时
}
游戏配置
game: {
maxDotsPerSquare: 100, // 每个方块最大圆点数
dotLifetime: 30000, // 圆点生命周期
gridSize: { width: 400, height: 400 }, // 网格大小
animationDuration: 300 // 动画持续时间
}
🔧 自定义配置
修改WebSocket服务器地址
在 config.js 中修改 websocket.baseUrl：
websocket: {
baseUrl: 'ws://your-server:port',
// ... 其他配置
}
调整性能参数
performance: {
enableAnimations: true, // 启用动画
enableHoverEffects: true, // 启用悬停效果
enableBackdropFilter: true, // 启用背景模糊
maxFPS: 60 // 最大帧率
}
📊 性能特性
1. 响应式布局
- 桌面端：2x2网格布局
- 平板端：2x2自适应布局
- 移动端：1x4垂直布局
2. 动画优化
- CSS3硬件加速
- 帧率控制
- 动画性能监控
3. 内存管理
- 圆点数量限制
- 自动清理机制
- 内存泄漏防护
🐛 调试功能
日志系统
// 在浏览器控制台查看详细日志
utils.debug('调试信息');
utils.info('一般信息');
utils.warn('警告信息');
utils.error('错误信息');
性能监控
// 测量函数执行时间
const { result, duration } = utils.measurePerformance('函数名', () => {
// 要测量的代码
});
🔒 安全特性
1. 输入验证
- 坐标范围检查
- 数据类型验证
- 恶意数据过滤
2. 连接安全
- WebSocket状态验证
- 连接超时处理
- 错误恢复机制
📱 移动端支持
- 响应式设计
- 触摸友好的界面
- 性能优化
- 电池友好的动画
🎨 主题定制
颜色方案
可以通过修改CSS变量来自定义主题：
:root {
--primary-color: #ff6b6b;
--secondary-color: #4ecdc4;
--background-color: #f5f5f5;
--border-color: #555;
}
🤝 贡献指南
- Fork 项目
- 创建功能分支
- 提交更改
- 推送到分支
- 创建 Pull Request
📄 许可证
MIT License
📞 支持
如有问题或建议，请提交 Issue 或联系开发团队。
版本: 2.0.0
最后更新: 2024年
维护者: 游戏开发团队