🔥 先看效果

默认主题 · 四色大战

原仓库是 KeJunMao/open-block-war，一个基于 Phaser 3 + React 的直播互动游戏。思路很酷——观众弹幕=游戏指令，礼物=技能。

但原项目太久没更新了，代码里有：

• ❌ paid/ 目录名不副实（装的是主题配置，跟付费无关）
• ❌ 用 throw new Error() 做控制流跳转
• ❌ 3 套重复的 HMAC 签名代码互不知道对方存在
• ❌ B站弹幕 WebSocket 连接纯靠玄学，时断时续

我 fork 下来做了一次全面重构，把弹幕链路从脆弱的 JS 包换成了 Python 桥接，重写了 API 层，整理了代码结构。

现在它稳定、好用、开箱即配。

🎮 弹幕 & 礼物全映射表

🖥️ 需要准备什么？

软件（全部免费）：

硬件：

• Windows / macOS / Linux 都行
• 建议 8GB 内存
• ✅ 不需要 GPU，纯 CPU 就能跑

🚀 5 分钟搭起来

第 1 步：获取代码

git clone https://github.com/mzm010101/open-block-war.git
cd open-block-war

没装 git？GitHub 点绿色「Code」→「Download ZIP」解压也一样。

第 2 步：安装依赖

# 前端依赖
pnpm install

# Python 桥接依赖（连接 B站弹幕用）
pip install -r bridge/requirements.txt

pip 慢的话加清华镜像：-i https://pypi.tuna.tsinghua.edu.cn/simple

第 3 步：启动（两个终端）

# 终端 1 → 弹幕桥接
pnpm bridge

# 终端 2 → 游戏服务器
pnpm dev

看到这个就是成功了：

终端 1: Starting Bilibili Live Bridge on ws://0.0.0.0:8765
终端 2: VITE v4.0.3  ready → http://localhost:5173/

💡 装了 concurrently 的话，pnpm dev:all 一键同时启动。

第 4 步：打开浏览器

http://localhost:5173/你的B站直播间号

例如直播间 25093886：

http://localhost:5173/25093886

画面正中是 Phaser 渲染的方块战场，左侧是队伍信息，右侧是积分榜和 MVP。

第 5 步：测试弹幕

在自己直播间发条 "红" → 红色基地出现一个小兵开始占地盘。
再发 "蓝"、"黄"、"绿" → 各阵营就都有人了。

🎨 内置 9 款皮肤，URL 一键切换

URL 后面加 ?theme=主题名：

http://localhost:5173/25093886?theme=war3

📺 直播姬 / OBS 接入

B站直播姬：

1. 添加素材 → 浏览器源
2. URL：http://localhost:5173/25093886?theme=war3
3. 宽度：1120，高度：1120
4. ✅ 必须勾选「启用硬件加速」，否则黑屏
5. 拖动缩放至合适大小

OBS Studio：

1. 来源 → ➕ → 浏览器
2. 参数同上

⚡ 技术栈

前端游戏:  Phaser 3 + React 18 + TypeScript + Redux Toolkit + MUI
构建工具:  Vite 4
API 服务:  Express（集成式）
弹幕桥梁:  Python + bilibili-api-python + websockets
状态持久:  redux-persist (localStorage)

GitHub 仓库：mzm010101/open-block-war