js版扫雷游戏

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

界面

考虑到简单，一般，困难三个扫雷区域的格子数都不同，所以界面上的扫雷区域是用js动态生成。
先搭好整体html框架：

<div class="container">
        <div class="level">
            <button class="select">简单</button>
            <button>一般</button>
            <button>困难</button>
            <button>重新开始</button>
        </div>
        <div class="mine">
            //扫雷区域
        </div>
        <div class="last">总共雷数 ： <span class="mineNum"></span></div>
</div>

首先写一个MineSweeper()构造方法：

function MineSweeper(tr, td, mineNum) {
    this.tr = tr; //行
    this.td = td; //列
    this.mineNum = mineNum; //雷数
    this.area = [];  //存取每个格子信息
    this.doms = [];  //存储格子DOM,用来动态创建DOM
    this.lastMineNum = mineNum; //剩余雷数

    this.parent = document.querySelector('.mine');
    this.num = document.querySelector('.last .mineNum');
}

扫雷区域用一个二维数组表示并存储：

/*
* 扫雷游戏区域area(二维数组)
* [
*      [type: mine/number, x1, y1],
*      [type: mine/number, x2, y2],
*       ... ,
*      [type: mine/number, xn, yn]
* ]
*/

其中type有两个值，mine表示当前格子是一个雷；number表示当前格子是一个数字。
在构造方法的原型上添加方法创建DOM表格，用来动态生成扫雷区域界面：

MineSweeper.prototype.create = function() {
    var _this = this;
    var table = document.createElement('table');
    for(var i = 0; i < this.tr; i++) {
        var trDom = document.createElement('tr');
        //创建行
        this.doms[i] = [];
        for(var j = 0; j < this.td; j++) {
            //创建列
            var tdDom = document.createElement('td');
            this.doms[i][j] = tdDom;
            trDom.appendChild(tdDom); //往行中添加列
        }
        table.appendChild(trDom);//往table中添加行
    }
    this.parent.appendChild(table); //将table添加到界面
};

JS

function MineSweeper(tr, td, mineNum) {
    this.tr = tr; //行
    this.td = td; //列
    this.mineNum = mineNum; 
    this.area = []; 
    this.doms = []; 
    this.lastMineNum = mineNum; 
    this.parent = document.querySelector('.mine');
    this.num = document.querySelector('.last .mineNum');
}
//初始化
MineSweeper.prototype.init = function() {
    var rn = this.randomNum(); //获得type: mine 的索引
    var n = 0; //记录格子索引
    for(var i = 0; i < this.tr; i++) {
        this.area[i] = [];
        for(var j = 0; j < this.td; j++) {
            n ++;
            if(rn.indexOf(n) !== -1) {
                this.area[i][j] = {
                    type: 'mine',
                    x: j,
                    y: i
                };
            } else {
                this.area[i][j] = {
                    type: 'number',
                    x: j,
                    y: i,
                    value: 0
                };
            }
        }
    }
    // console.log(this.area);
    this.num.innerHTML = this.mineNum; //初始化雷数
    this.parent.oncontextmenu = function() {
        return false; //阻止右击菜单事件
    }
    this.updateNumber();
    //创建表格
    this.parent.innerHTML = "";
    this.create();
}

//创建DOM表格
MineSweeper.prototype.create = function() {
    var _this = this;
    var table = document.createElement('table');
    for(var i = 0; i < this.tr; i++) {
        var trDom = document.createElement('tr');
        this.doms[i] = [];
        for(var j = 0; j < this.td; j++) {
            var tdDom = document.createElement('td');
            this.doms[i][j] = tdDom;
            trDom.appendChild(tdDom);

            tdDom.pos = [i, j];
            tdDom.onmousedown = function(event) {
                if(event.button === 0) {  //鼠标左键
                    var curArea = _this.area[this.pos[0]][this.pos[1]];
                    console.log(curArea)
                    if(curArea.type === 'mine') {
                        // console.log('踩到雷了！')
                        this.className = 'mine';
                        _this.gameOver(this);
                        
                    } else {
                        // console.log('is number')
                        if(!curArea.value) {  //踩到0，出现一大片
                            // console.log(0);
                            this.className = 'select'; //先显示自己
                            this.innerHTML = '';
                            
                            function getAllZero(area) {
                                var around = _this.mineAround(area); //找其周围的格子
                                for(var i = 0; i < around.length; i++) {
                                    var x = around[i][0]; //行
                                    var y = around[i][1]; //列
                                    _this.doms[x][y].className = 'select';
                                    if(!_this.area[x][y].value) {
                                        if(!_this.doms[x][y].isHas) {  
                                            _this.doms[x][y].isHas = true; //标记被找过的元素,避免格子重复重复被调用,导致内存资源被滥用
                                            arguments.callee(_this.area[x][y])
                                        }
                                    } else {
                                        _this.doms[x][y].innerHTML = _this.area[x][y].value;
                                    }
                                }
                            }
                            getAllZero(curArea);

                        } else {
                            this.className = 'select';
                            this.innerHTML = curArea.value;
                        }
                        
                    }
                
                } else if(event.button === 2) {  //鼠标右键
                    this.className = this.className == 'flag'? '':'flag';
                    //标记小旗子，则剩余雷数-1
                    if(this.className === 'flag') {
                        _this.num.innerHTML = --_this.lastMineNum;
                    } else {
                        _this.num.innerHTML = ++_this.lastMineNum;
                    }
                }
            }
        }
        table.appendChild(trDom);
    }
    this.parent.appendChild(table);
};

//生成指定数量的不重复的数字
MineSweeper.prototype.randomNum = function() {
    var mineArr = new Array(this.tr*this.td); //该数组用来存储所有格子下标
    for(var i = 0; i < mineArr.length; i++) {
        mineArr[i] = i;
    }

    mineArr.sort(function() {return 0.5 - Math.random()}); //将数组乱序排序
    return mineArr.slice(0, this.mineNum); //随机取得放置雷的下标
};

//找目标格子周围的格子, 雷周围的格子都需要number++
MineSweeper.prototype.mineAround = function(target) {
    var x = target.x;
    var y = target.y;
    var result = []; //二位数组,存储周围格子的坐标
    for(var i = x-1; i <= x+1; i++) {
        for(var j = y-1; j <= y+1; j++) {
            if(
                  i < 0 || j < 0 || i > this.td - 1 || j > this.tr - 1 ||  //排除四个角
                  (i == x && j == y) ||                            //排除周围是雷
                  this.area[j][i].type === 'mine'    
              ){
                continue;
            }
            result.push([j, i]);
        }
    }
    return result; 
};

//更新所有数字
MineSweeper.prototype.updateNumber = function() {
    for(var i = 0; i < this.tr; i++) {
        for(var j = 0; j < this.td; j++) {
            if(this.area[i][j].type == 'number') {
                continue;
            }
            var nums = this.mineAround(this.area[i][j]);  //获取雷周围的格子
            for(var k = 0; k < nums.length; k++) {
                //雷周围的格子的number都要+1
                this.area[nums[k][0]][nums[k][1]].value += 1;
            }
        }
    }
};

//gameOver
MineSweeper.prototype.gameOver = function(downMine) {
    for(var i = 0; i < this.tr; i++) {
        for(var j = 0; j < this.td; j++) {
            if(this.area[i][j].type === 'mine') {
                this.doms[i][j].className = 'mine';
            }
            this.doms[i][j].onmousedown = null;
        }
    }
    if(downMine) {
        downMine.style.backgroundColor = '#f40';
    }

}
function startGame() {
    var btn = document.querySelectorAll('.container .level>button');
    var arr = [[10,10,15],[15,15,40],[20,20,80]];
    var select = 0; //当前选中状态的按钮
    var mine = null;
    for(let i = 0; i < btn.length - 1; i++) {
        console.log(i);
        console.log(arr);
        btn[i].onclick = function(e) {
            btn[select].className = '';
            this.className = 'select';
            select = i;
            mine = new MineSweeper(...arr[i]);
            console.log(arr[i]);
            mine.init();
        }

    }
    btn[0].onclick();
    btn[3].onclick = function() {
        mine.init();
    }
}
startGame();

CSS

.container {
    margin: 30px auto;
    text-align: center;
}
.container .level button {
    background-color: #e5c1cd;
    outline-style: none;
    border: none;
    cursor: pointer;
    color: #fff;
}
.container .level button.select {
    background-color: #b6b4c2;
}
.container .mine table {
    border-spacing: 1px;
    margin: 10px auto;
}
.container .mine table td {
    width: 18px;
    height: 18px;
    padding: 0;
    background-color: #bfb8da;
    border: 2px solid;
    border-color: #ebd7d4 #a56781 #a56781 #ebd7d4;
    text-align: center;
    line-height: 16px;
    font-weight: bold;
}
.container .mine table td.select,
.container .mine table td.mine {
    background-color: #bfb8da;
    border: 1px solid #ebd7d4;
}
.container .mine table td.mine {
    background-image: url("../image/mine.png");
    background-repeat: no-repeat;
    background-size: cover;
}
.container .mine table td.flag {
    background-image: url("../image/flag.png");
    background-repeat: no-repeat;
    background-size: cover;
}
.container .last {
    color: #d87f81;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MineSweeper</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="container">
        <div class="level">
            <button class="select">简单</button>
            <button>一般</button>
            <button>困难</button>
            <button>重新开始</button>
        </div>
        <div class="mine">
            
        </div>
        <div class="last">总共雷数 ： <span class="mineNum"></span></div>
    </div>
<script src="./js/index.js"></script>
</body>
</html>

更新数字

遍历扫雷区域数组，当遇到雷时，取到其周围的格子，如果是数字，则number都+1；如果是雷，则该格子不作操作。

MineSweeper.prototype.updateNumber = function() {
    for(var i = 0; i < this.tr; i++) {
        for(var j = 0; j < this.td; j++) {
            if(this.area[i][j].type == 'number') {
                continue;  //遇到数字格子跳过,不需要取其周围的格子
            }
            var nums = this.mineAround(this.area[i][j]);  //获取雷周围的格子
            for(var k = 0; k < nums.length; k++) {
                //雷周围的格子的number都要+1
                this.area[nums[k][0]][nums[k][1]].value += 1;
            }
        }
    }
};

实现效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。