我正在参加掘金社区游戏创意投稿大赛团队赛，详情请看：游戏创意投稿大赛”
体验方式 小程序搜索 九霄雷霆之扫雷， 仓库地址
念起
扫雷原本是为了熟练鼠标左右键。 做成小程序就只有长按短按了。
核心玩法
点击当前区域，显示周围连通的无雷区域，以及3X3 区域，雷的数目，这不是可以用上并查集呢？
个人想法是，扫雷的失败的处理。这个是重点，想来个盛大的欢送仪式。结果还冇实现 。
开始
虽然扫雷游戏不会渲染太多元素，但是我认为还是用canvas比较好。 我就想到了pixi这个库，然后搜索了一番，发现和小程序，不太搭。算了，看看uniapp的插件市场。 好家伙，真的有。
解决了一点小问题之后，成功使用了这个插件。小问题就是插件编译后，插件目录的图片没了，看来图片只能放在static里了。
接下来就是改造这个组件了。
难度设置
这个不用改组件就能实现。 按原有组件最多也就是12 X12。 60upx。
不过这个界面真的，难到我了，因为没有UI，算了，随便写，顺便练习一下repeat-linear-gradient 。
我才发现之前的理解有误， 首先它是一个渐变， 然后它使用这个渐变填充取填充背景，也就是纹理复制。 角度可以控制方向。 因此，前面渐变的节点的最大值就决定了这个纹理单元的大小。
@keyframes wave{
from{background-position: 0 0;}
to{background-position: 0 100vh;}
}
background:repeating-linear-gradient(32deg,#a27943a0 , #a27943 1px, #8a5c2b ,#a47b47 19px ,#a47b47a0 23px);
animation: wave 50s 0s infinite linear;
- 再来一局
暂且就直接，按照当前难度再来一局，就是重绘地图 ，简单一点用v-if实现。还是直接把这个放在了组件内部
下面就是音效和动效了。
添加音效
控制背景音乐的播放与暂停
要是h5我就直接 new Audio()。 但是现在是 uniapp ，经过一番搜索，它也有类似的api uni.createInnerAudioContext()， uniapp.dcloud.io/api/media/a…
弄了半天没声音，结果还真是，url必须是网络链接 , 于是弄到云上，搞定。正好也减轻包的大小，一个两秒的音频就有20k,还是蛮大的。
第二个问题， 就是音频播放之后，自动无限循环了。原来并不是，是我搞错文件了。
音乐开关
需要一个音乐控制按钮， 背景音乐做的不好，确实挺烦人的， muted属性似乎有点问题，改用音量volume 控制 。 并且需要在切换页面时自动开启关闭.
页面后退时关掉音乐
onhide事件没能实现效果， 并且来回切换页面导致 ，音频重叠 。 onunload beforeUnmount 都没起作用 。 并且切换回来已经不是原来的audio了，不然静音不至于没有效果。
经过一番查找，onhide 钩子已经废了，需要onUnload。
组件对生命周期无感， 最后在页面代码，onunload钩子里使用ref调用组件。
还没开始就结束了
搞好之后发现了一个小问题。那就是，有可能，刚开始就踩到雷了。
而这个时候， 我的开场音乐还没结束，背景音乐也就没有开始。 背景音乐没有开始，这个暂停已经过了，等后面背景音乐真正开始的时候，也就没有相应的停止了。
于是乎，我在踩雷那里又加上了，暂停背景音乐。
创意
就是背景音乐，倒计时。 来点滴答的倒计时，增加心理压力即可。 触雷之后，要释放这种压力。 还没完成
最后
在git上拉个代码真不容易
