扫雷实现

可提升速度的地方：

1>为方格填充数字时

2>点击到数字为0的方格，展开其他方格时

<!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>
</head>
<body>
    <div id="root"></div>
    <script>
        let lock = true;
        //  定义锁
        const MINE_NUMBER = 3;
        const WIDTH = 6;
        const HEIGHT = 6;
        //  定义扫雷游戏的基础信息
        let surplus = WIDTH * HEIGHT - MINE_NUMBER;
        //  定义还未排查的方格数量
        const DATA = [];
        for (let i = 1; i <= HEIGHT; ++i) {
            let temp = [];
            for (let j = 1; j <= WIDTH; ++j) {
                temp[j - 1] = 0;
            }
            DATA.push(temp);
        }
        // 生成扫雷游戏数据（将地图信息用二维数组存储）
        for (let i = 1; i <= MINE_NUMBER; ++i) {
            while (1) {
                let temp = Math.floor(Math.random() * WIDTH * HEIGHT + 1);
                let a = Math.floor(temp / WIDTH) - 1;
                a == -1 && (a = 0);
                let b = temp % WIDTH - 1;
                b == -1 && (b = 0);
                if (DATA[a][b] != -1) {
                    DATA[a][b] = -1;
                    break;
                }
            }
        }
        //  生成炸弹
        for (let i = 0; i < HEIGHT; ++i) {
            for (let j = 0; j < WIDTH; ++j) {
                if (DATA[i][j] != -1) {
                    let count = 0;
                    let _temp = screen(i, j);
                    for (let i = 0, len = _temp.length; i < len; ++i) {
                        if (DATA[_temp[i][0]][_temp[i][1]] == -1) {
                            ++count;
                        }
                    }
                    DATA[i][j] = count;
                }
            }
        }
        //  生成数字
        const ROOT = document.getElementById("root");
        ROOT.style.width = WIDTH * 40 + 'px';
        ROOT.style.height = HEIGHT * 40 + 'px';
        let html = '';
        for (let i = 1; i <= HEIGHT; ++i) {
            for (let j = 1; j <= WIDTH; ++j) {
                let style = `style="width: 40px;height: 40px;border: 1px solid red;box-sizing: border-box;background: green;display: inline-block;float: left;text-align: center;line-height: 40px;cursor: default;color: white;"`;
                let number = DATA[i - 1][j - 1];
                html = html + `<div ${style} data-x="${i - 1}" data-y="${j - 1}" data-i="${number}" data-is="1"></div>`;
            }
        }
        ROOT.innerHTML = html;
        //  渲染地图
        document.oncontextmenu = function (e) {
            return false;
        };
        //  重定义页面右键事件
        const fn = function (e) {
            if (e.button == 2) {
                if (e.target.getAttribute('data-is') == 1) {
                    e.target.innerText = e.target.innerText == '@' ? '' : '@';
                }
            } else {
                if (e.target.getAttribute('data-is') == 1) {
                    e.target.setAttribute('data-is', '0');
                    --surplus;
                    let temp = e.target.getAttribute('data-i');
                    if (temp == '-1') {
                        e.target.innerText = '*';
                        setTimeout(() => {
                            alert('恭喜你，踩到炸弹！BONG！！');
                            location.reload();
                        });
                    } else {
                        e.target.innerText = temp;
                        if (temp == '0') {
                            let x = +e.target.getAttribute('data-x');
                            let y = +e.target.getAttribute('data-y');
                            let temp = screen(x, y);
                            for (let i = 0, len = temp.length; i < len; ++i) {
                                fn({
                                    button: 1, 
                                    target: ROOT.children[temp[i][0] * WIDTH + temp[i][1]]
                                });
                            }
                        }
                    }
                    if (surplus == 0 && lock) {
                        lock = false;
                        alert('扫雷大师+幸运女神的眷顾！！');
                        location.reload();
                    }
                }
            }
        };
        ROOT.onmouseup = fn;
        //  监听鼠标（左键点击/右键点击）事件
        function screen(i, j) {
            let temp = [[i - 1, j], [i - 1, j - 1], [i - 1, j + 1], [i + 1, j], [i + 1, j - 1], [i + 1, j + 1], [i, j - 1], [i, j + 1]];
            if (i - 1 < 0) {
                temp[0] = temp[1] = temp[2] = 0;
            }
            if (j - 1 < 0) {
                temp[1] = temp[4] = temp[6] = 0;
            }
            if (i + 1 >= HEIGHT) {
                temp[3] = temp[4] = temp[5] = 0;
            }
            if (j + 1 >= WIDTH) {
                temp[2] = temp[5] = temp[7] = 0;
            }
            let _temp = [];
            for (let i = 0; i < 8; ++i) {
                temp[i] != 0 && _temp.push(temp[i]);
            }
            return _temp;
        }
        //  定义筛选函数
    </script>
</body>
</html>

 

posted @ 2022-04-28 13:10  吕洋  阅读(47)  评论(0)    收藏  举报