前端小游戏扫雷

最新推荐文章于 2024-06-02 21:27:33 发布

LRF200307

最新推荐文章于 2024-06-02 21:27:33 发布

阅读量112

点赞数 1

文章标签：前端 html css

本文链接：https://blog.csdn.net/LRF200307/article/details/131069291

版权

<!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>扫雷</title>
    <style>
        div {
            margin: 100px auto 0;
        }

        p {
            text-align: center;
            font-size: 20px;
            font-weight: 600;

        }

        a {
            cursor: pointer;
            padding: 10px;
            border: 3px red solid;
            color: black;
            text-decoration: none;
        }

        ul {
            margin: 0px auto 100px;
            /* width: 540px; */
        }

        li {
            float: left;
            list-style: none;
            width: 50px;
            height: 50px;
            border: 1px solid black;
            margin: 2px;
            box-sizing: border-box;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
        }

        li:hover {
            cursor: pointer;
            background: #00f;
        }
    </style>
</head>
<body oncontextmenu="self.event.returnValue=false">
    <div>
        <p><a id="a">重新开始</a></p>
    </div>
    <ul></ul>
    <script>
        let a = document.getElementById('a')
        a.onclick = () => {
            location.reload()
        }
    </script>
    <!-- 禁止右键菜单栏 -->
    <script>
        const row = 10; //行数
        const col = 10; //列数
        const maxCount = 10; //最大地雷数量
        let isFirstOpen = true; //第一次打开方格生成雷
        let ul = document.getElementsByTagName('ul')[0]
        let grid = init_grid(); //初始化
        const winCount = row * col - maxCount //需要胜利的打开格子全部数量
        let wincount = 0; //当前打开格子的数量

        ul.style.width = `${row * 54}px`

        function init_grid() {
            let gridHtml = ''
            for (let i = 0; i < row; i++) {
                for (let j = 0; j < col; j++) {
                    gridHtml += `<li onmousedown="Click(${i},${j},event)"></li>`
                }
            }

            ul.innerHTML = gridHtml
        }

        let li = document.getElementsByTagName('li')
        for (let i = 0; i < row * col; i++) {
            li[i].count = 0;
        }

        function Click(i, j, e) {
            console.log(i, j, e.button)

            //判断方格有没有打开过
            if (li[i * 10 + j].isOpen) {
                // console.log(1);
                return
            }

            //第一次打开方格
            if (isFirstOpen) {
                isFirstOpen = false

                //生成雷
                let l = 0
                while (l < maxCount) {

                    let ri = Math.floor(Math.random() * row);
                    let rj = Math.floor(Math.random() * col);

                    if (!li[ri * 10 + rj].isMine) {
                        // console.log(li[ri * 10 + rj]);
                        li[ri * 10 + rj].isMine = true;
                        // li[ri * 10 + rj].innerHTML = "雷"
                        l++
                        // let count = 0;
                        //计算非雷方格九宫格周围的雷数
                        for (let i = ri - 1; i < ri + 2; i++) {
                            for (let j = rj - 1; j < rj + 2; j++) {
                                console.log(!li[ri * 10 + rj].isMine);
                                if ((i > -1 && j > -1 && i < row && j < col) || !li[ri * 10 + rj].isMine) {
                                    //计雷数+1
                                    li[i * 10 + j].count++;
                                }
                            }
                        }
                    }
                }

            }
            //鼠标左键打开方格
            if (e.button === 0) {
                // 打开方格 

                if (li[i * 10 + j].innerHTML === '▲') return
                if (li[i * 10 + j].isMine) {
                    alert('游戏结束')
                    for (let n = 0; n < row * col; n++)
                        if (li[n].isMine) {
                            li[n].innerHTML = "雷"

                        }
                    return
                }

                openGrid(i, j)

                function openGrid(i, j) {

                    wincount++
                    if (wincount === winCount) {
                        alert("胜利")
                    }

                    let b = li[i * 10 + j]
                    b.style.background = "#ddd"
                    b.isOpen = true
                    // console.log(b.isOpen);
                    // console.log(b.isMine);
                    if (b.count === 0) {
                        for (let n = i - 1; n < i + 2; n++) {
                            for (let m = j - 1; m < j + 2; m++) {
                                if (n > -1 && m > -1 && n < row && m < col && !li[n * 10 + m].isMine && !li[n * 10 + m].isOpen) {
                                    // console.log('aaa');
                                    openGrid(n, m)
                                }
                            }
                        }
                    } else {
                        b.innerHTML = b.count
                    }
                }


                // console.log(1);
            }
            //鼠标右键打开方格
            if (e.button === 2) {
                let b = li[i * 10 + j];
                if (b.innerHTML !== '▲') {
                    b.innerHTML = '▲';
                } else {
                    b.innerHTML = '';
                }
            }

        }

    </script>
</body>
</html>

LRF200307

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端小游戏扫雷

【代码】前端小游戏扫雷。
复制链接

扫一扫

前端小游戏 扫雷

“相关推荐”对你有帮助么？

前端小游戏扫雷