Jqmap2
Jqmap2 copied to clipboard
Map plugins and demo, Cloud layer, Scene Animation ,Map Label engines -->
- [ ] wrap this multi-client game with React PWA. - [ ] upgrade ws to wss to cohere with front-end https. - [x] fix robot generate error.
## 前言 一年多前见过一个多人聊天室应用,是张丹老师写的一个 [socket.io 教程](http://blog.csdn.net/comhaqs/article/details/23824005) (原链接点不开,贴一个转帖的),觉得socket这个东西很神奇。后来研究生期间的一个项目也用到了.Net的socket,多个客户端之间的通信, 觉得很有意思,也是那一次比较全面地认识和应用了事件委托等等一些概念。最近受群里研究mapbox的热情和@扯淡大叔, @老羽 @F3earth 所有成员的帮助和启发, 突发奇想花了点时间基于**mapbox gl js**和**socket.io**做了一个 [飞机大战游戏!](http://111.231.11.20/flight.html),虽然功能界面很简陋。而且代码也比较原始,还没有好好重构。但是基本有了个架子,简单记下来分析下。如果对源码感兴趣或者想参与开发和优化工作,请访问git仓库: [Jqmap2](https://github.com/alex2wong/Jqmap2) ### 整体架构 简单来说,整个游戏的设计思路就是: - **服务器**从启动开始就监听任何客户端发来了websocket 连接请求,有了连接(connection事件)后,就把客户端初次发来的用户名称、当前飞机的坐标、朝向作为一个client 加入客户端数据池(目前简单处理为clients数组)中。那么至此一个客户端的数据就同步到了服务器端。 - 以后这个客户端的飞机坐标、朝向等信息也定时发送(socket.send)给服务器端,以便于服务器端同时**广播**(broadcast)给所有其他客户端。那么其实服务端就说清楚了,也就是负责中转消息,目的还是让所有客户端视野中的玩家飞机状态保持一致。 - 既然websocket是双向通信,**客户端**也需要定时发送消息给服务器端,并且更重要的是处理服务器端发来的各种消息(message事件),分辨哪些是欢迎用户上线的消息,普通的玩家位置同步消息,抑或是 A 击败了 B 这样的消息。...