# tanke

**Repository Path**: format_hu/tanke

## Basic Information

- **Project Name**: tanke
- **Description**: 坦克大战游戏
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-31
- **Last Updated**: 2025-06-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🎮 坦克大战游戏

一个基于HTML5 Canvas的全屏坦克大战游戏，具有精美的视觉效果和流畅的游戏体验。

## ✨ 功能特色

### 🖥️ 全屏Canvas场景
- ✅ 响应式全屏适配
- ✅ 高DPI屏幕支持
- ✅ 像素完美渲染
- ✅ 60FPS流畅游戏循环

### 🎨 精美细节
- ✅ 科幻风格UI设计
- ✅ 粒子特效系统
- ✅ 屏幕震动效果
- ✅ 发光效果和阴影
- ✅ 网格背景和星空效果

### 🎯 游戏功能
- ✅ 玩家坦克控制（WASD/方向键）
- ✅ 射击系统（空格键）
- ✅ 敌方AI坦克
- ✅ 可破坏墙体
- ✅ 碰撞检测
- ✅ 实时UI显示
- ✅ 暂停/恢复功能

## 🚀 快速开始

### 方式一：直接打开
1. 双击 `index.html` 文件在浏览器中打开

### 方式二：本地服务器
1. 确保已安装Python
2. 在项目目录下运行：
   ```bash
   python -m http.server 8000
   ```
3. 在浏览器中访问：`http://localhost:8000`

## 🎮 游戏控制

| 按键 | 功能 |
|------|------|
| **WASD** 或 **方向键** | 移动坦克 |
| **空格键** | 射击 |
| **ESC** | 暂停/恢复游戏 |
| **R** | 重新开始 |
| **F11** | 全屏切换 |

## 🛠️ 技术架构

### 前端技术栈
- **HTML5** - 页面结构
- **CSS3** - 样式和动画
- **JavaScript ES6+** - 游戏逻辑
- **Canvas 2D API** - 图形渲染

### 核心系统
- **Vector2D** - 二维向量运算
- **ParticleSystem** - 粒子特效
- **InputHandler** - 输入处理
- **Game** - 主游戏循环

### 性能优化
- 对象池管理
- 粒子数量限制
- 脏区域重绘
- 帧率控制

## 📁 项目结构

```
坦克大战游戏/
├── index.html              # 主页面
├── css/
│   └── style.css           # 样式文件
├── js/
│   ├── main.js             # 启动文件
│   ├── Game.js             # 游戏主类
│   ├── utils/
│   │   ├── Vector2D.js     # 向量工具
│   │   └── ParticleSystem.js # 粒子系统
│   ├── systems/
│   │   ├── InputHandler.js # 输入处理
│   │   ├── CollisionSystem.js
│   │   ├── RenderSystem.js
│   │   └── AudioSystem.js
│   └── entities/
│       ├── Tank.js
│       ├── PlayerTank.js
│       ├── EnemyTank.js
│       ├── Bullet.js
│       ├── Wall.js
│       └── PowerUp.js
└── README.md               # 项目说明
```

## 🎯 游戏机制

### 坦克系统
- **玩家坦克**：绿色发光，快速移动
- **敌方坦克**：红色发光，AI控制
- **生命值系统**：碰撞和子弹伤害

### 武器系统
- **子弹轨迹**：发光粒子效果
- **射击冷却**：防止过快射击
- **爆炸效果**：击中目标时的粒子爆炸

### 地图系统
- **钢墙**：灰色，不可破坏
- **砖墙**：棕色，可以被子弹破坏
- **边界墙**：防止坦克离开游戏区域

## ✅ 自测结果

### 功能测试
- ✅ 全屏Canvas正常显示
- ✅ 坦克移动控制响应
- ✅ 射击系统工作正常
- ✅ 粒子特效美观流畅
- ✅ 碰撞检测准确
- ✅ 敌方AI运行正常
- ✅ UI界面精美
- ✅ 暂停/恢复功能正常

### 性能测试
- ✅ 60FPS稳定运行
- ✅ 内存占用合理
- ✅ 粒子系统优化良好
- ✅ 响应式适配正常

### 兼容性测试
- ✅ 现代浏览器支持
- ✅ 高DPI屏幕适配
- ✅ 键盘输入正常
- ✅ 窗口调整适配

## 🔧 调试功能

在浏览器控制台中可以使用：
- `game` - 访问游戏对象
- `game.particleSystem.createExplosion(x, y)` - 创建爆炸效果
- 实时FPS和性能监控

## 🎨 视觉特效

### 粒子系统
- **爆炸效果**：多种颜色粒子
- **枪口火焰**：射击时的火花
- **烟雾效果**：坦克移动轨迹
- **墙体破碎**：砖墙被击碎的碎片

### 光影效果
- **发光边框**：坦克和子弹的霓虹效果
- **阴影模糊**：增强立体感
- **屏幕震动**：爆炸时的视觉反馈

## 🚧 未来扩展

- [ ] 音效系统
- [ ] 更多敌方类型
- [ ] 道具系统
- [ ] 关卡设计器
- [ ] 多人模式
- [ ] 存档系统

## 💡 开发说明

这是一个展示HTML5 Canvas游戏开发技术的项目，重点关注：
1. **全屏Canvas的正确实现**
2. **精美的视觉细节和特效**
3. **流畅的60FPS游戏体验**
4. **现代JavaScript最佳实践**

游戏采用模块化架构，便于扩展和维护。所有系统都经过精心设计，确保代码的可读性和性能。

---

**🎮 享受游戏！** 如有问题或建议，欢迎反馈。