如何用B站弹幕控制游戏如何用B站弹幕控制游戏

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

文章图片

具体逻辑是：

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

这样就实现从操作到展示的完整逻辑，所有直播间的水友都可以参与游戏，下面是实际效果：
让我们来看看技术细节吧。
监听水友们的弹幕这一步我使用puppeteer监听我直播间的DOMNodeInserted事件。

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

当触发后，根据类名筛选出属于弹幕的节点。
不得不说，B站弹幕数据真的很好抓，都存在$('.chat-item.danmaku-item').dataset()中了。

文章图片

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

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

我的处理方法是：设置一个时间间隔（200ms），统计在此时间内收到各种指令的数量。
200ms到期后出现次数最多的指令作为最终指令。

文章图片

魔改坦克大战接下来我开始寻找开源的坦克大战，这个仓库的star最多：battle-city
开始我以为作者是用canvas实现的游戏，但是当我看到这些文件名时，就知道事情没有这么简单：

文章图片

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

文章图片

子弹是React组件，场景切换是路由切换，状态管理用的Redux-Saga。
【如何用B站弹幕控制游戏】不得不说，这个项目写下来，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秒延迟的情况下，本来弱智的电脑，简直天神下凡。
为了减少玩家的挫败感，我决定，让玩家互相对决。