web(html+css+js)扫雷-1

棋盘动态生成与布雷

记录自己从零开始写扫雷游戏的一些过程，最终想要呈现的效果。

棋盘动态生成

接收input框数据

在最初想要复刻这个游戏时，我打算加入可以自定义游戏map的大小和以及地雷数量这么一个功能，所以用div写了一个菜单界面。

最初的设想中，此处是用form表单写的，方便向后端提交输入框中的数据，后面发觉可以直接使用js获取到value值，便改变了写法（当然也是自己还不太会写后端）

function get_input_value() {
    // 获取input输入值
    var mine_f = document.getElementById("mine-f").value;
    var mine_n = document.getElementById("mine-n").value;
    // console.log(mine_f, mine_n)
    var array = [mine_f, mine_n];
    // console.log(array)
    return array
}

点击按钮以后，要将表单隐藏，这里使用display:none;

// 绑定点击事件，输入完成后，将div隐藏
var level = document.querySelector("#level")
// console.log(level.style)
level.onclick = function (e) {
    var e = e || window.event; //浏览器兼容性 
    var elem = e.target || e.srcElement;
    // console.log(elem.id)
    if (elem.id && elem.id == 'submint') {
        this.style.display = "none";
        createTable(infoAry[0], infoAry[0])
    }
}

动态生成棋盘

动态生成棋盘的关键之处在于使用document.createElement在页面中创建出tr,td元素，再根据提前写好的css样式进行渲染便可以实现在页面中动态生成棋盘。
js代码段

//创建表格函数
function createTable(rowCount, colCount) {
    var table = document.getElementById("field");
    empty(table);			//每次创建都要先清空表格
    for (var i = 0; i < rowCount; i++) {
        var tr = document.createElement('tr');
        for (var j = 0; j < colCount; j++) {
            var td = document.createElement('td');
            // console.log(td);
            td.id = 'm_' + i + '_' + j;     //绑定一个id
            tr.appendChild(td);    
        }
        table.appendChild(tr);
    }
};

css代码段

#field td{
    width: 32px;
    height:32px;
    border:2px outset #ADA6A6;
    text-align:center;
    cursor:pointer;
    font-size: 25px;
    line-height: 32px;
}

布雷

在布雷时，我一直纠结怎么去生成定量的地雷并且埋入相应的位置。最后，我采取了一种比较笨的方法，首先利用js获取到的value，创建一个一维数组，并将值全部赋0，然后利用随机数(Math.floor(Math.random()*tableAry.length)+1)生成整数，最终将对应下标的值改为9.

for(let j = 0 ;j < 10 ; j++ ){
        var random = Math.floor(Math.random()*tableAry.length)+1
        tableAry[random] = 9
    }

虽然这个方法，让我能够轻松的获得布雷点，但是不能很方便的在生成表格的同时将地雷写入，所以，我又将一维数组进行了二维化。得到二维数组以后便是在创建表格函数中使用innerHtml将内容写入

td.innerHTML = shuffle(i,j)
            if(shuffle(i,j) === 9){
                td.classList.add('landMine')    
            }
            else{
                td.classList.add('normal')
            }

这里使用td.classList.add为td增加新的类名landMine和normal，因为我提前写好了有地雷表格和没有地雷表格的样式，增加类名以后便可以实现动态渲染的效果。
css代码片段

/*  为雷区  */
.landMine{
    background-image:url('./img/boom.png');
    background-position:center;
    background-repeat:no-repeat;
}

/*  不是雷区，普通区  */
.normal{
    border:2px solid #EEE;
    background-color:#AAA;
}

效果