Skip to content

Instantly share code, notes, and snippets.

@jiangdi0924

jiangdi0924/gist:25651a4f351e2c7cc6b445f9ac3dad59

Created February 11, 2023 10:22
Show Gist options
  • Save jiangdi0924/25651a4f351e2c7cc6b445f9ac3dad59 to your computer and use it in GitHub Desktop.
Save jiangdi0924/25651a4f351e2c7cc6b445f9ac3dad59 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jiangdi0924 created this gist Feb 11, 2023.
    145 changes: 145 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,145 @@
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    table {
    border-collapse: collapse;
    }

    td {
    width: 30px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid black;
    }

    .mine {
    background-color: red;
    }

    .flag {
    background-color: green;
    }
    </style>
    </head>
    <body>
    <table id="board"></table>

    <script>
    const board = document.querySelector("#board");
    let mines = 20;
    let cells = [];
    let remaining = 100 - mines;
    let gameover = false;

    // 初始化棋盘
    for (let i = 0; i < 10; i++) {
    let row = board.insertRow();
    cells[i] = [];
    for (let j = 0; j < 10; j++) {
    let cell = row.insertCell();
    cells[i][j] = {
    mine: false,
    count: 0,
    revealed: false,
    flag: false,
    };
    }
    }

    // 随机设置地雷
    while (mines > 0) {
    let x = Math.floor(Math.random() * 10);
    let y = Math.floor(Math.random() * 10);
    if (!cells[x][y].mine) {
    cells[x][y].mine = true;
    mines--;
    }
    }

    // 计算周围地雷数
    for (let i = 0; i < 10; i++) {
    for (let j = 0; j < 10; j++) {
    if (!cells[i][j].mine) {
    if (i > 0 && j > 0 && cells[i - 1][j - 1].mine) cells[i][j].count++;
    if (i > 0 && cells[i - 1][j].mine) cells[i][j].count++;
    if (i > 0 && j < 9 && cells[i - 1][j + 1].mine) cells[i][j].count++;
    if (j > 0 && cells[i][j - 1].mine) cells[i][j].count++;
    if (j < 9 && cells[i][j + 1].mine) cells[i][j].count++;
    if (i < 9 && j > 0 && cells[i + 1][j - 1].mine) cells[i][j].count++;
    if (i < 9 && cells[i + 1][j].mine) cells[i][j].count++;
    if (i < 9 && j < 9 && cells[i + 1][j + 1].mine) cells[i][j].count++;
    }
    }
    }

    // 点击事件处
    board.addEventListener("click", (event) => {
    if (gameover) return;
    let cell = event.target;
    let i = cell.parentNode.rowIndex;
    let j = cell.cellIndex;
    if (cells[i][j].revealed || cells[i][j].flag) return;
    if (cells[i][j].mine) {
    cell.classList.add("mine");
    gameover = true;
    revealMines();
    } else {
    reveal(i, j);
    if (--remaining === 0) {
    alert("You win!");
    }
    }
    });

    board.addEventListener("contextmenu", (event) => {
    event.preventDefault();
    let cell = event.target;
    let i = cell.parentNode.rowIndex;
    let j = cell.cellIndex;
    if (cells[i][j].revealed || gameover) return;
    if (!cells[i][j].flag) {
    cell.classList.add("flag");
    cells[i][j].flag = true;
    } else {
    cell.classList.remove("flag");
    cells[i][j].flag = false;
    }
    });

    // 递归揭示周围安全区域
    function reveal(i, j) {
    if (i < 0 || i > 9 || j < 0 || j > 9) return;
    if (cells[i][j].revealed || cells[i][j].flag) return;
    let cell = board.rows[i].cells[j];
    cell.classList.add("revealed");
    cells[i][j].revealed = true;
    if (cells[i][j].count === 0) {
    reveal(i - 1, j - 1);
    reveal(i - 1, j);
    reveal(i - 1, j + 1);
    reveal(i, j - 1);
    reveal(i, j + 1);
    reveal(i + 1, j - 1);
    reveal(i + 1, j);
    reveal(i + 1, j + 1);
    } else {
    cell.textContent = cells[i][j].count;
    }
    }

    // 显示所有地雷
    function revealMines() {
    for (let i = 0; i < 10; i++) {
    for (let j = 0; j < 10; j++) {
    if (cells[i][j].mine) {
    let cell = board.rows[i].cells[j];
    cell.classList.add("mine");
    }
    }
    }
    }
    </script>
    </body>
    </html>