闲着无聊想玩坦克大战，结果网上那些在线版全都不支持手柄。一气之下让 AI 写了一个，效果意外地不错，特分享出来。

✨ 游戏特色

🎯 操控方式

⌨️ 键盘（桌面端）

🎮 蓝牙手柄

手柄1 自动映射到 P1，手柄2 自动映射到 P2。HUD 上会显示 🎮 图标表示已连接。

📱 触屏（手机/平板）

• 左下摇杆：拖拽控制 P1 移动方向
• 左下射击按钮：按住持续射击
• 右下摇杆：拖拽控制 P2 移动方向
• 右下射击按钮：按住持续射击

🎯 游戏玩法

目标

双人合作消灭关卡中所有敌方坦克，同时保护地图底部的基地（鹰）不被摧毁。

胜负条件

• ✅ 过关：消灭所有敌方坦克
• ❌ 失败：基地被摧毁 或 两名玩家生命全部耗尽

生命系统

每名玩家初始有 3 条命。被击中后短暂无敌并重生在出生点。拾取 ❤️ 道具可增加生命（最多 5 条）。

🗺️ 地图元素

🎁 道具系统

消灭敌人有概率掉落道具（20% + 5%×关卡数，第6关可达50%），拾取后立即生效：

🏆 关卡设计

游戏内置 9 个关卡，难度递增：

通关所有关卡后显示「ALL CLEAR!」胜利画面。

🔧 技术实现

技术栈

• 纯前端：HTML5 + CSS3 + JavaScript（零依赖）
• 渲染引擎：Canvas 2D API，60fps requestAnimationFrame 循环
• 手柄支持：Web Gamepad API（navigator.getGamepads()）
• 音效：Web Audio API 实时合成（无需音频文件）
• 碰撞检测：四角点采样 + AABB 矩形碰撞

核心架构

项目结构（3个文件）
├── tank-battle.html   — HTML 壳，引入 CSS 和 JS
├── tank-battle.css    — 霓虹主题、摇杆布局、响应式样式
└── tank-battle.js     — 全部游戏逻辑

JS 模块划分
├── 游戏常量           — 地图尺寸、瓦片类型(10种)、方向向量
├── 关卡数据           — 9 个 20×15 网格地图
├── Tank 类            — 玩家/敌人/分身坦克，冰面滑行，传送门
├── Bullet 类          — 子弹物理、拖尾、碰撞检测
├── 粒子系统           — 爆炸、碎片、火花特效
├── 敌方 AI            — 随机巡逻 + 概率追踪玩家
├── 分身 AI            — 自动追踪最近敌人并射击
├── 冰面/传送系统      — 滑行物理 + 传送门配对
├── 输入处理           — 键盘/手柄/触屏三合一
├── 游戏循环           — update() + render() 60fps
└── 道具系统           — 6 种道具，掉落率20%+5%×关卡

Gamepad 按键映射

📥 安装与运行

方式一：直接打开（推荐）

1. 下载 tank-battle.html、tank-battle.css、tank-battle.js 三个文件放在同一目录
2. 用任意现代浏览器（Chrome / Edge / Firefox / Safari）打开 tank-battle.html
3. 即可开始游戏！

方式二：部署到服务器

# 将文件放到任意 Web 服务器目录即可
# 例如 Nginx、Apache、GitHub Pages、Vercel、Netlify 等

浏览器兼容性

❓ 常见问题

Q: 手柄连接了但没反应？
A: 确保在 HTTPS 或 localhost 环境下运行。按一下手柄上的任意按键激活连接，刷新页面后重试。

Q: 敌人不出来？
A: 已修复。敌人会在第一关开始后约 2 秒从地图顶部三个位置出生。

Q: 冰面怎么玩？
A: 坦克进入冰面后会自动滑行，速度+30%且无法转向。利用这一点可以快速穿越危险区域，但注意别滑进敌人火力中。

Q: 传送门怎么用？
A: 走进紫色漩涡即可传送到配对传送门。有30帧冷却时间，适合快速转移或逃脱。

Q: 克隆分身有什么作用？
A: 拾取橙色👥道具后，身旁生成2辆AI坦克，自动追踪敌人射击，8秒后消失。分身不会阻挡玩家移动。

Q: 可以单人玩吗？
A: 可以，P1 使用键盘/手柄独自作战即可。P2 不动也不会影响游戏。

Q: 如何修改关卡？
A: 编辑 LEVELS 数组，每个关卡是一个 20×15 的二维数组。数字含义：0=空地, 1=砖墙, 2=钢墙, 3=水域, 4=树林, 5=基地。

Q: 支持 Xbox / PS / Switch 手柄吗？
A: 只要是标准蓝牙手柄，浏览器能识别为 Gamepad 设备即可。Xbox 和 PS 手柄测试通过，Switch Pro 手柄也可用。

🚀 快速体验：

用浏览器打开 tank-battle.html 即可开始游戏，无需安装任何依赖。

离线版：