使用JavaScript實現掃雷小游戲！附加源碼！

廢話輸出機器 2021-11-26 10:51:13 瀏覽數 (4204)

反饋

上面是今天小編來為大家分享一個使用JavaScript實現的掃雷小游戲的效果截圖，那么下面我們來看看我們步驟吧！這邊我們使用的是HBuilder X 編輯器，大家可以使用自己喜歡的編輯器進行編輯。

首先我們創(chuàng)建我們需要的文件（截圖如下所示）：

1、編輯inde.html文件：

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="jin.css">
</head>

<body>
    <div class="level">
        <button type="button" name="button" class="choice-level">初級</button>
        <button type="button" name="button" class="choice-level">中級</button>
        <button type="button" name="button" class="choice-level">高級</button>
        <button type="button" name="button" class="restart">重新開始</button>
    </div>
    <div class="gameBox"></div>
    <div class="info">
        <p class="">
            剩余雷數 :
            <span class="residue"></span>
        </p>
        <p>
            TIME :
            <span class="tick"></span> S
        </p>
    </div>
    <script src="jin.js" charset="utf-8"></script>
</body>

</html>

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()
        }
    }

    // 使用循環(huán)給雷的邊上所有數 +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.innerHTML = x.innerHTML + `<ul class="row x-${i}" data-x="${i}"></ul>`
    }

    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].innerHTML = z[i].innerHTML + `
                <li class="col y-${j} num-${m}" data-y="${j}">
                    <span>${m}</span>
                    <img src="flag.svg" class="img-flag hide">
                </li>`
        }
    }
}

// 判斷是否勝利
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},$,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' ，如果不加這個就會進入無限循環(huán)
            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 的父節(jié)點
                    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.innerHTML = ''
                        // var level = event.target.innerHTML
                        // 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 的父節(jié)點
                    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 stopTime
var 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.innerHTML = ''
    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.innerHTML
            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 = 0
var row = 16
var col = 16
var num = 40
initializeGame(row, col, num)

// 給一個坐標，把四周變成白色

// 根據
// 綁定鼠標右擊事件，右擊鼠標的時候進行標記，
    // 這個時候要進行 css 的變化
// 當所有地雷被標記，或者說所有數組中只剩 9，游戲成功。

// 選擇游戲難度

那么以上的話就是我們有關于JavaScript原生游戲的相關代碼；更多有關于JavaScript這方面的學習大家可以在下面小編分享的相關課程和教程中進行學習。

教程：

微課：

JavaScript 基礎實戰(zhàn)

JavaScript 函數式編程

HTML入門課程

HTML + CSS 基礎實戰(zhàn)

HTML+CSS響應式網頁設計