使用H5写一个网页版的简单扫雷游戏

创建一个简单的网页版扫雷游戏涉及HTML5、CSS和JavaScript的使用。以下是一个基本示例，说明如何开始构建这样一个游戏：

1. HTML结构

首先，你需要创建HTML结构来放置游戏区域。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扫雷游戏</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>简单扫雷游戏</h1>
    <div id="game-board"></div>
    <script src="script.js"></script>
</body>
</html>

2. CSS样式

然后，你可以添加一些基本的CSS来美化游戏区域。

/* styles.css */
#game-board {
    display: grid;
    grid-template-columns: repeat(8, 30px);
    grid-template-rows: repeat(8, 30px);
    gap: 2px;
}

.cell {
    width: 30px;
    height: 30px;
    background-color: #b5b5b5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
}

.cell.open {
    background-color: #d3d3d3;
}

.cell.mine {
    background-color: red;
}

3. JavaScript逻辑

最后，你需要添加JavaScript来处理游戏逻辑。

// script.js
const gameBoard = document.getElementById('game-board');
const boardSize = 8;
const mineCount = 10;
let cells = [];
let revealedCells = 0;
let gameEnded = false;

function initializeGame() {
    cells = [];
    revealedCells = 0;
    gameEnded = false;
    gameBoard.innerHTML = '';
    for (let i = 0; i < boardSize * boardSize; i++) {
        const cell = document.createElement('div');
        cell.classList.add('cell');
        cell.addEventListener('click', () => handleCellClick(i));
        gameBoard.appendChild(cell);
        cells.push({ hasMine: false, revealed: false, adjacentMines: 0 });
    }
    placeMines();
}

function placeMines() {
    let placedMines = 0;
    while (placedMines < mineCount) {
        const randomIndex = Math.floor(Math.random() * cells.length);
        if (!cells[randomIndex].hasMine) {
            cells[randomIndex].hasMine = true;
            placedMines++;
            updateAdjacentMines(randomIndex);
        }
    }
}

function updateAdjacentMines(index) {
    const [row, col] = getIndexCoordinates(index);
    const directions = [
        [-1, -1], [-1, 0], [-1, 1], [0, -1], [0, 1], [1, -1], [1, 0], [1, 1]
    ];
    directions.forEach(([dx, dy]) => {
        const newRow = row + dx;
        const newCol = col + dy;
        if (isValidCell(newRow, newCol) && cells[getCellIndex(newRow, newCol)].hasMine) {
            cells[index].adjacentMines++;
        }
    });
}

function handleCellClick(index) {
    if (gameEnded) return;
    const cell = cells[index];
    if (!cell.revealed) {
        cell.revealed = true;
        revealedCells++;
        const cellElement = gameBoard.children[index];
        if (cell.hasMine) {
            cellElement.classList.add('mine');
            gameEnded = true;
            alert('游戏结束！你踩到雷了！');
        } else {
            cellElement.classList.add('open');
            cellElement.textContent = cell.adjacentMines > 0 ? cell.adjacentMines : '';
            if (revealedCells === boardSize * boardSize - mineCount) {
                alert('恭喜你赢了！');
                gameEnded = true;
            }
        }
    }
}

function getIndexCoordinates(index) {
    return [Math.floor(index / boardSize), index % boardSize];
}

function getCellIndex(row, col) {
    return row * boardSize + col;
}

function isValidCell(row, col) {
    return row >= 0 && row < boardSize && col >= 0 && col < boardSize;
}

initializeGame();