填坑记录——扫雷游戏的重置
简介
自从CSS和html更熟练后，发觉之前的扫雷游戏太难看了，而且结构也不好。就重置了一下，还是能遇见一些问题。这些问题很常见，但非常有启示意义。整个游戏完全自研，所以还是有很大的思考空间的。github: https://github.com/a132980awp/mine_game （可以下下来看看）
首先，视觉效果好了不知道到多少倍，为自己的样式能力提升感到快乐！~
一些逻辑的剖析与优化
别看扫雷简单，有些逻辑挺考考验技巧的：
生成雷池
怎么生成雷池？当然是随机抽取啦，由于只有100个空格，所以用洗牌函数就很合适，先在100的数组里生成10个雷，然后洗乱即可。注意，别用网上一些不靠谱的算法，比如用到random()-0.5的那种，洗出来不是完全随机的。
雷池数字生成
一般思路：每个方格探索周遭8个格子，根据雷的数量标记数字。
（扫描100个格子）
这个思路很好想，但是不好操作，麻烦又不优秀。
高级思路：每颗雷探索周遭8个格子，给所有的格子上的数字+1。
（扫描10个雷的位置）
这两思路一比较，高下立判，后者复杂度低了10倍不止，只要遍历雷就行了。
而且为了简化后者操作，我们完全可以不用判断周遭的格子是不是雷的情况，是雷也照样+1，不用特判，做到这一点很简单，我们把雷的标识用一个大数表示即可，这样就算+1了，雷和非雷也一样能分出来，就像下面：
这个思路是不是很nice！
点击0扩散
点到没有雷的地方，首先，这个0是不要显示的（hidden就行），然后使用递归点击周围的8个格子，这样就能做到扫雷的点击到0会扩散的效果，注意不要陷入死循环。
一些常见的Vue报错
- return () => {}
作为data，大家都知道要用闭包，但是作为props，默认值也要用闭包。
- splice
老生常谈，作为mvvm框架，vue是双向绑定，但是监听不到一些数组内部的非空间变化，所以我们要用splice产生这种变化。
- 兄弟组件传值
这个大家应该用得少，用事件车可以做到，但是不建议用，耦合性大
- Error in v-on handler: “RangeError: Maximum call stack size exceeded”
这个自然就是你死循环了，赶紧看看是不是我上面说到的嵌套递归死循环
项目缺陷
显然，没有用vuex，我这个玩意组件间耦合性太大了，各种父传子，子传父，还用到了不少ref，所以很明显是不合适的。但是专门搞个vuex我又觉得小题大做。。。