如何利用js+canvas实现扫雷游戏

发布时间：2022-06-08 14:14:41 作者：iii
来源：亿速云阅读：182

如何利用JS+Canvas实现扫雷游戏

扫雷游戏是一款经典的益智游戏，玩家需要通过点击格子来揭示隐藏的地雷，同时根据数字提示推断出安全区域。本文将介绍如何使用JavaScript和HTML5的Canvas技术来实现一个简单的扫雷游戏。

1. 准备工作

首先，我们需要创建一个HTML文件，并在其中引入Canvas元素和JavaScript文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扫雷游戏</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="minesweeper" width="400" height="400"></canvas>
    <script src="minesweeper.js"></script>
</body>
</html>

2. 初始化游戏

在minesweeper.js文件中，我们首先需要初始化游戏的基本参数，如格子大小、地雷数量等。

const canvas = document.getElementById('minesweeper');
const ctx = canvas.getContext('2d');

const GRID_SIZE = 10; // 每行每列的格子数量
const CELL_SIZE = canvas.width / GRID_SIZE; // 每个格子的大小
const MINE_COUNT = 10; // 地雷数量

let grid = []; // 用于存储每个格子的状态

3. 创建游戏网格

接下来，我们需要创建一个二维数组来表示游戏网格。每个格子可以包含以下信息：

isMine: 是否是地雷
revealed: 是否已被揭示
neighborMines: 周围地雷的数量

function createGrid() {
    for (let i = 0; i < GRID_SIZE; i++) {
        grid[i] = [];
        for (let j = 0; j < GRID_SIZE; j++) {
            grid[i][j] = {
                isMine: false,
                revealed: false,
                neighborMines: 0
            };
        }
    }
}

4. 随机放置地雷

在游戏开始时，我们需要随机放置地雷。可以使用Math.random()函数来生成随机位置。

function placeMines() {
    let minesPlaced = 0;
    while (minesPlaced < MINE_COUNT) {
        const x = Math.floor(Math.random() * GRID_SIZE);
        const y = Math.floor(Math.random() * GRID_SIZE);
        if (!grid[x][y].isMine) {
            grid[x][y].isMine = true;
            minesPlaced++;
        }
    }
}

5. 计算周围地雷数量

对于每个非地雷的格子，我们需要计算其周围8个格子中的地雷数量。

function calculateNeighborMines() {
    for (let i = 0; i < GRID_SIZE; i++) {
        for (let j = 0; j < GRID_SIZE; j++) {
            if (!grid[i][j].isMine) {
                let count = 0;
                for (let x = -1; x <= 1; x++) {
                    for (let y = -1; y <= 1; y++) {
                        const newX = i + x;
                        const newY = j + y;
                        if (newX >= 0 && newX < GRID_SIZE && newY >= 0 && newY < GRID_SIZE && grid[newX][newY].isMine) {
                            count++;
                        }
                    }
                }
                grid[i][j].neighborMines = count;
            }
        }
    }
}

6. 绘制游戏界面

使用Canvas的绘图API来绘制游戏界面。每个格子可以根据其状态显示不同的内容。

function drawGrid() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < GRID_SIZE; i++) {
        for (let j = 0; j < GRID_SIZE; j++) {
            const cell = grid[i][j];
            ctx.strokeRect(i * CELL_SIZE, j * CELL_SIZE, CELL_SIZE, CELL_SIZE);
            if (cell.revealed) {
                if (cell.isMine) {
                    ctx.fillStyle = 'red';
                    ctx.fillRect(i * CELL_SIZE, j * CELL_SIZE, CELL_SIZE, CELL_SIZE);
                } else {
                    ctx.fillStyle = 'lightgray';
                    ctx.fillRect(i * CELL_SIZE, j * CELL_SIZE, CELL_SIZE, CELL_SIZE);
                    if (cell.neighborMines > 0) {
                        ctx.fillStyle = 'black';
                        ctx.fillText(cell.neighborMines, i * CELL_SIZE + CELL_SIZE / 2, j * CELL_SIZE + CELL_SIZE / 2);
                    }
                }
            }
        }
    }
}

7. 处理用户点击

当用户点击某个格子时，我们需要揭示该格子。如果该格子是地雷，游戏结束；否则，继续揭示周围的格子。

function revealCell(x, y) {
    if (x < 0 || x >= GRID_SIZE || y < 0 || y >= GRID_SIZE || grid[x][y].revealed) {
        return;
    }
    grid[x][y].revealed = true;
    if (grid[x][y].isMine) {
        alert('Game Over!');
        return;
    }
    if (grid[x][y].neighborMines === 0) {
        for (let i = -1; i <= 1; i++) {
            for (let j = -1; j <= 1; j++) {
                revealCell(x + i, y + j);
            }
        }
    }
    drawGrid();
}

canvas.addEventListener('click', (event) => {
    const rect = canvas.getBoundingClientRect();
    const x = Math.floor((event.clientX - rect.left) / CELL_SIZE);
    const y = Math.floor((event.clientY - rect.top) / CELL_SIZE);
    revealCell(x, y);
});

8. 游戏初始化

最后，我们需要在页面加载时初始化游戏。

function initGame() {
    createGrid();
    placeMines();
    calculateNeighborMines();
    drawGrid();
}

window.onload = initGame;

9. 总结

通过以上步骤，我们实现了一个简单的扫雷游戏。当然，这只是一个基础版本，你可以进一步扩展功能，如添加计时器、标记地雷、调整难度等。希望这篇文章能帮助你理解如何使用JavaScript和Canvas来实现一个经典的扫雷游戏。