正文

轻松学编程：用JavaScript打造趣味扫雷游戏全攻略

/0 浏览量
0622

1. 引言

扫雷游戏是一款经典的电脑游戏，玩家需要在雷区中找出所有的非雷区域，同时避免触碰到地雷。用JavaScript实现一个扫雷游戏不仅能够锻炼编程能力，还能增加编程的趣味性。本文将带你一步步用JavaScript打造一个简单的扫雷游戏。

2. 游戏设计

在开始编程之前，我们需要对游戏进行一些设计。以下是扫雷游戏的基本设计：

  • 游戏区域：设定一个固定大小的游戏区域，例如10x10的格子。
  • 雷区大小：设定雷区的大小，例如10个雷。
  • 显示效果：当玩家点击一个格子时，如果是雷，则显示“游戏结束”；如果是非雷区域，则显示该区域周围雷的数量。
  • 胜利条件：当玩家找到所有的非雷区域时，游戏胜利。

3. HTML结构

首先，我们需要创建一个HTML文件，定义游戏区域的结构。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扫雷游戏</title>
    <style>
        /* 添加样式 */
    </style>
</head>
<body>
    <div id="game-board"></div>
    <script src="game.js"></script>
</body>
</html>

4. CSS样式

接下来，我们需要为游戏区域添加一些样式。

#game-board {
    display: grid;
    grid-template-columns: repeat(10, 50px);
    grid-gap: 5px;
}

.cell {
    width: 50px;
    height: 50px;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

5. JavaScript核心逻辑

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

// 游戏数据
const rows = 10;
const cols = 10;
const mines = 10;
let board = [];
let mineCount = 0;

// 初始化游戏
function initGame() {
    // 初始化棋盘
    board = Array.from({ length: rows }, () => Array.from({ length: cols }, () => 0));
    // 放置雷
    placeMines();
    // 绘制棋盘
    drawBoard();
}

// 放置雷
function placeMines() {
    mineCount = 0;
    while (mineCount < mines) {
        const row = Math.floor(Math.random() * rows);
        const col = Math.floor(Math.random() * cols);
        if (board[row][col] !== 9) {
            board[row][col] = 9;
            mineCount++;
        }
    }
}

// 绘制棋盘
function drawBoard() {
    const gameBoard = document.getElementById('game-board');
    gameBoard.innerHTML = '';
    for (let i = 0; i < rows; i++) {
        for (let j = 0; j < cols; j++) {
            const cell = document.createElement('div');
            cell.classList.add('cell');
            cell.addEventListener('click', () => handleClick(i, j));
            gameBoard.appendChild(cell);
        }
    }
}

// 点击格子
function handleClick(row, col) {
    if (board[row][col] === 9) {
        // 爆炸
        alert('游戏结束');
        return;
    }
    // 显示周围雷的数量
    const count = countMines(row, col);
    if (count > 0) {
        document.querySelector(`.cell:nth-child(${row * cols + col + 1})`).innerText = count;
    } else {
        // 递归展开周围区域
        expand(row, col);
    }
}

// 计算周围雷的数量
function countMines(row, col) {
    let count = 0;
    for (let i = -1; i <= 1; i++) {
        for (let j = -1; j <= 1; j++) {
            const newRow = row + i;
            const newCol = col + j;
            if (newRow >= 0 && newRow < rows && newCol >= 0 && newCol < cols && board[newRow][newCol] === 9) {
                count++;
            }
        }
    }
    return count;
}

// 展开周围区域
function expand(row, col) {
    for (let i = -1; i <= 1; i++) {
        for (let j = -1; j <= 1; j++) {
            const newRow = row + i;
            const newCol = col + j;
            if (newRow >= 0 && newRow < rows && newCol >= 0 && newCol < cols && board[newRow][newCol] !== 9) {
                document.querySelector(`.cell:nth-child(${newRow * cols + newCol + 1})`).classList.add('open');
                const count = countMines(newRow, newCol);
                if (count > 0) {
                    document.querySelector(`.cell:nth-child(${newRow * cols + newCol + 1})`).innerText = count;
                } else {
                    expand(newRow, newCol);
                }
            }
        }
    }
}

// 启动游戏
initGame();

6. 游戏优化

在实现基本功能后，我们可以对游戏进行一些优化：

  • 添加计时器：记录玩家游戏时间。
  • 添加提示功能：当玩家点击一个格子时，显示该格子周围雷的数量。
  • 添加游戏难度选择：设置不同大小的游戏区域和雷区大小。

7. 总结

通过本文的学习，你掌握了如何用JavaScript实现一个简单的扫雷游戏。在实际开发过程中，你可以根据自己的需求对游戏进行优化和扩展。希望这篇文章能够帮助你更好地学习编程，享受编程的乐趣！

-- 展开阅读全文 --