DeepSeek掃雷游戲網頁版HTML5(附源碼)

用DeepSeek幫忙生成一個網頁版的掃雷游戲，效果非常棒，基于HTML5實現，方便運行。
提示詞prompt
幫我做一個網頁版的 html5 掃雷游戲
在這里插入圖片描述

游戲功能說明

游戲難度：
1 簡單：10×10 格子，10個地雷
2 中等：16×16 格子，40個地雷
3 困難：30×16 格子，99個地雷
游戲操作：
左鍵點擊：揭開格子
右鍵點擊：標記/取消標記地雷
笑臉按鈕：重新開始游戲
新游戲按鈕：選擇難度后重新開始
游戲界面：
頂部顯示剩余地雷數和計時器
中間是游戲棋盤
底部是難度選擇和新游戲按鈕
游戲規則：
第一次點擊永遠不會點到地雷
點擊到地雷游戲結束
揭開所有非地雷格子獲勝
數字表示周圍8個格子中的地雷數量
使用方法
將上面的代碼復制到一個文本編輯器中
保存為 .html 文件（例如 minesweeper.html）
在瀏覽器中打開該文件即可開始游戲
掃雷游戲全部源碼如下：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML5掃雷游戲</title><style>body {font-family: Arial, sans-serif;text-align: center;background-color: #f0f0f0;margin: 0;padding: 20px;}h1 {color: #333;}#game-container {display: inline-block;margin: 20px auto;padding: 10px;background-color: #999;border: 3px solid #666;border-radius: 5px;box-shadow: 0 0 10px rgba(0,0,0,0.3);}#game-info {display: flex;justify-content: space-between;margin-bottom: 10px;padding: 5px;background-color: #ddd;border: 2px solid #666;}#mines-count, #timer {font-size: 20px;font-weight: bold;padding: 5px 10px;background-color: #000;color: #f00;border-radius: 3px;}#board {display: grid;grid-template-columns: repeat(10, 30px);grid-gap: 2px;}.cell {width: 30px;height: 30px;background-color: #bbb;border: 2px outset #eee;display: flex;align-items: center;justify-content: center;font-weight: bold;cursor: pointer;user-select: none;}.cell.revealed {background-color: #ddd;border: 1px solid #999;}.cell.mine {background-color: #f00;}.cell.flagged {background-color: #bbb;}.cell-1 { color: blue; }.cell-2 { color: green; }.cell-3 { color: red; }.cell-4 { color: darkblue; }.cell-5 { color: brown; }.cell-6 { color: teal; }.cell-7 { color: black; }.cell-8 { color: gray; }#controls {margin-top: 20px;}button {padding: 8px 15px;margin: 0 5px;background-color: #4CAF50;color: white;border: none;border-radius: 4px;cursor: pointer;font-size: 16px;}button:hover {background-color: #45a049;}#difficulty {padding: 8px;font-size: 16px;border-radius: 4px;}</style>
</head>
<body><h1>HTML5掃雷游戲</h1><div id="game-container"><div id="game-info"><div id="mines-count">💣 10</div><button id="reset-btn">😊</button><div id="timer">? 0</div></div><div id="board"></div></div><div id="controls"><select id="difficulty"><option value="easy">簡單 (10×10, 10雷)</option><option value="medium">中等 (16×16, 40雷)</option><option value="hard">困難 (30×16, 99雷)</option></select><button id="new-game-btn">新游戲</button></div><script>// 游戲配置const config = {easy: { rows: 10, cols: 10, mines: 10 },medium: { rows: 16, cols: 16, mines: 40 },hard: { rows: 16, cols: 30, mines: 99 }};// 游戲狀態let gameState = {board: [],revealed: [],flagged: [],mines: 0,gameOver: false,gameWon: false,firstClick: true,timer: 0,timerInterval: null,difficulty: 'easy'};// DOM元素const boardElement = document.getElementById('board');const minesCountElement = document.getElementById('mines-count');const timerElement = document.getElementById('timer');const resetButton = document.getElementById('reset-btn');const newGameButton = document.getElementById('new-game-btn');const difficultySelect = document.getElementById('difficulty');// 初始化游戲function initGame() {clearInterval(gameState.timerInterval);gameState.difficulty = difficultySelect.value;const { rows, cols, mines } = config[gameState.difficulty];// 重置游戲狀態gameState = {board: Array(rows).fill().map(() => Array(cols).fill(0)),revealed: Array(rows).fill().map(() => Array(cols).fill(false)),flagged: Array(rows).fill().map(() => Array(cols).fill(false)),mines: mines,gameOver: false,gameWon: false,firstClick: true,timer: 0,timerInterval: null,difficulty: gameState.difficulty};// 更新UIupdateMinesCount();timerElement.textContent = '? 0';resetButton.textContent = '😊';// 創建游戲板createBoard();}// 創建游戲板function createBoard() {boardElement.innerHTML = '';const { rows, cols } = config[gameState.difficulty];// 設置網格布局boardElement.style.gridTemplateColumns = `repeat(${cols}, 30px)`;for (let row = 0; row < rows; row++) {for (let col = 0; col < cols; col++) {const cell = document.createElement('div');cell.className = 'cell';cell.dataset.row = row;cell.dataset.col = col;// 添加事件監聽器cell.addEventListener('click', () => handleCellClick(row, col));cell.addEventListener('contextmenu', (e) => {e.preventDefault();handleRightClick(row, col);});boardElement.appendChild(cell);}}}// 放置地雷function placeMines(firstRow, firstCol) {const { rows, cols } = config[gameState.difficulty];let minesPlaced = 0;while (minesPlaced < gameState.mines) {const row = Math.floor(Math.random() * rows);const col = Math.floor(Math.random() * cols);// 確保第一個點擊的格子及其周圍沒有地雷const isFirstClickArea = Math.abs(row - firstRow) <= 1 && Math.abs(col - firstCol) <= 1;if (!isFirstClickArea && gameState.board[row][col] !== -1) {gameState.board[row][col] = -1; // -1 表示地雷minesPlaced++;// 更新周圍格子的數字for (let r = Math.max(0, row - 1); r <= Math.min(rows - 1, row + 1); r++) {for (let c = Math.max(0, col - 1); c <= Math.min(cols - 1, col + 1); c++) {if (gameState.board[r][c] !== -1) {gameState.board[r][c]++;}}}}}}// 處理格子點擊function handleCellClick(row, col) {if (gameState.gameOver || gameState.flagged[row][col]) return;// 如果是第一次點擊，放置地雷并開始計時if (gameState.firstClick) {placeMines(row, col);gameState.firstClick = false;startTimer();}// 如果點擊的是地雷，游戲結束if (gameState.board[row][col] === -1) {revealAllMines();gameOver(false);return;}// 顯示格子revealCell(row, col);// 檢查是否獲勝checkWin();}// 處理右鍵點擊（標記）function handleRightClick(row, col) {if (gameState.gameOver || gameState.revealed[row][col]) return;// 切換標記狀態gameState.flagged[row][col] = !gameState.flagged[row][col];// 更新UIconst cell = getCellElement(row, col);if (gameState.flagged[row][col]) {cell.textContent = '🚩';} else {cell.textContent = '';}// 更新剩余地雷數updateMinesCount();}// 顯示格子function revealCell(row, col) {const { rows, cols } = config[gameState.difficulty];// 如果已經顯示或標記，則返回if (gameState.revealed[row][col] || gameState.flagged[row][col]) return;// 標記為已顯示gameState.revealed[row][col] = true;// 更新UIconst cell = getCellElement(row, col);cell.classList.add('revealed');// 如果是數字格子，顯示數字if (gameState.board[row][col] > 0) {cell.textContent = gameState.board[row][col];cell.classList.add(`cell-${gameState.board[row][col]}`);} else if (gameState.board[row][col] === 0) {// 如果是空白格子，遞歸顯示周圍格子for (let r = Math.max(0, row - 1); r <= Math.min(rows - 1, row + 1); r++) {for (let c = Math.max(0, col - 1); c <= Math.min(cols - 1, col + 1); c++) {if (r !== row || c !== col) {revealCell(r, c);}}}}}// 顯示所有地雷（游戲結束時）function revealAllMines() {const { rows, cols } = config[gameState.difficulty];for (let row = 0; row < rows; row++) {for (let col = 0; col < cols; col++) {if (gameState.board[row][col] === -1) {const cell = getCellElement(row, col);cell.classList.add('mine');cell.textContent = '💣';}}}}// 獲取格子元素function getCellElement(row, col) {const { cols } = config[gameState.difficulty];return boardElement.children[row * cols + col];}// 開始計時器function startTimer() {gameState.timer = 0;timerElement.textContent = '? 0';gameState.timerInterval = setInterval(() => {gameState.timer++;timerElement.textContent = `? ${gameState.timer}`;}, 1000);}// 更新剩余地雷數顯示function updateMinesCount() {const { rows, cols } = config[gameState.difficulty];let flaggedCount = 0;for (let row = 0; row < rows; row++) {for (let col = 0; col < cols; col++) {if (gameState.flagged[row][col]) {flaggedCount++;}}}minesCountElement.textContent = `💣 ${gameState.mines - flaggedCount}`;}// 檢查是否獲勝function checkWin() {const { rows, cols } = config[gameState.difficulty];let unrevealedSafeCells = 0;for (let row = 0; row < rows; row++) {for (let col = 0; col < cols; col++) {if (!gameState.revealed[row][col] && gameState.board[row][col] !== -1) {unrevealedSafeCells++;}}}if (unrevealedSafeCells === 0) {gameOver(true);}}// 游戲結束function gameOver(isWin) {gameState.gameOver = true;gameState.gameWon = isWin;clearInterval(gameState.timerInterval);if (isWin) {resetButton.textContent = '😎';// 標記所有地雷const { rows, cols } = config[gameState.difficulty];for (let row = 0; row < rows; row++) {for (let col = 0; col < cols; col++) {if (gameState.board[row][col] === -1 && !gameState.flagged[row][col]) {const cell = getCellElement(row, col);cell.textContent = '🚩';gameState.flagged[row][col] = true;}}}updateMinesCount();setTimeout(() => alert('恭喜你贏了！'), 100);} else {resetButton.textContent = '😵';}}// 事件監聽器resetButton.addEventListener('click', initGame);newGameButton.addEventListener('click', initGame);difficultySelect.addEventListener('change', initGame);// 初始化游戲initGame();</script>
</body>
</html>