首页 前端知识 html js css做的扫雷

html js css做的扫雷

2024-08-04 00:08:33 前端知识 前端哥 418 223 我要收藏

做了个扫雷💣    8×8大小  源代码在文章最后

界面

先点击蓝色开局按钮

0de777cba3484a609a2871b71c1af3d7.jpg

 然后就可以再扫雷的棋盘上玩

db50bebc84fb45da8770963eb94a2f74.jpg

0代表该位置没有雷

其他数字代表周围雷的数量

1d0c1a9ea6604223a47bc4b1d2a6c667.jpg

 源代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>扫雷游戏</title>

    <style>

        /* CSS代码开始 */

        body {

            background-color: #f0f0f0;

            display: flex;

            justify-content: center;

            align-items: center;

            height: 100vh;

            margin: 0;

        }

 

        .container {

            background-color: white;

            padding: 20px;

            border-radius: 5px;

            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

        }

 

        .title {

            text-align: center;

            font-size: 2em;

            margin-bottom: 20px;

        }

 

        .start-game-btn {

            display: block;

            margin: 0 auto 20px;

            padding: 10px 20px;

            background-color: #007bff;

            color: white;

            border: none;

            border-radius: 5px;

            cursor: pointer;

            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

            transition: all 0.3s ease;

        }

 

        .start-game-btn:hover {

            background-color: #0056b3;

        }

 

        td {

            width: 30px;

            height: 30px;

            text-align: center;

            vertical-align: middle;

            border: 1px solid #ddd;

            cursor: pointer;

        }

        /* CSS代码结束 */

    </style>

</head>

<body>

    <div class="container">

        <h1 class="title">扫雷</h1>

        <button id="startGameBtn" class="start-game-btn">开局</button>

        <table id="mineField"></table>

    </div>

    <script>

        /* JavaScript代码开始 */

        document.getElementById('startGameBtn').addEventListener('click', startGame);

 

        function startGame() {

            const mineField = document.getElementById('mineField');

            mineField.innerHTML = '';

 

            const rows = 8, cols = 8;

            const mines = 10;

 

            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;

                cell.setAttribute('data-revealed', 'true');

 

                if (cell.getAttribute('data-mine') === 'true') {

                    alert('失败!');

                    resetGame();

                } else {

                    cell.textContent = getAdjacentMinesCount(row, col);

                    if (cell.textContent === '0') {

                        revealAdjacentCells(row, col);

                    }

                    checkWin();

                }

            }

 

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

            }

        }

        /* JavaScript代码结束 */

    </script>

</body>

</html>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14732.html
标签
评论
发布的文章

RapidJSON介绍

2024-08-14 00:08:38

jQuery 4 beta 震撼发布

2024-08-14 00:08:36

cJSON的使用

2024-08-14 00:08:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!