决战摸鱼之巅:将vscode撸成可局域网联机对战的moba平台

一年多前撸过1个小霸王插件，不过由于是单机版无法联机，交互性不够。刚好最近看到qq堂下线的新闻，为了弥补之前的遗憾，利用假期时间参考这种类炸弹人模式开发了一个可以局域网联机对战的moba游戏，给大家工作之余提供一个能够和小伙伴一起愉悦身心的工具，间接提升大家使用vscode的开发效率。

主要目的 使vscode放松身心、提升效率、增强算法水平的能力进一步增强

安装

在vscode 插件市场搜索alphabe-war点击安装即可

启动

安装成功后点击左侧G图标,进入游戏列表界面

该界面有栏构成

1. ROOM LIST 为房间界面展示当前局域网中正在等待开始的游戏,鼠标hover到该栏有 + 按钮创建游戏。第一次创建需要先输入玩家名称
2. AI SCRIPT LIST 为操作脚本界面，可以自由编辑脚本控制玩家行为

创建游戏

在ROOM LIST点击 + 创建后，进入房间界面

• 玩家进入且全部为准备状态，房主点击开始游戏启动(游戏界面图下面附有一张动态的gif,可以稍等加载看动态效果)
  

操作方式

1. 手动模式 该模式通过上、下、左、右控制方向，空格控制埋雷;
2. 脚本模式 通过编写js脚本控制玩家进行游戏。目前提供了当前游戏所有存在对象的当前状态和5种行为操作玩家游戏

游戏目标

两方队伍通过消灭字符怪或者对方获取字符，率先抢到HELLO WORLD 所有字符的一方获胜，游戏右侧为当前状态栏。分别展示 Team1和Team2的目标字符，和玩家当前获取的字符。

游戏对象

1. 字符怪 被炸后掉落一个字符,每15秒在地图空白点中随机新增两个
2. 普通怪 每15秒在地图新增1个，碰撞可以杀死玩家，获取字符后可变成字符怪

3. 墙

   • 普通墙 可以炸碎
   • 硬墙 不能炸碎
   • 移动墙 可以移动，用来格挡怪物或者挡住敌方玩家
   • 时间墙 倒计时，玩家被怪物碰撞后回到出生点位
4. 道具
   雷长度增强 获取后爆炸增强
5. 玩家 玩家分为两队，可以通过埋雷消灭字符怪、拾取字符。玩家死亡会掉落一个字符，且回到出生点位，限制5秒后

渲染方式

游戏提供两种展示方式,可按喜好切换

1. 中文字符【默认】
2. ascii模式

技术架构

该插件主要分为服务端和客户端两部分。游戏主逻辑在服务端中运行，定时将当前游戏数据发送给客户端渲染。
服务端: 寄生于vscode中，通过webscoket与客户端做数据交互。也可以单独做成node服务部署。
客户端: 客户端通过vscode的webview加载本地html的方式运行，通过canvas的一些简单的api渲染没有依赖任何引擎，服务端+客户端+赞赏码图片整个插件打包只有900多k。

TODO 目前梳理的一些待完善的点，后续有时间再加，或者有人感兴趣的话把代码丢出来一起维护

1. 地图编辑功能 没有地图编辑功能，只有一张固定的图，比较枯燥。直接通过数组修改地图效率也较低
2. AI模式 目前脚本1秒钟调用一次，对单次行为调用没有做限制
3. 游戏道具完善 道具过于单一，目前只有一个增强雷的长度的道具
4. 游戏渲染优化 比如玩家或者怪物死掉后，无交换只有位置变化，比较生硬
5. 断线重连 目前没有做断线重连，一方关闭后无法再次进入
6. 服务端客户端数据交互方式优化

发散

vscode 完全可以作为一个休闲娱乐的平台来使用，比如一些棋牌，益智的小游戏完全可以移植到其中。有兴趣的小伙伴，可以试试整合比如五子棋、象棋、地主+局域网联机，可以将工作中一些碎片化时间与同事增进交流，一起放松身心，延长职业生涯。

反馈

如果发现了任何的bug或者有任何建议, 请提交 issues to 到GitHub Repo https://github.com/gamedilong/alphabet-war. 或者可以直接邮件到 [email protected]