🚀 坦克对战项目 · 对话记录
包游文化 · Supabase 联机坦克游戏开发过程
一、项目起源
你
继续包游文化官网项目。想做一款联机坦克游戏，需求：
1. 炮弹碰墙反弹，最多弹 2 次
2. 第 2 次反弹后在墙上爆炸
3. 爆炸范围小，离中心越近扣血越多
4. 坦克有血条
5. 用 Supabase 做联机（房间码匹配）
我
做了完整方案：Supabase Realtime 的 Broadcast + Presence 做房间匹配，纯前端 Canvas 渲染，炮弹反弹用速度取反实现，爆炸伤害用
(1 - dist/radius) 做线性衰减。
二、从联机到单机
你
我没有两台设备测试联机。先做一个纯前端的同屏双人版吧——一台设备左右各一套方向键，手机上屏幕一分为二。
我
做了同屏双人版：左边 WASD+空格，右边方向键+回车，手机上左右各一套触屏按钮。测试通过。
三、加障碍物
你
单机版测试成功了，中间再加点随机障碍物，别太多，障碍物也要能反弹。
我
加了障碍物：每局随机 3~5 个灰色方块，坦克撞不进去，炮弹碰到也反弹算一次。坦克用"圆 vs 矩形"碰撞检测，炮弹判断从哪边进入来反哪一边。
四、二合一
你
把联机版和单机版加在一起，一个页面进去先选模式。
我
做了模式选择页：同屏双人 / 联机对战。联机模式下创建房间的人是 P1，加入的是 P2，都用 WASD+空格操作自己那辆。
我
联机版障碍物改成：由创建房间的人（P1）生成一次，通过 Supabase 广播给 P2，两边用同一份，保证同步一致。
五、技术要点
我
服务器：用 Supabase，不用自己搭。免费版每月 200 万消息转发，够用。
房间匹配：频道名
room:房间码，两个人进同一个房间就开始。
同步机制：谁射击谁广播，各自算自己的血量，避免服务器权威。
文件结构：一个 index.html 搞定，HTML + CSS + JS 全在一起，方便上传和分享。
六、部署
我
目标网址：https://baoyouwenhua.github.io/tank/
做法：在 GitHub 仓库
baoyouwenhua/baoyouwenhua.github.io 里建
tank/index.html，把完整代码粘进去，等 1~2 分钟自动发布。
测试：电脑开两个浏览器窗口（一个正常+一个无痕）就能测联机，不需要两台设备。
七、当前状态
我
✅ 同屏双人版：已测试通过
✅ 障碍物：已加入
✅ 二合一入口页：已完成
✅ 联机版：代码写完
⏳ 联机实测：待两台设备测试
⏳ 上线 GitHub：待上传