h5实现扫雷
H5实现扫雷游戏的方法
使用HTML5、CSS和JavaScript可以轻松实现扫雷游戏。以下是关键步骤和代码示例。
游戏界面布局
HTML结构用于创建游戏棋盘和UI元素：
<div id="game">
<div id="controls">
<span id="mines-count">10</span>
<button id="reset">😊</button>
<span id="timer">0</span>
</div>
<div id="board"></div>
</div>CSS样式设置棋盘和单元格外观：
#board {
display: grid;
grid-template-columns: repeat(10, 30px);
grid-gap: 1px;
background: #999;
padding: 1px;
}
.cell {
width: 30px;
height: 30px;
background: #ccc;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
cursor: pointer;
user-select: none;
}
.revealed {
background: #eee;
}
.flagged {
background: #f99;
}游戏逻辑实现
初始化游戏棋盘：
const ROWS = 10;
const COLS = 10;
const MINES = 10;
let board = [];
let revealed = Array(ROWS).fill().map(() => Array(COLS).fill(false));
let flagged = Array(ROWS).fill().map(() => Array(COLS).fill(false));生成随机地雷位置：
function placeMines() {
let minesPlaced = 0;
while (minesPlaced < MINES) {
const x = Math.floor(Math.random() * ROWS);
const y = Math.floor(Math.random() * COLS);
if (!board[x][y].isMine) {
board[x][y].isMine = true;
minesPlaced++;
}
}
}计算每个格子周围的地雷数：
function calculateAdjacentMines() {
for (let x = 0; x < ROWS; x++) {
for (let y = 0; y < COLS; y++) {
if (!board[x][y].isMine) {
let count = 0;
for (let dx = -1; dx <= 1; dx++) {
for (let dy = -1; dy <= 1; dy++) {
const nx = x + dx;
const ny = y + dy;
if (nx >= 0 && nx < ROWS && ny >= 0 && ny < COLS && board[nx][ny].isMine) {
count++;
}
}
}
board[x][y].adjacentMines = count;
}
}
}
}游戏交互处理
单元格点击事件处理：
function handleCellClick(x, y) {
if (revealed[x][y] || flagged[x][y]) return;
revealed[x][y] = true;
if (board[x][y].isMine) {
gameOver(false);
return;
}
if (board[x][y].adjacentMines === 0) {
revealAdjacentCells(x, y);
}
checkWin();
}右键标记地雷功能：
function handleRightClick(x, y, e) {
e.preventDefault();
if (revealed[x][y]) return;
flagged[x][y] = !flagged[x][y];
updateCell(x, y);
updateMinesCount();
}游戏状态管理
检查胜利条件：
function checkWin() {
for (let x = 0; x < ROWS; x++) {
for (let y = 0; y < COLS; y++) {
if (!board[x][y].isMine && !revealed[x][y]) {
return;
}
}
}
gameOver(true);
}游戏结束处理：
function gameOver(isWin) {
if (isWin) {
alert('恭喜你赢了！');
} else {
alert('游戏结束！');
revealAllMines();
}
clearInterval(timer);
}完整实现建议
- 创建HTML文件包含基本结构
- 添加CSS样式美化界面
- 编写JavaScript实现游戏逻辑
- 添加事件监听器处理用户交互
- 实现计时器和地雷计数器功能
- 添加游戏重置功能
可以通过Canvas API或SVG实现更高级的视觉效果，使用localStorage保存游戏记录，或添加难度选择功能增强游戏体验。
