經典掃雷游戲實現：從零構建HTML5掃雷游戲

一、引言

????????掃雷是一款經典的單人益智游戲，起源于20世紀60年代，并在90年代隨著Windows操作系統的普及而風靡全球。本文將詳細介紹如何使用現代網頁技術（HTML、CSS和JavaScript）從零開始構建一個功能完整的掃雷游戲。我們將涵蓋游戲邏輯設計、用戶界面實現以及性能優化等方面。

二、游戲概述

掃雷游戲的核心規則很簡單：

游戲在一個方格棋盤上進行，某些隨機方格中隱藏著"地雷"
玩家需要揭開所有不含地雷的方格
揭開方格后會顯示周圍8個方格中的地雷數量
玩家可以標記他們認為有地雷的方格
如果揭開一個地雷，游戲立即結束

三、技術實現

HTML結構

游戲的基本HTML結構包括：

游戲標題和難度選擇按鈕
游戲信息顯示區域（剩余地雷數、計時器、重置按鈕）
游戲棋盤
游戲狀態和統計信息顯示

<div class="game-container"><header><h1><i class="fas fa-bomb"></i> 經典掃雷</h1><div class="game-controls"><div class="difficulty-selector"><button class="active" data-level="easy">簡單</button><button data-level="medium">中等</button><button data-level="hard">困難</button></div><div class="game-info"><span class="flags"><i class="fas fa-flag"></i> <span id="flag-count">10</span></span><button id="reset-btn"><i class="fas fa-redo"></i></button><span class="timer"><i class="fas fa-clock"></i> <span id="time">0</span></span></div></div></header><div class="game-board" id="game-board"></div><div class="game-status"><div id="message"></div><div class="game-stats"><div>最佳時間: <span id="best-time">-</span>秒</div><div>當前勝率: <span id="win-rate">0%</span></div></div></div>
</div>

JavaScript游戲邏輯

游戲的核心邏輯包括：

?游戲初始化?
- 創建棋盤數據結構
- 隨機放置地雷
- 計算每個方格周圍的地雷數量

function initGame() {// 初始化游戲狀態boardData = [];// 創建游戲板數據for (let i = 0; i < boardSize * boardSize; i++) {boardData.push({isMine: false,isRevealed: false,isFlagged: false,neighborMines: 0});}// 放置地雷let minesPlaced = 0;while (minesPlaced < mineCount) {const randomIndex = Math.floor(Math.random() * boardSize * boardSize);if (!boardData[randomIndex].isMine) {boardData[randomIndex].isMine = true;minesPlaced++;}}// 計算每個格子周圍的地雷數for (let i = 0; i < boardSize; i++) {for (let j = 0; j < boardSize; j++) {const index = i * boardSize + j;if (!boardData[index].isMine) {boardData[index].neighborMines = countAdjacentMines(i, j);}}}
}

?游戲交互處理?
- 左鍵點擊揭開方格
- 右鍵點擊標記/取消標記方格
- 遞歸揭開空白區域

function handleCellClick(row, col) {if (gameOver) return;const index = row * boardSize + col;const cell = board.children[index];const cellData = boardData[index];if (cellData.isRevealed || cellData.isFlagged) return;if (cellData.isMine) {// 點到地雷，游戲結束gameOver = true;revealAllMines();messageElement.textContent = '游戲結束！';return;}revealCell(row, col);// 檢查是否獲勝if (revealedCount === boardSize * boardSize - mineCount) {gameOver = true;messageElement.textContent = '恭喜你贏了！';}
}

?游戲狀態管理?
- 計時器
- 勝負判斷
- 游戲統計信息

function startTimer() {clearInterval(timerInterval);timerInterval = setInterval(() => {timer++;timerElement.textContent = timer;}, 1000);
}function updateStats() {bestTimeElement.textContent = bestTime === Infinity ? '-' : bestTime;winRateElement.textContent = gamesPlayed > 0 ? `${Math.round((gamesWon / gamesPlayed) * 100)}%` : '0%';
}

CSS樣式設計

游戲的視覺設計采用現代、簡潔的風格，使用CSS Grid布局實現響應式棋盤：

.game-board {display: grid;grid-template-columns: repeat(10, 1fr);gap: 3px;background: #bdc3c7;padding: 5px;border-radius: 5px;
}.cell {aspect-ratio: 1/1;display: flex;justify-content: center;align-items: center;background: #ecf0f1;border-radius: 3px;cursor: pointer;
}.cell.revealed {background: #d5dbdb;
}.cell.flagged {background: #f9e79f;
}.cell.mine {background: #e74c3c;color: white;
}

四、功能亮點

?多種難度級別?：提供簡單、中等和困難三種難度選擇
?游戲統計?：記錄最佳時間和勝率
?響應式設計?：適配不同屏幕尺寸
?本地存儲?：使用localStorage保存最佳成績
?視覺反饋?：不同的數字使用不同顏色，提高可讀性

五、技術細節解析

地雷生成算法

游戲使用Fisher-Yates洗牌算法的簡化版本來隨機放置地雷：

let minesPlaced = 0;
while (minesPlaced < mineCount) {const randomIndex = Math.floor(Math.random() * boardSize * boardSize);if (!boardData[randomIndex].isMine) {boardData[randomIndex].isMine = true;minesPlaced++;}
}

遞歸揭開空白區域

當玩家點擊一個周圍沒有地雷的方格時，游戲會自動遞歸揭開所有相鄰的空白方格：

function revealCell(row, col) {// ...if (cellData.neighborMines > 0) {cell.textContent = cellData.neighborMines;cell.style.color = getNumberColor(cellData.neighborMines);} else {// 遞歸揭示周圍的格子for (let i = Math.max(0, row - 1); i <= Math.min(boardSize - 1, row + 1); i++) {for (let j = Math.max(0, col - 1); j <= Math.min(boardSize - 1, col + 1); j++) {if (i === row && j === col) continue;revealCell(i, j);}}}
}

數字顏色編碼

為了提升游戲體驗，不同數字使用不同顏色表示：

function getNumberColor(num) {const colors = ['',       // 0'#1976D2', // 1'#388E3C', // 2'#D32F2F', // 3'#7B1FA2', // 4'#FF8F00', // 5'#0097A7', // 6'#5D4037', // 7'#616161'  // 8];return colors[num];
}

六、性能優化

?事件委托?：使用事件委托減少事件監聽器數量
?CSS硬件加速?：使用transform屬性實現平滑動畫
?最小化重繪?：只在必要時更新DOM
?內存管理?：合理使用數據結構減少內存占用

七、擴展功能建議

添加音效和動畫效果
實現多人對戰模式
添加成就系統
支持自定義棋盤大小和地雷數量
添加教程和新手引導

八、總結

通過本文的介紹，我們完整實現了一個功能豐富的掃雷游戲。這個項目涵蓋了現代Web開發的多個重要方面，包括：

DOM操作和事件處理
游戲狀態管理
遞歸算法應用
響應式設計
本地存儲使用

這個掃雷游戲不僅具有娛樂性，同時也是學習JavaScript和前端開發的優秀示例項目。讀者可以在此基礎上進一步擴展功能，或者優化現有實現。

完整代碼：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>經典掃雷</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head><body><div class="game-container"><header><h1><i class="fas fa-bomb"></i> 經典掃雷</h1><div class="game-controls"><div class="difficulty-selector"><button class="active" data-level="easy">簡單</button><button data-level="medium">中等</button><button data-level="hard">困難</button></div><div class="game-info"><span class="flags"><i class="fas fa-flag"></i> <span id="flag-count">10</span></span><button id="reset-btn"><i class="fas fa-redo"></i></button><span class="timer"><i class="fas fa-clock"></i> <span id="time">0</span></span></div></div></header><div class="game-board" id="game-board"></div><div class="game-status"><div id="message"></div><div class="game-stats"><div>最佳時間: <span id="best-time">-</span>秒</div><div>當前勝率: <span id="win-rate">0%</span></div></div></div></div><script>document.addEventListener('DOMContentLoaded', () => {const board = document.getElementById('game-board');const flagCountElement = document.getElementById('flag-count');const timerElement = document.getElementById('time');const messageElement = document.getElementById('message');const resetButton = document.getElementById('reset-btn');const difficultyButtons = document.querySelectorAll('.difficulty-selector button');const bestTimeElement = document.getElementById('best-time');const winRateElement = document.getElementById('win-rate');let boardSize = 10;let mineCount = 10;let boardData = [];let revealedCount = 0;let flagCount = 0;let gameOver = false;let timer = 0;let timerInterval = null;let gamesPlayed = 0;let gamesWon = 0;let bestTime = localStorage.getItem('minesweeperBestTime') || Infinity;// 初始化游戲function initGame() {clearInterval(timerInterval);timer = 0;timerElement.textContent = timer;revealedCount = 0;flagCount = 0;flagCountElement.textContent = mineCount;gameOver = false;messageElement.textContent = '';board.innerHTML = '';boardData = [];// 創建游戲板數據for (let i = 0; i < boardSize * boardSize; i++) {boardData.push({isMine: false,isRevealed: false,isFlagged: false,neighborMines: 0});}// 放置地雷let minesPlaced = 0;while (minesPlaced < mineCount) {const randomIndex = Math.floor(Math.random() * boardSize * boardSize);if (!boardData[randomIndex].isMine) {boardData[randomIndex].isMine = true;minesPlaced++;}}// 計算每個格子周圍的地雷數for (let i = 0; i < boardSize; i++) {for (let j = 0; j < boardSize; j++) {const index = i * boardSize + j;if (!boardData[index].isMine) {boardData[index].neighborMines = countAdjacentMines(i, j);}}}// 創建游戲板UIfor (let i = 0; i < boardSize; i++) {for (let j = 0; j < boardSize; j++) {const index = i * boardSize + j;const cell = document.createElement('div');cell.className = 'cell';cell.dataset.row = i;cell.dataset.col = j;cell.addEventListener('click', () => handleCellClick(i, j));cell.addEventListener('contextmenu', (e) => {e.preventDefault();handleRightClick(i, j);});board.appendChild(cell);}}// 調整游戲板大小board.style.gridTemplateColumns = `repeat(${boardSize}, 1fr)`;}// 計算相鄰地雷數function countAdjacentMines(row, col) {let count = 0;for (let i = Math.max(0, row - 1); i <= Math.min(boardSize - 1, row + 1); i++) {for (let j = Math.max(0, col - 1); j <= Math.min(boardSize - 1, col + 1); j++) {if (i === row && j === col) continue;const index = i * boardSize + j;if (boardData[index].isMine) count++;}}return count;}// 處理格子點擊function handleCellClick(row, col) {if (gameOver) return;const index = row * boardSize + col;const cell = board.children[index];const cellData = boardData[index];// 開始游戲時啟動計時器if (revealedCount === 0 && !cellData.isFlagged) {startTimer();}if (cellData.isRevealed || cellData.isFlagged) return;if (cellData.isMine) {// 點到地雷，游戲結束gameOver = true;revealAllMines();cell.classList.add('mine');messageElement.textContent = '游戲結束！';clearInterval(timerInterval);gamesPlayed++;updateStats();return;}revealCell(row, col);// 檢查是否獲勝if (revealedCount === boardSize * boardSize - mineCount) {gameOver = true;messageElement.textContent = '恭喜你贏了！';clearInterval(timerInterval);gamesWon++;if (timer < bestTime) {bestTime = timer;localStorage.setItem('minesweeperBestTime', bestTime);bestTimeElement.textContent = bestTime;}updateStats();}}// 處理右鍵點擊（插旗）function handleRightClick(row, col) {if (gameOver) return;const index = row * boardSize + col;const cell = board.children[index];const cellData = boardData[index];if (cellData.isRevealed) return;if (cellData.isFlagged) {// 取消旗子cellData.isFlagged = false;cell.classList.remove('flagged');flagCount--;} else {// 插旗cellData.isFlagged = true;cell.classList.add('flagged');flagCount++;}flagCountElement.textContent = mineCount - flagCount;}// 揭示格子function revealCell(row, col) {const index = row * boardSize + col;const cell = board.children[index];const cellData = boardData[index];if (cellData.isRevealed || cellData.isFlagged) return;cellData.isRevealed = true;cell.classList.add('revealed');revealedCount++;if (cellData.neighborMines > 0) {cell.textContent = cellData.neighborMines;cell.style.color = getNumberColor(cellData.neighborMines);} else {// 如果是空白格子，遞歸揭示周圍的格子for (let i = Math.max(0, row - 1); i <= Math.min(boardSize - 1, row + 1); i++) {for (let j = Math.max(0, col - 1); j <= Math.min(boardSize - 1, col + 1); j++) {if (i === row && j === col) continue;revealCell(i, j);}}}}// 獲取數字顏色function getNumberColor(num) {const colors = ['',       // 0'#1976D2', // 1'#388E3C', // 2'#D32F2F', // 3'#7B1FA2', // 4'#FF8F00', // 5'#0097A7', // 6'#5D4037', // 7'#616161'  // 8];return colors[num];}// 揭示所有地雷function revealAllMines() {for (let i = 0; i < boardSize; i++) {for (let j = 0; j < boardSize; j++) {const index = i * boardSize + j;if (boardData[index].isMine) {const cell = board.children[index];cell.classList.add('mine');cell.innerHTML = '<i class="fas fa-bomb"></i>';}}}}// 開始計時器function startTimer() {clearInterval(timerInterval);timerInterval = setInterval(() => {timer++;timerElement.textContent = timer;}, 1000);}// 更新統計信息function updateStats() {bestTimeElement.textContent = bestTime === Infinity ? '-' : bestTime;winRateElement.textContent = gamesPlayed > 0 ? `${Math.round((gamesWon / gamesPlayed) * 100)}%` : '0%';}// 設置難度級別function setDifficulty(level) {difficultyButtons.forEach(btn => btn.classList.remove('active'));event.target.classList.add('active');switch (level) {case 'easy':boardSize = 10;mineCount = 10;break;case 'medium':boardSize = 16;mineCount = 40;break;case 'hard':boardSize = 20;mineCount = 80;break;}initGame();}// 事件監聽resetButton.addEventListener('click', initGame);difficultyButtons.forEach(btn => {btn.addEventListener('click', () => setDifficulty(btn.dataset.level));});// 初始化游戲initGame();updateStats();});</script>
</body>
<style>body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);margin: 0;padding: 20px;min-height: 100vh;display: flex;justify-content: center;align-items: center;}.game-container {background: white;border-radius: 15px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);padding: 25px;width: 100%;max-width: 800px;}header h1 {color: #2c3e50;text-align: center;margin-bottom: 20px;}.game-controls {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;flex-wrap: wrap;gap: 15px;}.difficulty-selector button {padding: 8px 15px;border: none;border-radius: 5px;background: #ecf0f1;cursor: pointer;transition: all 0.3s;}.difficulty-selector button.active {background: #3498db;color: white;}.game-info {display: flex;align-items: center;gap: 15px;}#reset-btn {background: #e74c3c;color: white;border: none;width: 40px;height: 40px;border-radius: 50%;cursor: pointer;transition: all 0.3s;}#reset-btn:hover {transform: rotate(360deg);}.flags,.timer {font-weight: bold;color: #2c3e50;}.game-board {display: grid;grid-template-columns: repeat(10, 1fr);gap: 3px;margin: 0 auto;background: #bdc3c7;padding: 5px;border-radius: 5px;}.cell {aspect-ratio: 1/1;display: flex;justify-content: center;align-items: center;background: #ecf0f1;border-radius: 3px;cursor: pointer;font-weight: bold;user-select: none;transition: all 0.2s;}.cell:hover {background: #d6eaf8;}.cell.revealed {background: #d5dbdb;}.cell.flagged {background: #f9e79f;}.cell.mine {background: #e74c3c;color: white;}.game-status {margin-top: 20px;text-align: center;}#message {font-size: 1.2em;font-weight: bold;min-height: 24px;margin-bottom: 10px;}.game-stats {display: flex;justify-content: center;gap: 20px;color: #7f8c8d;}@media (max-width: 600px) {.game-board {grid-template-columns: repeat(8, 1fr);}}
</style></html>