扫雷-HTML

!DOCTYPE htmlhtml langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title扫雷游戏/titlestyle* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);min-height: 100vh;display: flex;justify-content: center;align-items: center;padding: 20px;}.game-container {background: white;border-radius: 20px;padding: 30px;box-shadow: 0 20px 60px rgba(0,0,0,0.3);}h1 {text-align: center;color: #333;margin-bottom: 20px;font-size: 2.5em;}.controls {display: flex;justify-content: center;gap: 15px;margin-bottom: 20px;flex-wrap: wrap;}.controls select, .controls button {padding: 10px 20px;font-size: 16px;border: 2px solid #667eea;border-radius: 10px;cursor: pointer;background: white;transition: all 0.3s;}.controls button {background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);color: white;border: none;}.controls button:hover {transform: translateY(-2px);box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);}.status-bar {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;padding: 15px;background: #f5f5f5;border-radius: 10px;}.status-item {font-size: 18px;color: #333;}.status-item span {font-weight: bold;color: #667eea;}.emoji-btn {font-size: 32px;cursor: pointer;background: none;border: none;transition: transform 0.2s;}.emoji-btn:hover {transform: scale(1.2);}.game-board {display: grid;gap: 2px;background: #bbada0;padding: 5px;border-radius: 10px;margin: 0 auto;width: fit-content;}.cell {width: 40px;height: 40px;display: flex;justify-content: center;align-items: center;font-size: 20px;font-weight: bold;cursor: pointer;border-radius: 5px;transition: all 0.1s;user-select: none;}.cell.hidden {background: linear-gradient(145deg, #c9c9c9, #d9d9d9);box-shadow: 2px 2px 5px rgba(0,0,0,0.1);}.cell.hidden:hover {background: linear-gradient(145deg, #d9d9d9, #e9e9e9);transform: scale(1.05);}.cell.revealed {background: #e0e0e0;cursor: default;}.cell.flagged {background: linear-gradient(145deg, #c9c9c9, #d9d9d9);}.cell.mine {background: #ff4444;}.cell.mine-revealed {background: #ff4444;animation: shake 0.5s;}keyframes shake {0%, 100% { transform: translateX(0); }25% { transform: translateX(-5px); }75% { transform: translateX(5px); }}.cell[data-number1] { color: #1976d2; }.cell[data-number2] { color: #388e3c; }.cell[data-number3] { color: #d32f2f; }.cell[data-number4] { color: #7b1fa2; }.cell[data-number5] { color: #ff8f00; }.cell[data-number6] { color: #0097a7; }.cell[data-number7] { color: #424242; }.cell[data-number8] { color: #9e9e9e; }.message {text-align: center;font-size: 24px;font-weight: bold;margin-top: 20px;min-height: 30px;}.message.win {color: #4caf50;}.message.lose {color: #f44336;}.instructions {margin-top: 20px;padding: 15px;background: #f0f0f0;border-radius: 10px;font-size: 14px;color: #666;}.instructions h3 {margin-bottom: 10px;color: #333;}.instructions ul {margin-left: 20px;}.instructions li {margin: 5px 0;}/style/headbodydiv classgame-containerh1 扫雷 /h1div classcontrolsselect iddifficultyoption valueeasy简单 (9×9, 10 雷)/optionoption valuemedium selected中等 (16×16, 40 雷)/optionoption valuehard困难 (30×16, 99 雷)/option/selectbutton onclickinitGame() 新游戏/button/divdiv classstatus-bardiv classstatus-item 地雷span idmine-count40/span/divbutton classemoji-btn idface-btn onclickinitGame()/buttondiv classstatus-item⏱️ 时间span idtimer0/span/div/divdiv classgame-board idgame-board/divdiv classmessage idmessage/divdiv classinstructionsh3 游戏规则/h3ulli左键点击揭开方块/lili右键点击标记/取消标记地雷/lili揭开数字表示周围 8 格的地雷数量/lili揭开所有非雷方块即可获胜/lili点到地雷就游戏结束/li/ul/div/divscriptconst difficulties {easy: { rows: 9, cols: 9, mines: 10 },medium: { rows: 16, cols: 16, mines: 40 },hard: { rows: 16, cols: 30, mines: 99 }};let currentDifficulty medium;let board [];let revealed [];let flagged [];let gameOver false;let timer 0;let timerInterval null;let firstClick true;function initGame() {const settings difficulties[currentDifficulty];board [];revealed [];flagged [];gameOver false;timer 0;firstClick true;if (timerInterval) {clearInterval(timerInterval);timerInterval null;}document.getElementById(timer).textContent 0;document.getElementById(mine-count).textContent settings.mines;document.getElementById(face-btn).textContent ;document.getElementById(message).textContent ;document.getElementById(message).className message;for (let i 0; i settings.rows; i) {board[i] [];revealed[i] [];flagged[i] [];for (let j 0; j settings.cols; j) {board[i][j] 0;revealed[i][j] false;flagged[i][j] false;}}renderBoard();}function placeMines(excludeRow, excludeCol) {const settings difficulties[currentDifficulty];let minesPlaced 0;while (minesPlaced settings.mines) {const row Math.floor(Math.random() * settings.rows);const col Math.floor(Math.random() * settings.cols);// 排除第一次点击的位置及其周围if (Math.abs(row - excludeRow) 1 Math.abs(col - excludeCol) 1) {continue;}if (board[row][col] 0) {board[row][col] -1; // -1 表示地雷minesPlaced;}}// 计算每个格子周围的地雷数for (let i 0; i settings.rows; i) {for (let j 0; j settings.cols; j) {if (board[i][j] ! -1) {board[i][j] countAdjacentMines(i, j);}}}}function countAdjacentMines(row, col) {const settings difficulties[currentDifficulty];let count 0;for (let i -1; i 1; i) {for (let j -1; j 1; j) {const newRow row i;const newCol col j;if (newRow 0 newRow settings.rows newCol 0 newCol settings.cols) {if (board[newRow][newCol] -1) {count;}}}}return count;}function revealCell(row, col) {const settings difficulties[currentDifficulty];if (gameOver || revealed[row][col] || flagged[row][col]) {return;}// 第一次点击时放置地雷if (firstClick) {firstClick false;placeMines(row, col);startTimer();}revealed[row][col] true;const cell document.querySelector([data-row${row}][data-col${col}]);if (board[row][col] -1) {// 点到地雷游戏结束gameOver true;cell.classList.remove(hidden);cell.classList.add(mine-revealed);cell.textContent ;document.getElementById(face-btn).textContent ;document.getElementById(message).textContent 游戏结束你踩到地雷了;document.getElementById(message).className message lose;revealAllMines();stopTimer();return;}cell.classList.remove(hidden);cell.classList.add(revealed);if (board[row][col] 0) {cell.textContent board[row][col];cell.setAttribute(data-number, board[row][col]);} else {// 空格子递归揭开周围格子for (let i -1; i 1; i) {for (let j -1; j 1; j) {const newRow row i;const newCol col j;if (newRow 0 newRow settings.rows newCol 0 newCol settings.cols) {revealCell(newRow, newCol);}}}}checkWin();}function toggleFlag(row, col) {if (gameOver || revealed[row][col]) {return;}const settings difficulties[currentDifficulty];const cell document.querySelector([data-row${row}][data-col${col}]);if (flagged[row][col]) {flagged[row][col] false;cell.classList.remove(flagged);cell.textContent ;document.getElementById(mine-count).textContent parseInt(document.getElementById(mine-count).textContent) 1;} else {flagged[row][col] true;cell.classList.add(flagged);cell.textContent ;document.getElementById(mine-count).textContent parseInt(document.getElementById(mine-count).textContent) - 1;}}function revealAllMines() {const settings difficulties[currentDifficulty];for (let i 0; i settings.rows; i) {for (let j 0; j settings.cols; j) {if (board[i][j] -1) {const cell document.querySelector([data-row${i}][data-col${j}]);cell.classList.remove(hidden);if (flagged[i][j]) {cell.classList.add(revealed);} else {cell.classList.add(mine-revealed);}cell.textContent ;}}}}function checkWin() {const settings difficulties[currentDifficulty];let unrevealedSafeCells 0;for (let i 0; i settings.rows; i) {for (let j 0; j settings.cols; j) {if (!revealed[i][j] board[i][j] ! -1) {unrevealedSafeCells;}}}if (unrevealedSafeCells 0) {gameOver true;document.getElementById(face-btn).textContent ;document.getElementById(message).textContent 恭喜你赢了;document.getElementById(message).className message win;stopTimer();}}function startTimer() {timerInterval setInterval(() {timer;document.getElementById(timer).textContent timer;}, 1000);}function stopTimer() {if (timerInterval) {clearInterval(timerInterval);timerInterval null;}}function renderBoard() {const settings difficulties[currentDifficulty];const gameBoard document.getElementById(game-board);gameBoard.innerHTML ;gameBoard.style.gridTemplateColumns repeat(${settings.cols}, 40px);for (let i 0; i settings.rows; i) {for (let j 0; j settings.cols; j) {const cell document.createElement(div);cell.className cell hidden;cell.dataset.row i;cell.dataset.col j;cell.addEventListener(click, () revealCell(i, j));cell.addEventListener(contextmenu, (e) {e.preventDefault();toggleFlag(i, j);});gameBoard.appendChild(cell);}}}document.getElementById(difficulty).addEventListener(change, (e) {currentDifficulty e.target.value;initGame();});// 初始化游戏initGame();/script/body/html