当前位置：首页 > news >正文

DeepSeek扫雷游戏网页版HTML5(附源码)

news 2025/7/6 12:47:21

用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>