js实现经典扫雷游戏

本文实例为大家分享了js实现经典扫雷游戏的具体代码，供大家参考，具体内容如下

项目结构

实现效果

思路流程

1、写出基本的布局
2、利用js生成扫雷的table表格
3、利用随机数来做地雷在表格中的索引
4、初始化table表格
5、根据地雷的坐标生成地雷周围的数字
6、点击事件分成鼠标左键点击和右键点击
7、左键点击情况下又分为点到的是地雷和非地雷两种情况
8、点到的是地雷情况下，则将全部地雷显示，其他样式不变，并且不能再进行任意表格内的点击事件（左键右键都不行）
9、点到的是非地雷情况下又分为点击的数字是0和非0两种情况
10、如果是非0，则只需要显示其数字
11、如果是0，利用递归思想，遍历周围的表格，若为0则继续递归显示0，直到遇到非0停止
12、接上面的6，若进行右键点击，则显示小红旗，并且剩余地雷数-1
13、当剩余雷数为0时，判断小红旗底下是否全为地雷，若全是地雷则成功扫雷，否则扫雷失败
14、为按钮添加功能，分别为9乘以9->10个雷、16乘以16->40个地雷、28乘以28、99个地雷，以及重新开始按钮

html源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css" rel="external nofollow" >
</head>

<body>
    <div class="footer">剩余雷数：<span class="mineNum"></span></div>
    <div class="gameBox">

    </div>
    <div class="header">
        <button class="active">初级</button>
        <button>中级</button>
        <button>高级</button>
        <button>重新开始</button>
    </div>
    <script src="./js/main.js"></script>
</body>
</html>

css样式表

* {
    padding: 0;
    margin: 0;
}

.header {
    margin: 10px auto auto auto;
    text-align: center;
}

.header button {
    padding: 5px 15px;
    background-color: #02a4ad;
    color: #fff;
    text-align: center;
    border: none;
    border-radius: 8px;
    outline: none;
    cursor: pointer;
}

.header button.active {
    background-color: #00abff;
}

.footer {
    margin: 100px auto auto auto;
    text-align: center;
}



table {
    margin: 10px auto auto auto;
    border-spacing: 1px;
    background: #929196;
}

td {
    padding: 0;
    width: 20px;
    height: 20px;
    border: 2px solid;
    background: #ccc;
    border-color: #fff #a1a1a1 #a1a1a1 #fff;
    text-align: center;
    line-height: 20px;
    font-weight: 700;
}

.mine {
    background: #d9d9d9 url(../images/mine01.jpg) no-repeat center;
    background-size: cover;
}

.flag {
    background: #fff url(../images/flag.jpeg) no-repeat center;
    background-size: cover;
}

.redMine {
    background: #fff url(../images/mine02.jpg) no-repeat center;
    background-size: cover;
}

td.zero{
 border-color: #d9d9d9;
 background: #d9d9d9;
}
td.one{
 border-color: #d9d9d9;
 background: #d9d9d9;
 color: #0332fe;
}
td.two{
 border-color: #d9d9d9;
 background: #d9d9d9;
 color: #019f02;
}
td.three{
 border-color: #d9d9d9;
 background: #d9d9d9;
 color: #ff2600;
}
td.four{
 border-color: #d9d9d9;
 background: #d9d9d9;
 color: #93208f;
}
td.five{
 border-color: #d9d9d9;
 background: #d9d9d9;
 color: #ff7f29;
}
td.six{
 border-color: #d9d9d9;
 background: #d9d9d9;
 color: #ff3fff;
}
td.seven{
 border-color: #d9d9d9;
 background: #d9d9d9;
 color: #3fffbf;
}
td.eight{
 border-color: #d9d9d9;
 background: #d9d9d9;
 color: #22ee0f;
}

js源码

function Mine(tr, td, mineNum) {
    this.tr = tr;   // 行
    this.td = td;   // 列
    this.mineNum = mineNum; // 雷的数量
    this.squares = []; // 方格的对象数组
    this.tds = []; // 方格的DOM
    this.surplusMine = mineNum; // 剩余的雷数
    this.mainBox = document.querySelector('.gameBox'); // 获取游戏box元素
    //this.createDom();
}

/*生成随机数*/
Mine.prototype.randomNum = function () {
    var positionArray = new Array(this.tr * this.td);
    for (var i = 0; i < positionArray.length; i++) { // 利用索引来确定雷的位置
        positionArray[i] = i
    }
    // 数组乱序
    positionArray.sort(function () {
        return 0.5 - Math.random()
    });
    return positionArray.splice(0, this.mineNum); // 6