如何用B站弹幕控制游戏

大家好，我卡颂。

中秋节在家无聊，想整点儿好玩的。思来想去决定做个用弹幕控制的坦克大战。

具体逻辑是：

1. 监听直播间水友们的弹幕
2. 将弹幕中有效的指令提取出来
3. 将指令转化为键盘按键在坦克大战中输入
4. 直播坦克大战游戏画面

这样就实现从操作到展示的完整逻辑，所有直播间的水友都可以参与游戏，下面是实际效果：

让我们来看看技术细节吧。

监听水友们的弹幕

这一步我使用puppeteer监听我直播间的DOMNodeInserted事件。

DOMNodeInserted事件在一个节点作为子节点被插入到另一个节点中时触发

当触发后，根据类名筛选出属于弹幕的节点。

不得不说，B站弹幕数据真的很好抓，都存在$('.chat-item.danmaku-item').dataset()中了。

指令识别

抓取出弹幕内容后，需要些额外处理，比如：

• 12345代表上下左右 开炮，需要识别出带这些数字的弹幕
• 奇数昵称长度的水友的弹幕控制玩家1的坦克，偶数控制玩家2的坦克
• 处理同一时间多人发弹幕的情况

我的处理方法是：设置一个时间间隔（200ms），统计在此时间内收到各种指令的数量。

200ms到期后出现次数最多的指令作为最终指令。

魔改坦克大战

接下来我开始寻找开源的坦克大战，这个仓库的star最多：battle-city

开始我以为作者是用canvas实现的游戏，但是当我看到这些文件名时，就知道事情没有这么简单：

整个游戏居然都是React做的！

子弹是React组件，场景切换是路由切换，状态管理用的Redux-Saga。

不得不说，这个项目写下来，Redux-Saga这套状态管理方案作者肯定是玩儿明白了。

项目间通信

为了将B站弹幕抓取项目中识别的指令实时传递给坦克大战，需要使用websocket协议。

这里我选择的是socket.io库。

值得一提的是：需要在服务端（也就是弹幕抓取项目）的 socket.io配置中设置 cors: true解决跨域问题。

在坦克大战中，接收到的指令构造成键盘事件派发出去：

const fireKeyEvent = (evtType: string, keyChar: string) => {
  var KeyboardEventInit = {key: keyChar, code: keyChar, location:0, repeat:false, isComposing:false};
  var evtObj = new KeyboardEvent(evtType, KeyboardEventInit);
  document.dispatchEvent(evtObj);
}

总结

整个过程没有什么技术难点。唯一比较坑的是：直播有5秒左右延时，所以从弹幕发出到操作坦克有延迟。

在5秒延迟的情况下，本来弱智的电脑，简直天神下凡。

为了减少玩家的挫败感，我决定，让玩家互相对决。

这样，大家都在同一起跑线上啦。

最后，在一片弹幕中，渡过了一个祥和的中秋节夜晚。

我不是说直播间的各位水友，我说我自己，真够无聊的......

欢迎加入人类高质量前端框架研究群，带飞