HTML+CSS+JS扫雷（可自定义雷数，大小，可插旗）

睿智的海鸥

于 2024-07-23 22:23:33 发布

阅读量341

点赞数 13

本文链接：https://blog.csdn.net/w11111xxxl/article/details/140647534

版权

源代码在最后面点赞❤️ 关注⭐️谢谢😜

实现功能

随机扫雷
自定义地雷数、游戏棋盘大小
插旗

效果图（部分图片）

源代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扫雷游戏</title>
    <style>
        /* CSS代码开始 */
        body {
            background-color: #f8f9fa; /* 背景色 */
            font-family: 'Arial', sans-serif; /* 字体 */
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .container {
            background-color: #ffffff; /* 窗口背景色 */
            padding: 20px;
            border-radius: 15px; /* 圆角 */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* 阴影效果 */
            text-align: center; /* 中心对齐 */
        }

        .title {
            font-size: 2em; /* 标题字体大小 */
            color: #dc3545; /* 标题颜色 */
            margin-bottom: 20px;
        }

        .start-game-btn, .param-btn, .flag-btn {
            display: block;
            margin: 10px auto;
            padding: 10px 20px;
            background-color: #dc3545; /* 按钮背景色 */
            color: white;
            border: none;
            border-radius: 5px; /* 圆角按钮 */
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 按钮阴影 */
            transition: background-color 0.3s ease; /* 过渡效果 */
        }

        .start-game-btn:hover, .param-btn:hover, .flag-btn:hover {
            background-color: #c82333; /* 悬停时变深的颜色 */
        }

        table {
            margin: 0 auto; /* 表格居中 */
            border-collapse: collapse; /* 合并边框 */
        }

        td {
            width: 40px;
            height: 40px;
            text-align: center;
            vertical-align: middle;
            background-color: #f7f7f7; /* 单元格背景色 */
            border-radius: 5px; /* 圆角单元格 */
            cursor: pointer;
            font-size: 1.5em; /* 字体大小 */
            transition: background-color 0.3s; /* 背景色过渡 */
            border: 1px solid #ccc; /* 添加边框 */
        }

        td:hover {
            background-color: #e2e6ea; /* 悬停效果 */
        }

        .mine {
            color: red; /* 炸弹颜色 */
        }

        .flag {
            color: green; /* 红旗颜色 */
        }

        .number-1 { color: blue; }
        .number-2 { color: green; }
        .number-3 { color: red; }
        .number-4 { color: purple; }
        .number-5 { color: maroon; }
        .number-6 { color: teal; }
        .number-7 { color: black; }
        .number-8 { color: gray; }

        .revealed {
            background-color: #d1e7dd; /* 已确认没有雷的区域背景色 */
        }
        /* CSS代码结束 */
    </style>
</head>
<body>
    <div class="container">
        <h1 class="title">扫雷</h1>
        <button id="startGameBtn" class="start-game-btn">开局</button>
        <button id="paramBtn" class="param-btn">修改参数</button>
        <button id="flagBtn" class="flag-btn">插旗子</button>
        <table id="mineField"></table>
    </div>

    <script>
        /* JavaScript代码开始 */
        let flagMode = false; // 插旗模式开关
        let rows = 8, cols = 8, mines = 10; // 默认参数

        document.getElementById('startGameBtn').addEventListener('click', startGame);
        document.getElementById('paramBtn').addEventListener('click', modifyParameters);
        document.getElementById('flagBtn').addEventListener('click', toggleFlagMode);

        function startGame() {
            const mineField = document.getElementById('mineField');
            mineField.innerHTML = '';

            // 创建表格
            for (let i = 0; i < rows; i++) {
                let row = document.createElement('tr');
                for (let j = 0; j < cols; j++) {
                    let cell = document.createElement('td');
                    cell.addEventListener('click', () => revealCell(i, j));
                    row.appendChild(cell);
                }
                mineField.appendChild(row);
            }

            let mineLocations = [];
            while (mineLocations.length < mines) {
                let x = Math.floor(Math.random() * rows);
                let y = Math.floor(Math.random() * cols);
                if (!mineLocations.includes(x + ',' + y)) {
                    mineLocations.push(x + ',' + y);
                    document.getElementById('mineField').rows[x].cells[y].setAttribute('data-mine', 'true');
                }
            }
        }

        function revealCell(row, col) {
            let cell = document.getElementById('mineField').rows[row].cells[col];
            if (cell.getAttribute('data-revealed') === 'true') return;

            if (flagMode) {
                // 插旗子模式
                if (cell.textContent === '🚩') {
                    cell.textContent = ''; // 移除旗子
                } else {
                    cell.textContent = '🚩'; // 插旗子
                }
                return;
            }

            cell.setAttribute('data-revealed', 'true');
            cell.classList.add('revealed'); // 添加已确认的类

            if (cell.getAttribute('data-mine') === 'true') {
                cell.textContent = '💣'; // 显示炸弹
                revealAllMines(); // 显示所有炸弹
                alert('失败！');
            } else {
                let count = getAdjacentMinesCount(row, col);
                if (count > 0) {
                    cell.textContent = count;
                    cell.classList.add('number-' + count); // 添加颜色类
                }
                if (count === 0) {
                    revealAdjacentCells(row, col);
                }
                checkWin();
            }
        }

        function revealAllMines() {
            const mineField = document.getElementById('mineField');
            for (let i = 0; i < rows; i++) {
                for (let j = 0; j < cols; j++) {
                    let cell = mineField.rows[i].cells[j];
                    if (cell.getAttribute('data-mine') === 'true') {
                        cell.textContent = '💣'; // 显示炸弹
                    }
                }
            }
        }

        function getAdjacentMinesCount(row, col) {
            let count = 0;
            for (let i = -1; i <= 1; i++) {
                for (let j = -1; j <= 1; j++) {
                    if (i === 0 && j === 0) continue;
                    let r = row + i, c = col + j;
                    if (r >= 0 && r < rows && c >= 0 && c < cols) {
                        if (document.getElementById('mineField').rows[r].cells[c].getAttribute('data-mine') === 'true') {
                            count++;
                        }
                    }
                }
            }
            return count;
        }

        function revealAdjacentCells(row, col) {
            for (let i = -1; i <= 1; i++) {
                for (let j = -1; j <= 1; j++) {
                    if (i === 0 && j === 0) continue;
                    let r = row + i, c = col + j;
                    if (r >= 0 && r < rows && c >= 0 && c < cols) {
                        revealCell(r, c);
                    }
                }
            }
        }

        function checkWin() {
            let revealedCells = 0;
            for (let i = 0; i < rows; i++) {
                for (let j = 0; j < cols; j++) {
                    if (document.getElementById('mineField').rows[i].cells[j].getAttribute('data-revealed') === 'true') {
                        revealedCells++;
                    }
                }
            }
            if (revealedCells === rows * cols - mines) {
                alert('成功！');
                resetGame();
            }
        }

        function resetGame() {
            window.location.reload();
        }

        function modifyParameters() {
            let newRows = prompt("请输入行数（默认8）:", rows);
            let newCols = prompt("请输入列数（默认8）:", cols);
            let newMines = prompt("请输入雷数（默认10）:", mines);
            if (newRows) rows = parseInt(newRows);
            if (newCols) cols = parseInt(newCols);
            if (newMines) mines = parseInt(newMines);
            startGame(); // 重新开始游戏
        }

        function toggleFlagMode() {
            flagMode = !flagMode; // 切换插旗子模式
            alert(flagMode ? "插旗子模式已开启" : "插旗子模式已关闭");
        }
        /* JavaScript代码结束 */
    </script>
</body>
</html>