正文

玩转扫雷：一步步教你用JavaScript编写扫雷游戏

/0 浏览量
0623

扫雷游戏是一款经典的逻辑游戏，其魅力在于简洁的规则和挑战性的玩法。今天，我们就来一步步教你如何使用JavaScript编写一个简单的扫雷游戏。从基础到进阶，让你轻松掌握游戏的编程技巧。

1. 游戏设计

首先，我们需要设计一个扫雷游戏的基本框架。以下是游戏设计的关键点：

  • 游戏区域：定义一个大小为n×n的二维数组，代表游戏区域。
  • 雷区分布：在游戏区域中随机放置一定数量的雷。
  • 标记：为每个单元格提供标记功能，以便玩家标记可疑区域。

2. HTML结构

为了展示游戏界面，我们需要创建一个HTML文件。以下是一个简单的HTML结构示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>扫雷游戏</title>
    <style>
        /* 样式设置 */
    </style>
</head>
<body>
    <div id="gameArea"></div>
    <script src="game.js"></script>
</body>
</html>

3. CSS样式

接下来，我们需要为游戏区域添加一些样式。以下是一个简单的CSS样式示例：

#gameArea {
    width: 400px;
    height: 400px;
    background-color: #ddd;
    display: grid;
    grid-template-columns: repeat(10, 40px);
    grid-template-rows: repeat(10, 40px);
}

.cell {
    width: 40px;
    height: 40px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

4. JavaScript编程

现在，我们来编写JavaScript代码实现扫雷游戏的核心功能。

4.1 初始化游戏区域

首先，我们需要创建一个函数来初始化游戏区域：

function initGameArea(n) {
    const gameArea = document.getElementById('gameArea');
    gameArea.innerHTML = '';
    for (let i = 0; i < n * n; i++) {
        const cell = document.createElement('div');
        cell.classList.add('cell');
        cell.addEventListener('click', () => openCell(i));
        gameArea.appendChild(cell);
    }
}

4.2 雷区分布

接下来，我们需要创建一个函数来随机放置雷：

function placeMines(n, mines) {
    const mines = new Set();
    while (mines.size < mines) {
        const x = Math.floor(Math.random() * n);
        const y = Math.floor(Math.random() * n);
        mines.add(`${x},${y}`);
    }
    return mines;
}

4.3 打开单元格

当玩家点击单元格时，我们需要实现打开单元格的功能：

function openCell(index) {
    const x = Math.floor(index / n);
    const y = index % n;
    const cell = document.querySelector(`.cell:nth-child(${index + 1})`);
    if (cells[x][y] === 'M') {
        cell.innerText = '💣';
        cell.style.backgroundColor = 'red';
        alert('游戏结束！');
    } else {
        const count = countAdjacentMines(x, y);
        cell.innerText = count === 0 ? '' : count;
        cell.style.backgroundColor = count === 0 ? '#f0f0f0' : '#e0e0e0';
    }
}

4.4 计算周边雷数

为了显示每个单元格周围的雷数，我们需要创建一个函数来计算：

function countAdjacentMines(x, y) {
    let count = 0;
    for (let i = x - 1; i <= x + 1; i++) {
        for (let j = y - 1; j <= y + 1; j++) {
            if (i >= 0 && i < n && j >= 0 && j < n && cells[i][j] === 'M') {
                count++;
            }
        }
    }
    return count;
}

5. 游戏开始

最后，我们可以调用initGameArea函数来开始游戏：

const n = 10; // 游戏区域大小
const mines = 10; // 雷的数量
const cells = Array.from({ length: n }, () => Array(n).fill('E')); // 初始化游戏区域
const minesSet = placeMines(n, mines); // 随机放置雷

for (let i = 0; i < n; i++) {
    for (let j = 0; j < n; j++) {
        if (minesSet.has(`${i},${j}`)) {
            cells[i][j] = 'M';
        }
    }
}

initGameArea(n);

通过以上步骤，我们就完成了一个简单的扫雷游戏。当然，这只是扫雷游戏的一个基本实现，你可以根据自己的需求进行扩展和优化。祝你在编程的道路上越走越远！

-- 展开阅读全文 --