源代码在最后面 点赞❤️ 关注⭐️谢谢😜
实现功能
- 随机扫雷
- 自定义地雷数、游戏棋盘大小
- 插旗
效果图（部分图片）
源代码
<!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>
