<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页扫雷游戏</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-top: 20px;
background-color: #ddd;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.game-info {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
font-size: 18px;
}
.minesweeper-board {
display: grid;
grid-template-columns: repeat(10, 30px);
grid-gap: 2px;
}
.cell {
width: 30px;
height: 30px;
background-color: #bbb;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
cursor: pointer;
user-select: none;
border: 2px outset #eee;
}
.cell.revealed {
background-color: #eee;
border: 1px solid #ccc;
}
.cell.mine {
background-color: #f00;
color: white;
}
.cell.flagged {
background-color: #bbb;
color: #f00;
}
.controls {
margin-top: 20px;
}
button {
padding: 8px 16px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.color-1 { color: blue; }
.color-2 { color: green; }
.color-3 { color: red; }
.color-4 { color: darkblue; }
.color-5 { color: brown; }
.color-6 { color: teal; }
.color-7 { color: black; }
.color-8 { color: gray; }
</style>
</head>
<body>
<h1>扫雷游戏</h1>
<div class="game-container">
<div class="game-info">
<div>剩余地雷: <span id="mines-left">10</span></div>
<div>时间: <span id="time">0</span>秒</div>
</div>
<div class="minesweeper-board" id="board"></div>
</div>
<div class="controls">
<button id="restart-btn">重新开始</button>
<div style="margin-top: 10px;">
<label>难度: </label>
<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>
</div>
</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,
startTime: 0,
timer: null
};
// DOM元素
const boardElement = document.getElementById('board');
const minesLeftElement = document.getElementById('mines-left');
const timeElement = document.getElementById('time');
const restartBtn = document.getElementById('restart-btn');
const difficultySelect = document.getElementById('difficulty');
// 初始化游戏
function initGame(difficulty = 'easy') {
const { rows, cols, mines } = config[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,
startTime: 0,
timer: null
};
// 更新UI
minesLeftElement.textContent = mines;
timeElement.textContent = '0';
// 清除之前的计时器
if (gameState.timer) {
clearInterval(gameState.timer);
gameState.timer = null;
}
// 创建游戏板
boardElement.innerHTML = '';
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[difficultySelect.value];
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 (!gameState.board[row][col] && !isFirstClickArea) {
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();
gameState.gameOver = true;
endGame(false);
return;
}
// 揭示格子
revealCell(row, col);
// 检查是否获胜
checkWin();
}
// 处理右键点击（插旗）
function handleRightClick(row, col) {
if (gameState.gameOver || gameState.revealed[row][col]) return;
const cell = getCellElement(row, col);
if (gameState.flagged[row][col]) {
// 取消旗子
gameState.flagged[row][col] = false;
cell.textContent = '';
cell.classList.remove('flagged');
minesLeftElement.textContent = parseInt(minesLeftElement.textContent) + 1;
} else {
// 放置旗子
gameState.flagged[row][col] = true;
cell.textContent = '🚩';
cell.classList.add('flagged');
minesLeftElement.textContent = parseInt(minesLeftElement.textContent) - 1;
}
}
// 揭示格子
function revealCell(row, col) {
if (gameState.revealed[row][col] || gameState.flagged[row][col]) return;
const { rows, cols } = config[difficultySelect.value];
const cell = getCellElement(row, col);
gameState.revealed[row][col] = true;
cell.classList.add('revealed');
if (gameState.board[row][col] > 0) {
// 显示周围地雷数量
cell.textContent = gameState.board[row][col];
cell.classList.add(`color-${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[difficultySelect.value];
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('revealed', 'mine');
cell.textContent = '💣';
}
}
}
}
// 开始计时器
function startTimer() {
gameState.startTime = Date.now();
gameState.timer = setInterval(() => {
const elapsed = Math.floor((Date.now() - gameState.startTime) / 1000);
timeElement.textContent = elapsed;
}, 1000);
}
// 结束游戏
function endGame(isWin) {
clearInterval(gameState.timer);
gameState.gameOver = true;
gameState.gameWon = isWin;
if (isWin) {
setTimeout(() => alert('恭喜你赢了！'), 100);
} else {
setTimeout(() => alert('游戏结束！你踩到地雷了！'), 100);
}
}
// 检查是否获胜
function checkWin() {
const { rows, cols } = config[difficultySelect.value];
let allNonMinesRevealed = true;
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
if (gameState.board[row][col] !== -1 && !gameState.revealed[row][col]) {
allNonMinesRevealed = false;
break;
}
}
if (!allNonMinesRevealed) break;
}
if (allNonMinesRevealed) {
endGame(true);
}
}
// 获取格子元素
function getCellElement(row, col) {
const { cols } = config[difficultySelect.value];
return boardElement.children[row * cols + col];
}
// 事件监听器
restartBtn.addEventListener('click', () => initGame(difficultySelect.value));
difficultySelect.addEventListener('change', () => initGame(difficultySelect.value));
// 初始化游戏
initGame();
</script>
</body>
</html>
index.html
index.html