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

整体架构

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

服务器从启动开始就监听任何客户端发来了websocket 连接请求，有了连接（connection事件）后，就把客户端初次发来的用户名称、当前飞机的坐标、朝向作为一个client 加入客户端数据池（目前简单处理为clients数组）中。那么至此一个客户端的数据就同步到了服务器端。

以后这个客户端的飞机坐标、朝向等信息也定时发送（socket.send）给服务器端，以便于服务器端同时广播（broadcast）给所有其他客户端。那么其实服务端就说清楚了，也就是负责中转消息，目的还是让所有客户端视野中的玩家飞机状态保持一致。

既然websocket是双向通信，客户端也需要定时发送消息给服务器端，并且更重要的是处理服务器端发来的各种消息（message事件），分辨哪些是欢迎用户上线的消息，普通的玩家位置同步消息，抑或是 A 击败了 B 这样的消息。

这一过程中前端和服务器保持着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是更新还是新增. }

其他问题包括：

飞机的数据涉及到随时变更上传服务器，以及渲染两个用处。渲染采用geojson对象 作为 mapbox api中source 的data，那么是否是一接到服务器端消息就去重绘所有飞机位置呢。这边通过setInterval 定时调用source 的 setData()方法，实现重绘。

飞机子弹的轨迹计算，涉及到用户按下空格键的瞬间飞机的位置和朝向，根据设定的子弹飞行时间做一个动画显示

子弹和敌机的碰撞检测，简化处理：设定一个常数作为飞机体积，在子弹飞行过程中实时计算子弹和敌机距离。在地图处于小比例尺下增大检测半径，地图处于大比例尺下相应减小检测半径。

目前可能子弹飞行过程中碰撞检测的计算量偏大，会有卡顿问题，CPU占用较高，整个应用消耗内存100~130Mb左右... 好多小问题不说了。。确实废了一些脑子。

挑一两点分析下，一个是子弹的飞行过程，一个是Robot敌机的随机行为控制

// setPostion is to update Mydrone position.function setPosition() { // direction in Rad. Generally, 1 Rad stands for 100km var html' target='_blank'>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); }

到这里其实基本介绍了这个游戏的制作过程，经历了一些不成熟的想法，总共花了近十个小时完成目前的开发。还没有严谨地考虑过代码结构和 函数复杂程序，特别是子弹飞行和碰撞等部分，碰撞到后就终结子弹飞行等等。各位如果感兴趣，愿意完成 To DO list中的事情或者有何建议，请访问git仓库: Jqmap2 。请各位大神多提修改意见！

喜欢的同学请关注、收藏相关专题，会不断更新文章。希望和大家分享！！

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 免费h5在线视频教程

3. VeVb.com原创html5视频教程

以上就是html5实现一个简单的多人飞机游戏实例详解的详细内容，其它编程语言

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。