怎么使用JavaScript实现扫雷小游戏

本篇文章给大家分享的是有关怎么使用JavaScript实现扫雷小游戏，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

下面我们来看看我们步骤吧！这边我们使用的是HBuilder X 编辑器，大家可以使用自己喜欢的编辑器进行编辑。

1、编辑inde.html文件：

                
        初级        中级        高级        重新开始    
    
    
        
            剩余雷数 :                    
        
            TIME :             S        
    
    

2、jin.css文件内容填入：

body {    text-align: center;    position: relative;}.level {    margin-top: 30px;    font-size: 18px;}.level button {    padding: 3px 8px;    background: rgb(67, 183, 189);/* border: 1px solid rgb(129, 129, 129); */border: none;    color: white;    border-radius: 3px;    outline: none;    cursor:pointer;}.level button:hover {    background: rgb(23, 132, 138);}.row {    margin: 0;    padding: 0;    overflow: hidden;    letter-spacing: -8px;}.col {    display: inline-block;    background: rgba(32, 226, 255, 0.41);    border: 1px solid rgb(129, 129, 129);    margin: 1.5px;    width: 23px;    height: 23px;    letter-spacing: normal;    position: relative;}.col span {    display: inline-block;    position: relative;    top: 2px;    opacity: 0;    font-weight: bold;/* 标准箭头 */cursor:default;}.col:hover {    background: blue;}.gameBox {    margin-top: 30px;}.img-flag {    position: absolute;    top: 3px;    left: 3.5px;    width: 18px;    height: 18px;}.hide {    display: none;}.boom {    background: url('boom.svg') no-repeat 2.5px 2px;    background-size: 18px 18px;}.div-boom {    font-size: 30px;    position: fixed;    top: 50px;    left: 50%;}.info {    margin-top: 30px;}.info p {    display: inline-block;    width: 130px;    margin: 0 10px;}.info p span {    color: rgb(67, 183, 189);}.num-1 {    color: rgb(8, 153, 235);}.num-2 {    color: rgb(255, 45, 178);}.num-3 {    color: rgb(109, 224, 176);}.num-4 {    color: rgb(8, 153, 235);}.num-5 {    color: rgb(255, 167, 45);}.num-6 {    color: rgb(49, 140, 102);}.num-7 {    color: rgb(168, 55, 237);}.num-8 {    color: rgb(15, 254, 154);}

3、jin.js文件：

// 1，成一张雷的地图var mineSweepingMap = function (r, c, num) {    var map = []    // 给行数，生成一个 1 维数组    var row = function (r) {        for (var i = 0; i < r; i++) {            map[i] = new Array()        }    }    // 给列数，生成一个 2 维数组    var column = function (col) {        for (var i = 0; i < map.length; i++) {            for (var j = 0; j < col; j++) {                map[i][j] = 0            }        }    }    // 给列数和行数生成空地图    var blankMap = function (r, col) {        row(r)        column(col)    }    // 给出地雷数量让后随机写入地雷    var writeInMine = function (num) {        // 随机位置写入        var randomLocation = function () {            var x = Math.floor(Math.random() * r)            var y = Math.floor(Math.random() * c)            // console.log( ':', x, y);            if (map[x][y] !== 9) {                map[x][y] = 9            } else {                randomLocation()            }        }        for (var i = 0; i < num; i++) {            randomLocation()        }    }    // 使用循环给雷的边上所有数 +1 , 已经是雷的除外    var plus = function (array, x, y) {        if (x >= 0 && x < r && y >= 0 && y < c) {            if (array[x][y] !== 9) {                array[x][y] += 1            }        }    }    var writeInHint = function () {        for (var x = 0; x < map.length; x++) {            for (var y = 0; y < map[0].length; y++) {                if (map[x][y] === 9) {                    // 上下 6 个                    for (var i = -1; i < 2; i++) {                        plus(map, x - 1, y + i)                        plus(map, x + 1, y + i)                    }                    // 左右 2 个                    plus(map, x, y + 1)                    plus(map, x, y - 1)                }            }        }    }    blankMap(r, c)    writeInMine(num)    writeInHint()    return map}// 2，将雷写入页面var writeHtml = function (map) {    // 先通过 y轴数量写入 ul，然后通过 x轴上的数量写入 li    var x = document.querySelector('.gameBox')    for (var i = 0; i < map.length; i++) {        x[xss_clean] = x[xss_clean] + `
`    }    var z = document.querySelectorAll('.row')    for (var i = 0; i < z.length; i++) {        for (var j = 0; j < map[0].length; j++) {            var m = map[i][j]            if (m === 0) {                m = ''            }            z[i][xss_clean] = z[i][xss_clean] + `                
                    ${m}                                    
`        }    }}// 判断是否胜利var changeClearMineNum = function (clearMineNum) {    // console.log('zmzmzmzm');    // console.log('zz', zz);    if (clearMineNum === ((col * row) - num)) {        var all = document.querySelectorAll('.col')        var allNum = 0        var stop = setInterval(function () {            var r = Math.floor(Math.random() * 256)            var g = Math.floor(Math.random() * 256)            var b = 210            // var b = Math.floor(Math.random() * 256)            all[allNum].children[0].style.opacity = `0`            all[allNum].children[1].style.opacity = '0'            all[allNum].style.background = `rgba(${r},${g},${b},0.6)`            allNum++            if (allNum === all.length) {                clearInterval(stop)                if (zz === 0) {                    alert('你成功啦~！！晚上吃肉~~！')                    initializeGame(row, col, num)                }                initializeGame(row, col, num)            }        }, 20)    }}// 3，扫雷过程var clearMine = function (row, col, num) {    var clearMineNum = 0    var makeWhite = function (x, y) {        if (x < row && y < col && x >= 0 && y >= 0) {            var el = document.querySelector(`.x-${x}`).children[y]            // 需要注意这个 ！== 'white' ，如果不加这个就会进入无限循环            if (el.style.background !== 'white') {                el.style.background = 'white'                el.children[0].style.opacity = '1'                el.children[1].classList.add('hide')                clearMineNum++                // console.log(clearMineNum, 'clearMineNum');                changeClearMineNum(clearMineNum)                if (el.innerText === '') {                    showNoMine(x, y)                }            }        }    }    // 智能扫雷    var showNoMine = function (x, y) {        // console.log(x, y, 'x,y');        makeWhite(x - 1, y + 1)        makeWhite(x - 1, y - 1)        makeWhite(x - 1, y)        makeWhite(x + 1, y + 1)        makeWhite(x + 1, y - 1)        makeWhite(x + 1, y)        makeWhite(x, y + 1)        makeWhite(x, y - 1)    }    // 给所有方块绑定点击事件，点击显示数字，或者 boom    var show = function () {        // var x = document.querySelectorAll('.col')        var x = document.querySelectorAll('.row')        for (var i = 0; i < x.length; i++) {            x[i].addEventListener('click', function (event) {                var el = event.target                if (el.tagName != 'LI') {                    // 因为事件委托的原因                    // 如果点击到了 span 上面，那么就会出现 bug                    // 所以如果点击到 span 上面，那么 el 就等于 span 的父节点                    el = event.target.parentElement                }                // 已经被标记的不能点击                var flag = el.children[1].classList.contains('hide')                if (el.tagName === 'LI' && flag) {                    if (el.children[0].innerText !== '9' && el.style.background !== 'white') {                        el.children[0].style.opacity = '1'                        el.style.background = 'white'                        clearMineNum++                        changeClearMineNum(clearMineNum)                        // console.log(clearMineNum, 'clearMineNum');                    } else if (el.children[0].innerText === '9') {                        // el.children[0].style.opacity = '1'                        zz = 1                        el.classList.add('boom')                        alert('游戏失败')                        var all = document.querySelectorAll('.col')                        var ff = []                        var allNum = 0                        // 这里做了个小动画，失败的时候慢慢的显示雷的位置                        for (var i = 0; i < all.length; i++) {                            if (all[i].children[0].innerText === '9') {                                // all[i].style.background = 'red'                                ff[allNum] = all[i]                                allNum++                            }                        }                        allNum = 0                        var time = 60                        if (num > 50) {                            time = 10                        } else if (num > 10) {                            time = 25                        }                        var stop = setInterval(function () {                            ff[allNum].classList.add('boom')                            allNum++                            if (allNum === ff.length) {                                clearInterval(stop)                                // console.log('stop');                            }                        }, time)                        // var box = document.querySelector('.gameBox')                        // box[xss_clean] = ''                        // var level = event.target[xss_clean]                        // var body = document.querySelector('body')                        // initializeGame(row, col, num)                    }                    // 如果点击的方格为空（什么有没有），那么周围没有点开的空方格都会被点开                    if (el.children[0].innerText === '') {                        // 获取到位置                        var x = parseInt(el.parentElement.dataset.x)                        var y = parseInt(el.dataset.y)                        // console.log(x,y, 'data');                        // 背景变成白色                        showNoMine(x, y)                    }                }            })        }        for (var i = 0; i < x.length; i++) {            var mineNum = num            x[i].addEventListener('contextmenu', function (event) {                event.preventDefault();                var btnNum = event.button                var el = event.target                if (el.tagName != 'LI') {                    // 因为事件委托的原因                    // 如果点击到了 span 上面，那么就会出现 bug                    // 所以如果点击到 span 上面，那么 el 就等于 span 的父节点                    el = event.target.parentElement                }                if (el.tagName === 'LI') {                    var classList = el.children[1].classList                    // 已经被点击过的地方不能标记                    if (classList.contains('hide') && el.style.background !== 'white') {                        var residue = document.querySelector('.residue')                        if (mineNum !== 0) {                            mineNum--                        }                        residue.innerText = `${mineNum}`                        classList.remove('hide')                    } else if (el.style.background !== 'white') {                        classList.add('hide')                    }                }            })        }    }    show()}// 4，清除画面，然后写入新的画面var stopTimevar initializeGame = function (row, col, num) {    var residue = document.querySelector('.residue')    residue.innerText = `${num}`    var time = document.querySelector('.tick')    time.innerText = `0`    var i = 1    clearInterval(stopTime)    stopTime = setInterval(function () {        time.innerText = `${i++}`    }, 1000)    // zz    zz = 0    // 首先清除原来的地图，然后重新初始化    var box = document.querySelector('.gameBox')    box[xss_clean] = ''    var body = document.querySelector('body')    body.style.minWidth = `${27 * col}px`    var map = mineSweepingMap(row, col, num)    writeHtml(map)    clearMine(row, col, num)}// 5，选择游戏等级，给按钮绑定功能var Btn = function () {    var level = document.querySelectorAll('.choice-level')    for (var i = 0; i < level.length; i++) {        level[i].addEventListener('click', function (event) {            var level = event.target[xss_clean]            if (level === '初级') {                row = 9                col = 9                num = 10                initializeGame(row, col, num)            } else if (level === '中级') {                row = 16                col = 16                num = 40                initializeGame(row, col, num)            } else if (level === '高级') {                row = 16                col = 30                num = 99                initializeGame(row, col, num)            }        })    }    var restart = document.querySelector('.restart')    restart.addEventListener('click', function (event) {        initializeGame(row, col, num)    })}Btn()// 6，初始数据// zz 用来确定是否已经点到地雷var zz = 0var row = 16var col = 16var num = 40initializeGame(row, col, num)// 给一个坐标，把四周变成白色// 根据// 绑定鼠标右击事件，右击鼠标的时候进行标记，    // 这个时候要进行 css 的变化// 当所有地雷被标记，或者说所有数组中只剩 9，游戏成功。// 选择游戏难度

javascript是一种什么语言

javascript是一种动态类型、弱类型的语言，基于对象和事件驱动并具有相对安全性并广泛用于客户端网页开发的脚本语言，同时也是一种广泛用于客户端Web开发的脚本语言。它主要用来给HTML网页添加动态功能，现在JavaScript也可被用于网络服务器，如Node.js。

以上就是怎么使用JavaScript实现扫雷小游戏，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。