用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
};
// 更新UI
updateMinesCount();
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];
// 更新UI
const 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;
// 更新UI
const 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>