Web扫雷开发小记(1)

目录
Web扫雷开发小记(2)
Web扫雷开发小记(3)
Web扫雷开发小记(4)

刚好今天做阿里前端笔试问到扫雷了，那就来蹭个热度哈哈哈（´∀｀*)
Github地址：点击我
在线试玩地址：点击我
新手小白想学习学习JS，写得不太精简，算个开发过程的记录吧，大神轻拍呀 ( >﹏<。)
欢迎来我的博客看更多，点我

（小小炫耀一下高级扫雷记录68秒（//▽//））

这里面使用到的技术有HTML5中的canvas绘制面板，原生JS进行交互操作。

Canvas绘制面板

首先就先不要想什么复杂的逻辑问题，先使用canvas画一个面板出来。
素材什么的也没去下，直接先使用颜色填充。
先分析一下，这里直接绘制一个高级扫雷的面板，一共480个格子，竖着30列，横着16行。于是创建一个600x320的面板，每个格子设定是20x20。
上个关键代码，两个for循环嵌套，生成480个格子。

maskContext.fillStyle = "black";
maskContext.strokeStyle = 'gray'
maskContext.lineWidth = 1; //边框宽度
for (let x = 0; x < 600; x = x + BLOCK_WIDTH) {
  for (let y = 0; y < 320; y = y + BLOCK_HEIGHT) {
    maskContext.fillRect(x, y, BLOCK_WIDTH, BLOCK_HEIGHT);
    maskContext.strokeRect(x, y, BLOCK_WIDTH, BLOCK_HEIGHT)
  }
}

看看截图：

扫雷面板

地雷随机分布

接下来，需要让这个480格子里随机分布99个雷。
每个格子，分别用一个x,y的索引来指代。例如第一排第一个就是{x:0,y:0}，从0开始，以此类推。
那么我可以使用JS生成99个随机对象，里面包含x和y的索引值。这里就要用到Math.random() 。最开始没想那么多，简单粗暴的x在0-29范围，y在0-15范围。然后push 到一个数组中去。
但是这里有个问题是，99个地雷的分布不能够重叠，而我这里随机生成的数组，并不能保证每一个索引都是不一样的。
那么，要怎么办呢？
最开始想到之前做过的数组去重，在push 操作之前，使用indexOf 去查找是否数组中存在同样的元素。但这样做的问题是，相当于每一次push 操作都要做一次for 循环去遍历元素，这样肯定十分耗时。
搜索了一下，发现另外一种方式：

1. 生成所有可能的x和y的二元组合数组positions（在这里总共是480个）；
2. 根据当前数组的长度，随机生成数组的索引值index；
3. 将得到的元素push到一个新数组中；
4. 使用positions.splice(index,1)删除该元素；
5. 从2开始重复，直到取到所有99个雷的坐标索引。
   源码：

//生成所有可能的坐标索引
for (let i = 0; i < 30; i++) {
  for (let j = 0; j < 16; j++) {
    positions.push({
                              x: i,
                              y: j
                            });
  }
}
//在所有可能的坐标中选出99个不重复的坐标
while (minepositions.length < 99) {
  let index = Math.floor(Math.random() * positions.length);
  let position = positions[index];
  minepositions.push(position);
  positions.splice(index, 1);
}

洗牌算法

最近刷面试题看到一个洗牌算法。顾名思义，就是使已有的数组乱序排列。与这里的情况其实有点类似，我们也需要在480个坐标里找出99个乱序的坐标。
上面用的splice，如果把splice的时间复杂度当做O(n)的话，上面的算法的复杂度就有O(n^2)了。
优化思路大致是这样，先从480个坐标中，随机选出一个来，然后这里就像抽出来一张牌，那我们再把最后那张牌放到被抽出这张牌的空位上，然后随机范围-1，就可以达到目的了。
代码如下，这样写出来的算法复杂度就只有O(n)了。

for (let i = 0; i < 30; i++) {
  for (let j = 0; j < 16; j++) {
    positions.push({
                              x: i,
                              y: j
                            });
  }
}
var length = positions.length;
while (minepositions.length < 99) {
  let index = Math.floor(Math.random() * length);
  let position = positions[index];
  minepositions.push(position);
  positions[index] = positions[length-1];
  length--;
}

地雷分布

创造遮罩层

但是扫雷当然不是把所有雷都展示给你看的，这里我们还需要添加一层canvas，遮盖在地雷层上，当用户点击时，使用clearRect() 方法，清除当前这个格子，显示出地雷层。
涉及到的问题就是如何获得当前用户点击的坐标，并把坐标转换为第几个格子的初始坐标。
首先是获得当前用户点击的坐标 的函数：

getEventPosition: function(ev) {
  var x, y;
  if (ev.layerX || ev.layerX == 0) {
    x = ev.layerX;
    y = ev.layerY;
  } else if (ev.offsetX || ev.offsetX == 0) { // Opera
    x = ev.offsetX;
    y = ev.offsetY;
  }
  return {
    x: x,
    y: y
  }
}

当获得当前坐标之后，再用对x和y除以当前每一个格子的宽度和高度，获得的结果向下取整，就获得了当前是第几列、第几行的格子的索引，然后再乘以一个格子的宽度和高度，即可获得当前点击的格子的起始横、纵坐标，再使用clearRect()方法。
源码：

var getPosition = this.getEventPosition;
maskCanvas.addEventListener("click", function(e) {
p = getPosition(e);
intX = Math.floor(p.x / BLOCK_WIDTH);
intY = Math.floor(p.y / BLOCK_HEIGHT);
maskContext.clearRect(intX * BLOCK_WIDTH, intY * BLOCK_HEIGHT, BLOCK_WIDTH - 1, BLOCK_HEIGHT - 1);
}, false);

至此，一个扫雷游戏初步的demo就完成了。

扫雷