alex2wong
alex2wong
- [ ] 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 这样的消息。...
When I was using typescript with ant-motion, I found `moment` set to `null` is unacceptable. since the typing as follow: ``` export interface IProps extends Omit { animation?: IAnimObject |...
### 拿到一张UV风速图 其实数据是来源于NOAA 的Grid 格点风力数据，分辨率是1度，全球共360*180 个格点 （总计64,800个）. 那么就我之前的了解，风力数据一般都是分为U/V 两个方向，包括NetCDF 数据也是，坐标信息是隐含在grid 的索引中，风力记录在了 U/ V 两个垂直的方向. 把水平U 方向的风力和 垂直V 方向的风力数值分别作为 RGB波段的 R，G 两个数值，合成一张png就如图所示。 由于我没有采用官网的数据下载API，所以没有拿到原始的json 数据，只拿到一张png，所以无法反演出 U/V 数值的符号，只有正值. 所以最后渲染出来只有第一象限的风向，当然作为演示应该没问题。  ``` 根据UV...
- [ ] write blog sharing async/await in scene animation control. - [x] build voxelized terrain using extrusion layer in Mapbox (inspired by Minecraft World) - [ ] refactor route...
前几天有很多人问到了如何绘制高德地图那样的**导航箭头线**效果，当时想了想并不难就先用canvas 做了，然后[集成到mapbox 上](https://alex2wong.github.io/mapbox-plugins/examples/line_style/)，迁移到其他map lib 也只需要应用相应的**地理转屏幕坐标**函数。 ### 线的绘制样式 在canvas 的应用中我们经常会遇到各种线样式的绘制，比如虚线，渐变线，带pattern 线（箭头，铁轨图标等），或者虚线与pattern 的动画效果。如下图所示，总结下实现方法。  ### 虚线样式 - 利用 CanvasRenderingContext2D.setLineDash 的方法设置虚线样式， 接受一个数组类型的参数([solid: number, empty:number]) ，表示实线虚线的像素比例. 比如 ctx.setLineDash([10, 5])，就可以画出上图的虚线效果。发挥想象可以做出更多奇特效果。比如让虚线动起来，有走马灯的感觉。。 ### 渐变线样式 通过 createLinearGradient 函数创建渐变，然后设定其渐变色段，...
In this AudioComponent functional component, audio element may not re-render even when sourceUrl changed, which make it a little bit confusing for React green-hands. It results in audio source is...
http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z} 和 https 都可用。 t0-t7 据说都可以，我记得之前是没有偏移的，很好用。