html版扫雷,js扫雷,拷贝代码即可使用,javascript扫雷

最新推荐文章于 2024-10-15 17:32:53 发布
dawnStart
最新推荐文章于 2024-10-15 17:32:53 发布
阅读量430
点赞数 1
文章标签： javascript html 前端
本文链接：https://blog.csdn.net/dawnStart/article/details/129562500
版权
<html lang="zh">
<head>
    <title></title>
</head>
<body>
<!--    绘制棋盘-->
<div style="width: 10px;height: 10px" onclick="cheat()"></div>
<div style="width: 140px;margin: 50px auto">
    <label for="level">级别</label>
    <select id="level">
        <option value="6">初级</option>
        <option value="7">中级</option>
        <option value="8">高级</option>
    </select>
    <button onclick="start()">开始</button>
</div>
<div id="content" style="margin: 0 auto">

</div>
<script>
    let flag = 0;
    let level = document.getElementById("level");
    let content = document.getElementById("content");
    let tdWidth = 50;
    // 雷的二维数组
    let arr = []
    // 雷的数量
    let thunderNum = 0
    // 点击次数
    let clickCount = 0;
    // 行数
    let rowCount = 0;
    let click = false;

    function start() {
        arr = []
        clickCount = 0;
        flag = 0;
        if (content.childElementCount > 0) {
            for (let child of content.children) {
                child.remove();
            }
        }
        // 行数
        rowCount = level.options[level.selectedIndex].value;
        //雷的数量
        thunderNum = rowCount
        let table = document.createElement("table");
        table.style.border = "solid 1px"
        content.style.width = rowCount * tdWidth + "px"
        table.style.width = rowCount * tdWidth + "px"
        table.style.height = rowCount * tdWidth + "px"
        for (let i = 0; i < rowCount; i++) {
            let tr = document.createElement("tr");
            let arrChild = [];
            for (let j = 0; j < rowCount; j++) {
                let td = document.createElement("td");
                td.style.width = tdWidth + "px"
                td.style.height = tdWidth + "px"
                td.style.textAlign = "center"
                td.style.border = "1px solid #323844"
                td.style.backgroundColor = "#323844"
                td.onclick = () => onClick(i, j, td)
                tr.appendChild(td);
                // 初始化二维数组
                arrChild.push(0)
            }
            table.appendChild(tr);
            arr.push(arrChild)
        }
        content.appendChild(table)
        // 随机生成雷的下标 取值 0到格子数-1
        let thunderIndex = [];
        while (true) {
            let index = Math.floor((Math.random() * (rowCount * rowCount - 1)))
            if (!thunderIndex.includes(index)) {
                thunderIndex.push(index)
            }
            if (thunderIndex.length >= thunderNum) {
                break;
            }
        }
        // 将雷放到二维数组中,并且计算雷周边的数量
        for (let index of thunderIndex) {
            index = index === 0 ? 1 : index
            let x = Math.floor((index - 1) / rowCount)
            let y = (index - 1) % rowCount
            arr[x][y] = -1;
            // 计算周边数值
            // 上面
            updateArr(arr, x, y - 1 < 0 ? null : y - 1)
            // 上左
            updateArr(arr, x - 1 < 0 ? null : x - 1, y - 1 < 0 ? null : y - 1)
            // 上右
            updateArr(arr, x + 1 > rowCount - 1 ? null : x + 1, y - 1 < 0 ? null : y - 1)
            // 左边
            updateArr(arr, x - 1 < 0 ? null : x - 1, y)
            // 右边
            updateArr(arr, x + 1 > rowCount - 1 ? null : x + 1, y)
            // 下左
            updateArr(arr, x - 1 < 0 ? null : x - 1, y + 1 > rowCount - 1 ? null : y + 1)
            // 下面
            updateArr(arr, x, y + 1 > rowCount - 1 ? null : y + 1)
            // 下右
            updateArr(arr, x + 1 > rowCount - 1 ? null : x + 1, y + 1 > rowCount - 1 ? null : y + 1)
        }
        console.log(arr)
    }

    function updateArr(arr, x, y) {
        // 为空说明到边缘了,不用计算
        if (x === null || y === null) {
            return
        }
        if (arr[x][y] !== -1) {
            arr[x][y] += 1
        }
    }

    function onClick(x, y, e) {
        if (flag === 1) {
            alert("你失败啦点击重新开始")
            return;
        }
        if (flag === 2) {
            alert("成功过关啦,点击重新开始")
            return;
        }
        // 点击数加一,判断是否成功
        clickCount++;
        if (arr[x][y] === -1) {
            e.style.backgroundColor = "red"
            flag = 1;
            return;
        }
        e.style.backgroundColor = ""
        e.innerText = arr[x][y]
        // 判断是否成功,点击数大于或等于格子数减雷的数量
        if (clickCount >= rowCount * rowCount - thunderNum) {
            alert("成功过关!")
            flag = 2;
        }
    }

    // 作弊用
    function cheat() {
        let table = content.children[0];
        for (let i in arr) {
            for (let j in arr[i]) {
                if (arr[i][j] === -1) {
                    console.log(table)
                    table.children[i].children[j].style.backgroundColor = "#a3632b"
                }
            }
        }
    }
</script>
</body>
</html>