![e10658235a085af50708cfeb18a2b4d6.png](https://img-blog.csdnimg.cn/img_convert/e10658235a085af50708cfeb18a2b4d6.png)
最近突然想做个扫雷玩,因为发现 heatmap 就可以做(最近和 heatmap 杠上了),于是尝试了下。思路如下:
- 用二维数组做地雷数据,数组下标对应地雷的位置坐标,用数组的值表示砖块的状态(是否有地雷,是否翻开,周围地雷数);
- 把地雷数据转换成 heatmap 数据;
- 用 heatmap 做扫雷游戏区(砖块),绘制图形;
- 鼠标左键点击翻开砖块,判断结果,更新图表(扫雷游戏区);
- 鼠标右键点击标记地雷/取消标记。
地雷数据实现
定义一个生成地雷数据的函数,根据 x、y 轴尺寸(每行、每列砖块数),以及地雷数量随机生成二维数组:
// 随机生成地雷数据的函数
- 根据输入参数 sizeX 和 sizeY ,生成一个砖块顺序号列表 numList,范围是 0 到 sizeX * sizeY - 1 ;
- 利用 Math.random() 和 Math.floor() 从砖块顺序号列表 numList 中随机抽取砖块,作为地雷的位置&