TankBattle 坦克大战

面向 7-11 岁小朋友的浏览器坦克对战小游戏。红方和蓝方两辆坦克可以在不同实战场景中对轰，玩家可以调整炮管和机枪角度、发射炮弹、使用有限弹药的重机枪，并在驾驶舱视角中体验天气干扰和瞄准辅助。

在线试玩

https://chenglangxtime.github.io/TankBattle/

游戏特色

• 红方、蓝方两辆坦克实时对战，坦克颜色清晰区分。
• 支持沙漠、草地、丛林、草原、荒漠 5 个实战场景。
• 每个场景有独立地貌风格，每局重新生成不同地形。
• 每个场景都有对应恶劣天气：沙尘暴、暴雨、浓雾、横风、热浪。
• 红方采用更方正厚重的虎式坦克轮廓，蓝方采用带倾斜装甲和长炮管的豹式坦克轮廓。
• 基础坦克有 15 格生命值，被命中 15 次后失败。
• 炮管角度可调，支持抛物线炮弹射击。
• 机枪角度可独立调整，命中后同样会扣除生命值。
• 每辆基础坦克配备 30 发重机枪弹药。
• 胜利和补给星会增加积分，积分达到门槛后可解锁装甲、瞄具、速射装备。
• 战场会随机出现维修、弹药和积分补给箱。
• 炮击、机枪、命中、爆炸和胜利均有音效。
• 支持主战场视角和坦克驾驶舱视角。
• 驾驶舱中用黄色弧线辅助炮击瞄准，用绿色直线辅助机枪瞄准。
• 无需安装依赖，直接用浏览器即可运行。

操作方式

红方坦克

操作	按键
左右移动	A / D
调整炮管	W / S
调整机枪	Q / E
发射炮弹	F
发射机枪	G

蓝方坦克

操作	按键
左右移动	← / →
调整炮管	↑ / ↓
调整机枪	O / P
发射炮弹	L
发射机枪	K

页面下方也提供了屏幕按钮，适合触屏或不熟悉键盘的小朋友使用。

本地运行

方式一：直接双击 index.html 打开。

方式二：启动本地静态服务。

python3 -m http.server 8765

然后在浏览器打开：

http://127.0.0.1:8765/

项目结构

.
├── index.html   # 页面结构和游戏界面
├── styles.css   # 响应式布局、HUD、驾驶舱和按钮样式
├── game.js      # 游戏逻辑、绘制、碰撞、音效和天气效果
└── README.md

技术说明

• 使用原生 HTML、CSS 和 JavaScript 开发。
• 使用 Canvas 绘制多场景战场、坦克、炮弹、驾驶舱和天气效果。
• 使用 Web Audio API 生成炮击、机枪、命中和环境风声。
• 无第三方依赖，适合部署到 GitHub Pages。

部署

本项目已配置为 GitHub Pages 静态站点，发布源为 main 分支根目录。