⚔ 坦克大战 Tank Battle

一款基于 HTML5 Canvas 的单文件坦克大战游戏，无需安装任何依赖，直接用浏览器打开即可游玩。

在线体验

直接下载 index.html 用浏览器打开，或通过 GitHub Pages 访问（见下方部署说明）。

---

游戏截图

╔══════════════════════════════╗
║  ⚔ 坦克大战  分数:1200  ♥♥♥ ║
║                              ║
║  [敌] ░░░░░░░░ [敌]          ║
║       ██   ██               ║
║       ██   ██               ║
║           ●  ← 子弹         ║
║       ██   ██               ║
║         [玩家]               ║
║          ★  ← 基地           ║
╚══════════════════════════════╝

---

操作说明

按键	功能
↑ ↓ ← → 或 W A S D	移动坦克
空格	射击
P	暂停 / 继续
空格 / Enter	开始游戏 / 下一关 / 重新开始

---

游戏规则

• 消灭当前关卡所有敌方坦克即可过关
• 基地（★星形图标）被摧毁则直接游戏结束
• 玩家共有 3 条命，坦克被击毁后会重新出生
• 出生后有短暂的 无敌盾（闪烁蓝圈）保护
• 分数随关卡系数递增，击杀越强的坦克得分越高

---

关卡设计

关卡	敌人数量	地图特点
第 1 关	7 辆	基础砖墙地图，适合入门
第 2 关	10 辆	钢墙 + 水域障碍，通道变窄
第 3 关	13 辆	复杂地形，四面围堵

---

敌方坦克类型

类型	颜色	速度	生命值	击杀得分（×关卡系数）
普通坦克	红色	慢	1	100
快速坦克	橙色	快	1	200
装甲坦克	紫色	慢	3	400

---

地图元素

图标	名称	说明
棕色砖块	砖墙	子弹可击穿摧毁
灰色方块	钢墙	子弹无法穿透，永久障碍
蓝色水域	水域	子弹可穿过，坦克无法通行
金色星形	基地	必须保护，被摧毁则游戏结束

---

技术实现

• 语言：纯 HTML5 + CSS3 + 原生 JavaScript，零依赖
• 渲染：Canvas 2D API
• 游戏循环：requestAnimationFrame + 帧时间差（delta time）
• 碰撞检测：四角点采样 + AABB 矩形检测
• 敌方 AI：随机方向游走 + 定期瞄准玩家射击
• 粒子特效：爆炸粒子系统，速度衰减模拟

---

部署到 GitHub Pages

1. 进入仓库页面 → Settings → Pages
2. Source 选择 Deploy from a branch
3. Branch 选 main，目录选 / (root)
4. 保存后稍等片刻，即可通过 https://<用户名>.github.io/<仓库名>/ 访问

---

本地运行

# 克隆仓库
git clone https://github.com/X-J-S-C/-new.git
cd -new

# 直接用浏览器打开（Windows）
start index.html

# 或用本地服务器（推荐，避免某些浏览器限制）
npx serve .
# 然后访问 http://localhost:3000

---

文件结构

.
└── index.html   # 游戏全部代码（HTML + CSS + JS 单文件）
└── README.md    # 本说明文档

---

License

MIT License — 自由使用、修改、分发。