填坑记录——扫雷游戏的重置

简介

自从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报错

1. return () => {}

作为data，大家都知道要用闭包，但是作为props，默认值也要用闭包。

2. splice

老生常谈，作为mvvm框架，vue是双向绑定，但是监听不到一些数组内部的非空间变化，所以我们要用splice产生这种变化。

3. 兄弟组件传值

这个大家应该用得少，用事件车可以做到，但是不建议用，耦合性大

4. Error in v-on handler: “RangeError: Maximum call stack size exceeded”

这个自然就是你死循环了，赶紧看看是不是我上面说到的嵌套递归死循环

项目缺陷

显然，没有用vuex，我这个玩意组件间耦合性太大了，各种父传子，子传父，还用到了不少ref，所以很明显是不合适的。但是专门搞个vuex我又觉得小题大做。。。