赢不了的扫雷

最新推荐文章于 2024-07-20 15:40:46 发布

程序猪666

最新推荐文章于 2024-07-20 15:40:46 发布

阅读量29

点赞数

文章标签： css html5 javascript

本文链接：https://blog.csdn.net/weixin_47238423/article/details/134867638

版权

你永远赢不了的扫雷

https://www.bilibili.com/video/BV1KV411A72g/?spm_id_from=333.999.0.0&vd_source=efbd9f2a10893931c2f338f96867a1e9

https://v.douyin.com/i8d6yMFV

使用 HTML、CSS 和 JavaScript 实现的扫雷游戏。以下是程序的主要部分的解释：

HTML 结构：
- <!DOCTYPE html>: 定义文档类型和版本。
- <html lang="en">: HTML 根元素，指定文档语言为英语。
- <head>: 包含文档的元信息和引用的外部资源。
  - <meta charset="UTF-8">: 指定文档使用 UTF-8 字符集。
  - <title>你永远赢不了的扫雷</title>: 设置网页标题。
  - <style>: 包含内部样式表，定义页面的样式。
- <body>: 包含页面的实际内容。
CSS 样式：
- 定义了样式规则，其中包括 .board、.cell、.revealed 和 .mine 等类。
- .board 使用 CSS Grid 布局创建了一个网格，用于显示扫雷游戏的主要区域。
- .cell 定义了每个单元格的样式，包括宽度、高度、文本居中等。
- .revealed 和 .mine 类分别用于标识被揭示的单元格和包含地雷的单元格。
JavaScript 代码：
- 在 <script> 标签中包含了 JavaScript 代码。
- const numRows, const numCols, 和 const numMines 定义了游戏的行数、列数和地雷数量。
- board 是一个二维数组，表示扫雷游戏的主板，其中包含每个单元格的状态信息。
- createBoard 函数用于创建游戏板，并在其中随机放置地雷。
- handleCellClick 函数处理单元格点击事件，根据点击的单元格是否包含地雷执行相应操作。
- countAdjacentMines 函数计算给定单元格周围的地雷数量。
- revealBoard 函数在游戏结束时揭示整个游戏板上的地雷位置。
游戏逻辑：
- 游戏开始时，调用 createBoard 函数创建游戏板，并在其中随机放置地雷。
- 点击单元格时，调用 handleCellClick 处理点击事件，根据点击的单元格是否包含地雷执行相应操作。
- 如果点击到地雷，弹出游戏结束的提示，并揭示整个游戏板上的地雷位置。

这是一个基本的扫雷游戏实现，玩家通过点击单元格来揭示地雷的位置，游戏会在点击到地雷时结束。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>你永远赢不了的扫雷</title>
    <style>
        .board {
            display: grid;
            grid-template-columns: repeat(10, 30px);
            gap: 2px;
        }

        .cell {
            width: 30px;
            height: 30px;
            text-align: center;
            vertical-align: middle;
            background-color: #ccc;
            cursor: pointer;
        }

        .revealed {
            background-color: #fff;
        }

        .mine {
            background-color: #f00;
        }
    </style>
</head>
<body>
    <h1>你永远赢不了的扫雷</h1>
    <div class="board" id="board"></div>

    <script>
        const numRows = 10;
        const numCols = 10;
        const numMines = 20;
        const board = [];

        function createBoard() {
            const boardElement = document.getElementById("board");
            for (let i = 0; i < numRows; i++) {
                const row = [];
                for (let j = 0; j < numCols; j++) {
                    const cell = document.createElement("div");
                    cell.classList.add("cell");
                    cell.dataset.row = i;
                    cell.dataset.col = j;
                    cell.addEventListener("click", handleCellClick);
                    boardElement.appendChild(cell);
                    row.push({ element: cell, isMine: false, isRevealed: false });
                }
                board.push(row);
            }

            // Place mines randomly
            for (let i = 0; i < numMines; i++) {
                let row, col;
                do {
                    row = Math.floor(Math.random() * numRows);
                    col = Math.floor(Math.random() * numCols);
                } while (board[row][col].isMine);
                board[row][col].isMine = true;
            }
        }

        function handleCellClick(event) {
            const row = parseInt(event.target.dataset.row);
            const col = parseInt(event.target.dataset.col);

            if (board[row][col].isRevealed) return;

            if (board[row][col].isMine) {
                event.target.classList.add("mine");
                alert("游戏结束！你踩到地雷了！");
                revealBoard();
            } else {
                const mineCount = countAdjacentMines(row, col);
                event.target.classList.add("revealed");
                event.target.textContent = mineCount > 0 ? mineCount : "";
                board[row][col].isRevealed = true;
            }
        }

        function countAdjacentMines(row, col) {
            let count = 0;
            for (let i = -1; i <= 1; i++) {
                for (let j = -1; j <= 1; j++) {
                    const r = row + i;
                    const c = col + j;
                    if (r >= 0 && r < numRows && c >= 0 && c < numCols && board[r][c].isMine) {
                        count++;
                    }
                }
            }
            return count;
        }

        function revealBoard() {
            for (let row = 0; row < numRows; row++) {
                for (let col = 0; col < numCols; col++) {
                    if (board[row][col].isMine) {
                        board[row][col].element.classList.add("revealed");
                        board[row][col].element.classList.add("mine");
                    }
                }
            }
        }

        createBoard();
    </script>
</body>
</html>