今日分享开始啦，请大家多多指教~

今天给大家分享的是扫雷，这是系统自带的经典小游戏，以前上学那会上机的时候就经常玩这个，很喜欢，所以尝试一下。

效果图

实现思路

1.创建9行9列的二维数组。

2.设置雷：随机行数 i 和列数 j，根据随机到 i、j 从二维数组中取出对应的元素，将取到的元素设置一个属性type等于1，表示当前元素已经是雷，并且递增雷计数器，然后递归调用；如果取到的元素已经是雷了，则跳过继续执行，雷计数器达到设定的最大值就跳出递归。

3.计算每个元素周围的雷数量（周围指的是 左上、上、右上、右、右下、下、左下、左 这8个位置），当前位置显示对应的数字（待会内容里面细说）

4.同样根据这个二维数组来创建遮罩的小方块，正好盖住之前创建的图形。

5.点击这个遮罩的小方块则触发揭开，揭开后根据对应的数字或者雷做不同的操作。

代码实现

创建背景及相关元素

创建雷和显示对应的图片

1.随机row 和 col，并从二维数组中获取到这个对象；
2.判断他是否是雷，如果是则跳过当前；
3.如果当前不是雷，则标记当前对象为雷对象，并且更改图片；
4.递归，当达到设定的数量时跳出。

计算周围雷的数量并显示

1.循环之前定义的二维数组

2.如果当前元素的下标是（i，j），则左上为（i-1,j-1），上为（i-1,j )，右上为（i-1,j+1），以此类推，如下图所示：

3.分别取出这些元素，并判断他们是不是雷，如果是则计数累加，最后将计数对应到相应的图片，然后显示出来。

创建遮罩

创建计时和计数器

加入鼠标移动事件

加入鼠标点击事件

成功判定1

未打开的数量与雷的数量相同

成功判定2

标记为雷（插旗）的数量与类总数相同

触雷效果

鼠标点击雷后，会触发雷爆炸的一个动画，这是通过图片的切换来实现的

 

加入鼠标右键事件

此事件是做插旗或者标记为未知等操作的。

最后加入重新开始事件，胜利和失败图片显示就完成了。

小结

用canvas编写了这个小游戏，看着还行，不知道会不会有什么我没发现的bug，难度目前是设置成简易的，如果要改难度，代码稍做修改即可。

今日份分享已结束，请大家多多包涵和指点！

 

标签：遮罩,javascript,鼠标,创建,元素,大牛带,二维,数组,雷场
来源： https://www.cnblogs.com/pfx1995/p/14736740.html