扫雷

在以前的win7系统中，自带的小游戏中，有一款游戏叫扫雷，效果如下图：

扫雷

html中的结构代码如下：

    请选择雷的数量
    10个雷
    40个雷
    99个雷

剩余雷数量：0

js逻辑代码中，预置两个工具函数：

// 设置样式的函数
function setStyle(ele, styleObj){
    for(var attr in styleObj){
        ele.style[attr] = styleObj[attr];
    }
}
// 获取随机数的函数
function getRandom(a,b=0){
    var max = a;
    var min = b;
    if(a

首先要根据选中的雷的数量，来创建小盒子：

// 获取标签
var mineSelect = document.querySelector('[name="mineNum"]');
var mineNumBox = document.querySelector('.mineNum');
// 获取扫雷游戏需要的列的数量
mineSelect.onchange = function(){
    // 获取当前选中的option的value
    var value = this.value;
    if(value === '0'){
        alert("请选择雷的数量")
        return false;
    }
    // 从中获取到类的数量和扫雷需要的列的数量
    var mineNum = +value.split('-')[0]
    var col = +value.split('-')[1]
    // 如果页面中已经有扫雷游戏了，就将之前的删除
    var mine = document.querySelector('.mine');
    if(mine){
        document.body.removeChild(mine)
    }
    // 调用创建扫雷游戏的函数
    createMine(mineNum,col)
}
// 创建扫雷游戏的函数
function createMine(mineNum,col){
    // 根据列的数量创建大盒子
    var box = document.createElement('div')
    // 设置类名
    box.className = 'mine';
    document.body.appendChild(box)
    // 不能选中box中的内容
    box.onselectstart = function(){
        return false
    }
    // 设置样式
    setStyle(box,{
        border:"3px solid #00f",
        position:"relative",
        width:col*20 + 'px',
        height:col*20 + 'px',
    })
    // 在大盒子中创建小盒子
    for(var i=0;i

设置雷的函数如下：

// 设置随机雷的函数
function setMine(ele,num,col){
    // 在ele中创建num个雷
    // 定义数组用来存放是雷的小div的下标
    var indexArr = []
    for(var i=0;i

根据设置好的雷，给每个小div计算周围雷的数量：

// 计算雷数量的函数
function countMine(ele,col){
    // 遍历每个小div，计算周围雷的数量
    for(var i=0;i

其中获取周围div的下标数组的代码如下：

// 获取每个div周围的div下标的数组
function getIndexArr(index,col){
    // 定义周围的div下标的数组
    var arr = [1,-1,col,-col,col+1,col-1,-col-1,-col+1];
    if(index

再下来就可以开始玩游戏了，开始扫雷的代码如下：

// 点击小div开始扫的函数
function clearance(ele,col,indexArr){
    // 遍历所有小div绑定事件
    for(let i=0;i

打开当前div的函数如下：

// 打开当前小div，设置不同的背景颜色，并判断是否需要递归打开
function openNow(nowEle,i,col,ele){
    // 给已经打开的div做标记
    nowEle.open = true;
    // 设置打开的div的背景颜色
    nowEle.style.backgroundColor = '#eee';
    // 如果数量是0就继续打开
    if(nowEle.num === 0){
        // 继续打开周围的div
        open(ele,i,col)
    }else{
        // 如果数量不是0就显示数量
        nowEle.innerText = nowEle.num;
        nowEle.style.textAlign = 'center'
        nowEle.style.lineHeight = '20px'
        nowEle.style.fontSize = '12px'
        nowEle.style.color = '#666'
    }
}

如果当前div周围雷的数量为0，就将周围的div也打开，需要递归，函数如下：

// 继续打开周围div的函数
function open(ele,index,col){
    // 遍历周围的div - 如果雷的数量不是0，就显示数量，如果雷的数量是雷就继续递归打开
    var arr = getIndexArr(index,col);
    // 遍历数组，判断周围div是否打开
    for(var i=0;i