决战摸鱼之巅: 将 vscode 撸成可局域网联机对战的 moba 平台
一年多前撸过 1 个小霸王插件,不过由于是单机版无法联机,交互性不够。刚好最近看到 qq 堂下线的新闻,为了弥补之前的遗憾,利用假期时间参考这种类炸弹人模式开发了一个可以局域网联机对战的 moba 游戏,给大家工作之余提供一个能够和小伙伴一起愉悦身心的工具,间接提升大家使用 vscode 的开发效率。
主要目的 使 vscode 放松身心、提升效率、增强算法水平的能力进一步增强
安装
在 vscode 插件市场搜索 alphabe-war 点击安装即可
启动
安装成功后点击左侧 G 图标,进入游戏列表界面
该界面有栏构成
ROOM LIST 为房间界面展示当前局域网中正在等待开始的游戏,鼠标 hover 到该栏有 + 按钮创建游戏。第一次创建需要先输入玩家名称
AI SCRIPT LIST 为操作脚本界面,可以自由编辑脚本控制玩家行为
创建游戏
在 ROOM LIST 点击 + 创建后,进入房间界面
玩家进入且全部为准备状态,房主点击开始游戏启动(游戏界面图下面附有一张动态的 gif,可以稍等加载看动态效果)
操作方式
手动模式 该模式通过上、下、左、右控制方向,空格控制埋雷;
脚本模式 通过编写 js 脚本控制玩家进行游戏。目前提供了当前游戏所有存在对象的当前状态和 5 种行为操作玩家游戏
游戏目标
两方队伍通过消灭字符怪或者对方获取字符,率先抢到 HELLO WORLD 所有字符的一方获胜,游戏右侧为当前状态栏。分别展示 Team1 和 Team2 的目标字符,和玩家当前获取的字符。
游戏对象
字符怪 被炸后掉落一个字符,每 15 秒在地图空白点中随机新增两个
普通怪 每 15 秒在地图新增 1 个,碰撞可以杀死玩家,获取字符后可变成字符怪
墙
普通墙 可以炸碎
硬墙 不能炸碎
移动墙 可以移动,用来格挡怪物或者挡住敌方玩家
时间墙 倒计时,玩家被怪物碰撞后回到出生点位
道具雷长度增强 获取后爆炸增强
玩家 玩家分为两队,可以通过埋雷消灭字符怪、拾取字符。玩家死亡会掉落一个字符,且回到出生点位,限制 5 秒后
渲染方式
游戏提供两种展示方式,可按喜好切换
中文字符【默认】
ascii 模式
技术架构
该插件主要分为服务端和客户端两部分。游戏主逻辑在服务端中运行,定时将当前游戏数据发送给客户端渲染。服务端: 寄生于 vscode 中,通过 webscoket 与客户端做数据交互。也可以单独做成 node 服务部署。客户端: 客户端通过 vscode 的 webview 加载本地 html 的方式运行,通过 canvas 的一些简单的 api 渲染没有依赖任何引擎,服务端+客户端+赞赏码图片整个插件打包只有 900 多 k。
TODO 目前梳理的一些待完善的点,后续有时间再加,或者有人感兴趣的话把代码丢出来一起维护
地图编辑功能 没有地图编辑功能,只有一张固定的图,比较枯燥。直接通过数组修改地图效率也较低
AI 模式 目前脚本 1 秒钟调用一次,对单次行为调用没有做限制
游戏道具完善 道具过于单一,目前只有一个增强雷的长度的道具
游戏渲染优化 比如玩家或者怪物死掉后,无交换只有位置变化,比较生硬
断线重连 目前没有做断线重连,一方关闭后无法再次进入
服务端客户端数据交互方式优化
发散
vscode 完全可以作为一个休闲娱乐的平台来使用,比如一些棋牌,益智的小游戏完全可以移植到其中。有兴趣的小伙伴,可以试试整合比如五子棋、象棋、地主+局域网联机,可以将工作中一些碎片化时间与同事增进交流,一起放松身心,延长职业生涯。
反馈
如果发现了任何的 bug 或者有任何建议, 请提交 issues to 到 GitHub Repo github.com/gamedilong/…. 或者可以直接邮件到 1104238614@qq.com。
版权声明: 本文为 InfoQ 作者【gamedilong】的原创文章。
原文链接:【http://xie.infoq.cn/article/9be256bd1ae03219ee9b73cc5】。文章转载请联系作者。
评论