Build Multi-client drone game with @mapbox

GIS Socket

最早接触Mapbox还是在读研的时候，当时觉得底图好漂亮，能把地图设计做到如此精益求精，算是数一数二的企业。后来接触 mapbox gl js， 体验到了畅快的三维地图开发，想想自己这么爱玩游戏，干嘛不开发一款3D多人飞机大战呢？

那段时间碰巧在看webSocket，受群里研究mapbox的热情和@扯淡大叔， @老羽 以及@F3earth 所有成员的帮助和启发， 突发奇想花了点时间基于mapbox gl js和socket.io做了一个 飞机大战游戏，虽然功能界面很简陋。而且代码也比较原始，还没有好好重构。但是基本有了个架子，简单记下来作为参考。如果对源码感兴趣或者想参与开发和优化工作，请访问git仓库: Jqmap2，欢迎Star ☆.

整体架构

简单来说，整个游戏的设计思路就是：

• 服务器从启动开始就监听任何客户端发来了websocket 连接请求，有了连接（connection事件）后，就把客户端初次发来的用户名称、当前飞机的坐标、朝向作为一个client 加入客户端数据池（目前简单处理为clients数组）中。那么至此一个客户端的数据就同步到了服务器端。
• 以后这个客户端的飞机坐标、朝向等信息也定时发送（socket.send）给服务器端，以便于服务器端同时广播（broadcast）给所有其他客户端。那么其实服务端就说清楚了，也就是负责中转消息，目的还是让所有客户端视野中的玩家飞机状态保持一致。
• 既然websocket是双向通信，客户端也需要定时发送消息给服务器端，并且更重要的是处理服务器端发来的各种消息（message事件），分辨哪些是欢迎用户上线的消息，普通的玩家位置同步消息，抑或是 A 击败了 B 这样的消息。
• Socket过程还算简单，最关键的部分是借助Mapbox gl js 展现宏观的战场和各飞机的状态，以及用户可以通过键盘对自己的战机进行细微的操作。不得不说 Mapbox 的Webgl渲染和完备的API给3d 游戏开发带来的很大的便利^_^

这一过程中前端和服务器保持着websocket 连接，并且不断在通信。相比传统的轮询和long poll，这样更加节省流量和性能。
总体来说，游戏的逻辑是基于各种消息事件驱动的。connection事件产生一个socket连接，socket连接不断发送和接受各类message 等等，进而推动游戏的进度。

后端websocket

废话说了这么多，简单看看一些关键代码如何实现。

// 后端关键流程实现
var app = express(),
    server = require('http').createServer(app),
    io = require('socket.io').listen(server); // 引入socket.io 库
io.on('connection', function(socket) { // 开始监听客户端的websocket连接请求，connection事件产生 socket 对象
    socket.emit('open'); // 向该客户端发送open事件.
    // init client drone obj for each connection !!
    var client = {
        name: false,
        color: getColor(),
        direction: 0,
        coordinates: [0, 0]
    }
    // message from client.
    socket.on('message', function(msg) {
        if (!client.name && msg.name) { // 如果是第一次连接，把用户的名字存储起来，并且广播给所有客户端。
          var obj  = { }; // 构建发送给其他客户端的消息
          obj = msg;
          clients.push(client); // 加入后台维持的客户端数组
          socket.broadcast.emit('message', obj); // 广播欢迎语给其他客户端
        } else if ( client.name == msg.name ) { // 客户端发来的飞机状态消息
            // 广播给其他客户端
          socket.broadcast.emit('message', obj);
        }
    }
}

后台处理过程相对简单，基本只需接受某客户端发来的消息，转发给其他客户端即可( 随机敌机位置什么的就不讲了，当然后期要改成所有客户端共享一套敌机信息，这样就可以一起打同一个BOSS了)。但前端需要根据业务需求将服务器传来的消息分别处理

前端socket和关键问题处理

前端业务相对复杂， 除了应对websocket 消息之外，需要构建一套飞机的数据模型，包括位置，速度，朝向，血量，武器装备等（可以非常复杂，目前就简单处理）。

var socket;
try {
    socket = io.connect("http://123.206.201.245:3002");
    socket.on('open', function(){  // 当服务端确认连接后，开始发送第一次数据。
        statusBar.innerText = "已经连上服务器..";
        var askName = prompt("来，取个名字", "");
    }
    socket.on("message", function(json) { // 其实收到的是js 对象，这一点很牛逼。因为双向通信过程中传递的是 Binary 形式的数据，不需要再次解析了。
      if (json.type === "welcome" && json.text.name) {
          // .. 显示其他用户登录消息
      } else if (json.type === "defeat") {
          // .. 在前端的敌机数据模型中移除空血槽的飞机
      } else if (drone && json.text.name != drone.name) {
          // .. 传来的其他客户端飞机消息
          featureCol.features.forEach(function(drone) {
          // featureCol 是所有敌机数据集合，根据用户名check是更新还是新增.
          }
      }
   }

其他需要处理的关键问题包括：

• 飞机的状态数据需要定时上传服务器，同时借助VectorLayer 渲染在Map中。渲染过程采用geojson对象 作为飞机矢量图层 的数据源（source）。那么是否是一接到服务器端消息就去重绘所有飞机位置呢?
  并不是这样，为了性能不那么差，这边通过全局的一个定时器去统一调用source 的 setData()方法，实现飞机最新的状态重绘。
• 飞机子弹的轨迹计算，涉及到用户按下空格键的瞬间飞机的位置和朝向，根据设定的子弹飞行时间做一个动画显示
• 子弹和敌机的碰撞检测，简化处理：设定一个常数作为飞机体积，在子弹飞行过程中实时计算子弹和敌机实际地理距离，小于飞机体积，则判定为碰撞。
• 敌机自动跟随最近玩家的设定。这个奇怪的设定是后来加上去的，因为最开始的敌机我设定为攻击最近的飞机，不论是Robot还是玩家，并且敌机移动是随机方向的。后来为了玩家有种被追杀、热血沸腾的感觉，设定为了追击玩家。。

挑一两点比较有意思的分析下，第一点是Robot敌机的随机行为控制，第二点是子弹的飞行过程

// setPostion is to update Mydrone position.
function setPosition() {
    // direction in Rad. Generally, 1 Rad stands for 100km
    var current_rotate = map.getBearing(); 
    if (!manual && Math.random() > 0.95) { // 这边有意思，在每秒50帧的情况下，不是每一帧都会随机微调飞机的方向。而是5%的概率。
        direction += (Math.random() - 0.5) /5;
    }    
    // 根据飞机朝向和速度更新位置。
    point.coordinates[0] += speed * Math.sin(direction) / 100;
    point.coordinates[1] += speed * Math.cos(direction) / 100;
    // 校正飞机的朝向显示。因为默认情况下mapbox是根据你的视角随时调整图标方向。但实际上飞机图标的朝向必须和飞机运行方向一致，而不是简单的和标注一样。
    current_rotate = (-current_rotate) + direction * (180 / Math.PI);
}

以下是子弹飞行的计算过程.

// start: fire location, target: bullet destination, duration: total animation time
function renderBulvar(start, target, direction, duration) {
    // target is geojson POINT, add Temp point in layer.. 
    var interval = 20, ratio = interval/duration, real_point = start, range = 0.4, count = 0, hitted = false;
    if (target.coordinates) {
        var targetSource = map.getSource('drone-target');
        window.setInterval(function(){
            if (count > duration/interval) { // 到达终点，不计算了
            } else {
                // 子弹每一帧跑一定比例的路程，最终到达指定终点
                real_point.coordinates[0] += Math.sin(direction)*ratio*range;
                real_point.coordinates[1] += Math.cos(direction)*ratio*range;
                targetSource.setData(real_point);
                if (!hitted){
                    hitted = testCrash(real_point.coordinates); // 感觉这里的hitted 有问题.
                }
                count += 1;
            }
        }, interval);
    }

写在最后

后来为了完整性，给游戏陆续加上了 聊天系统、 飞机生命值、小地图 以及 敌机状态面板（鼠标悬停任意战机，查看当前状态）。

到这里其实基本介绍了这个游戏的制作过程，经历了一些不成熟的想法，总共花了十几个小时完成目前的开发。还没有严谨地考虑过代码结构和重构，有好些Bug 都在慢慢去修改。感兴趣的童鞋，想在线体验游戏或者有任何建议的，欢迎访问github项目地址: Jqmap2 。