前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何用B站弹幕控制游戏

如何用B站弹幕控制游戏

作者头像
公众号@魔术师卡颂
发布2021-10-12 14:48:27
1.5K0
发布2021-10-12 14:48:27
举报
文章被收录于专栏:魔术师卡颂

大家好,我卡颂。

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

具体逻辑是:

  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解决跨域问题。

「坦克大战」中,接收到的指令构造成「键盘事件」派发出去:

代码语言:javascript
复制
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秒延迟的情况下,本来弱智的电脑,简直天神下凡。

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

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

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-09-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 魔术师卡颂 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 监听水友们的弹幕
  • 指令识别
  • 魔改坦克大战
  • 项目间通信
  • 总结
相关产品与服务
云直播
云直播(Cloud Streaming Services,CSS)为您提供极速、稳定、专业的云端直播处理服务,根据业务的不同直播场景需求,云直播提供了标准直播、快直播、云导播台三种服务,分别针对大规模实时观看、超低延时直播、便捷云端导播的场景,配合腾讯云视立方·直播 SDK,为您提供一站式的音视频直播解决方案。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档