jiangdi0924/gist:25651a4f351e2c7cc6b445f9ac3dad59

## gistfile1.txt
<!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>
	<!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>