坦克大战：第一回
本文简单介绍一个小游戏：坦克大战，基于paperjs开发
满满的压迫感。
目前该版本的基本功能：
按键控制坦克的移动，鼠标左键射击。
随机生成的NPC（enemy），自动定位player的位置，无限逼近。
炮塔能够随着鼠标方向转动。
地图边界限制，player不会越界。
效果如下：
初始化我们的坦克initRole() {
const position = new paper.Point(this.WIDTH / 2, this.HEIGHT / 2)
const end = new paper.Point(position.x, position.y - 50)
const direction = end.subtract(position)
this.tank = new Tank(position, 'white', direction)
},
Tank类的入参有三个，分别是随机位置，坦克颜色，以及当前随即方向。坦克类完整代码如下：
/*
* @Author: Hhvcg
* @Date: 2023-03-01 14 ...
性能的考量：NMS过滤算法
本文将详细的介绍一个算法思路NMS。详细的业务场景：
我们需要把后端返回的点数据，画到canvas中的大圆上。数据量较少的情况下比如几千个，那完全不需要用算法去做筛减。但是设想一下。后端返回了数万甚至是百万级别的点数据如何？在之前介绍浏览器图形化编程极限的时候，我们详细测试过，目下的谷歌浏览器，10000个图形绘制几近极限（注意,是需要支持拖拽缩放等操作时页面流畅的最大图形个数）。这个时候，我们就需要对点数据作筛减。
理由： 没必要显示那么多，同时目下浏览器也扛不住。
具体实现：
我们会给画布上图形个数，设定一个阈值K。将wh区域划分成一个个格子区域。为了最终限制在500，即wh / 500 = T，每个区域面积T中，最多输出1个。即可保证总输出的个数<= 500。
根据宽高数值，将画布按照一定的尺寸网格化，最后输出一个grid三维数组。分别表示行、列及各自一块区域内的所有缺陷得集合数组。
业务场景代码举例：
console.log('过滤前>>>', defects)
console.log('viewRange>>>', viewRange)
c ...
网络协议相关
UDP与TCP的区别到底是啥？说人话
二者都是传输层的协议，但是，后者提供的是面向连接的、可靠的传输服务。而前者提供的，是不可靠的服务。
为什么？
传输过程中出现丢包，UDP不负责重发
包的到达顺序出现乱序，没有纠错功能。
收到包原样发出去，即使网络拥堵也这德行。所以不支持流量控制。
双人打僵尸系列：第一回
本文开始，我们将尝试借助paperjs的能力，尽可能完善的写一个童年小游戏： “双人打僵尸”该游戏的名字听起来有点low，且功能不算复杂，但确实是我印象最为深刻的一款游戏，操作简单，很耐玩。归纳一下我们的需求：
按键控制角色移动。
角色可以切换枪械武器进行射击，枪械不同，打出的子弹及对应的伤害也不尽相同。
游戏为关卡制度，随着关卡级别越高，怪物的数量也会越多，同时还会出现血量值更高的boss怪。
怪物只能从地图的上下两个口出来，随机涌现普通怪及boss怪。
玩家能够放置油桶或者白块充当阻碍。其中油桶受到攻击会爆炸，白块会被损毁。
前端依赖包的种种往事
本文简单聊聊前端依赖管理器npm的大致逻辑npm基本上是目下的前端项目管理依赖的默认工具。一般项目工程中所涉及到的所有依赖包，均会记录在package.json文件中。去到公司，初次down下来的项目，需要我们通过命令npm install来安装所有依赖。那么承担依赖管理器的npm，具体是如何管理的呢？同时他跟其他的比如cnpm、yarn有什么区别呢？
一. 版本规则一般在package.json文件中，依赖的信息格式如下:
"dependencies": {
"antd": "3.1.2",
"react": "~16.0.1",
"redux": "^3.7.2",
"lodash": "*"
}
版本格式为：主版本号.次版本号.修订号版本号的递增规则如下：
主版本号：当你做了不兼容的 API 修改。大改，更新需谨慎。
次版本号：当你做了向下兼容的功能性新增。加功能的小改, 如antd新增了某些组件
修订号：当你做了向下兼容的问题修正。修复问题的版本
除了指定明确的版本号，也可以指定一个范围。
~：只升级修订号
^：升级 ...
屏幕刷新率的种种
本文简单聊聊显示器成像相关的点组内技术分享canvas的内容时，涉及到了屏幕刷新率的问题，感觉讲的还不是很全面，借此篇文章，好好总结一下。
古人云：耳听为虚，眼见为实。但这一套，显然已经不适用于当代, 因为眼见不一定为实。作为新时代的农民工，每天基本是对着两块显示屏度过的。在我们人眼看来，显示屏的画面就是静止的，但事实，并非如此。我们以为静止的显示器，实际上正以每秒至少60次的频率不断刷新着页面。学过图像的都知道，每秒24张图片的频率展示画面的时候，在人眼看来，就是连续着的动画。
每秒24张图片就是24HZ，当下的主流浏览器的屏幕刷新率都是60或者75hz。即：每秒钟切换了60次或者75次。基本就是16.6ms一帧的速度。在最近发布的iphone13系列的手机中，pro和promax版本最高能达到120hz的屏刷。自己稍微查了一下，公司的27英寸的三星显示器是主流的60hz，一般般。家里的34英寸的带鱼屏，屏刷高了一个档次，100hz。自己手头的那台macbook2019款，屏刷60hz。而自己一直心心念念的外星人显示器，没看错的话，全系列240起步。依稀记得之前某位大佬晒出的外星人显 ...
CSS系列：BFC
本文简单聊聊BFC(块级格式化上下文)1. 啥叫块级格式化上下文？具体指代的就是一个容器（如div等），这种容器具备的特性：
内部元素的任何样式改动，都不会影响到容器外的元素。
内部的浮动元素的高度也会计算在内
margin重叠
2. 触发场景
html根元素。毕竟他外头啥都没有。
浮动元素
overflow不为visible
position为absolute或者fixed
3. 应用场景
防止margin重叠。同一个BFC的元素标签内会出现margin重叠。因此BFC隔离开即可解决。
高度包含浮动元素。
不与浮动元素重叠
前端权限控制
管理系统之类的前端项目，权限控制几乎是标配，本文将以vue为例，稍微整理一下套路
路由权限： 用户登录后只能看到自己有权访问的菜单，也只能访问自己有权访问的路由地址，否则4xx初次加载只挂载无需权限的路由， 登陆后再挂载剩余的路由。
视图权限: 用户只能看到自己有权浏览的内容和有权操作的控件菜单与路由分开，由后端返回
接口权限: 路有可能配置失误，按钮可能忘加了权限，此时请求控制用来兜底，越权行为将在前端被拦截。一般使用JWT的方式验证，后端不通过直接401跳转登录。通过会返回token。前端拿到token后存储。之后的每一个请求都带上这个token即可。
React系列: 第一回(基础干货)
自本文开始，我们将逐步介绍react的必要概念，以备忘录。
react带来了利？
声明式编码，一种编程范式，关注的是你要做什么，而不是如何做。
react-native中，使用js开发移动端应用
虚拟dom+优秀的diff算法，尽量减少与真实dom的交互
组件化开发。基本标准：可组合、可维护、可复用
基础概念React仅仅是一个UI库。官方对React的定义为：
用于构建用户界面的 JavaScript 库。其根基思想就是 数据驱动视图
整体逻辑如下：
jsx语法JavaScript 中夹杂着 HTML 的语句在其中,称之为jsx语法，它是对 JavaScript 语法的扩展，本质是React.createElement的语法糖。其中的React.createElement做的事情很清晰，他有三个参数type、config和children。顾名思义，分别代表节点类型如div、节点所有属性如className和节点的子节点。就是说以jsx文件代码为输入，编译生成虚拟dom，然后通过render方法生成真实的dom节点。
为了生成虚拟dom，两种写法
// ...