html5实现一个简单的多人飞机游戏实例详解

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);        }    }}

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是更新还是新增.          }      }   }

// 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 timefunction 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);    }