JavaScript扫雷游戏开发实战教程

本教程将带你从零开始，使用纯JavaScript在VS Code控制台中开发一款完整的扫雷游戏。教程内容覆盖扫雷游戏的核心数据结构设计，详细讲解如何初始化游戏状态、渲染游戏界面，并处理用户输入，实现开格、标记等核心游戏逻辑。同时，教程还会指导你如何判断胜负条件，构建主游戏循环，并提供错误处理和性能优化的实用建议，助力你打造流畅的游戏体验。通过本教程，你将系统性地掌握JavaScript控制台游戏开发的关键步骤，为后续更复杂的游戏项目打下坚实基础。快来一起探索JavaScript扫雷游戏的开发之旅吧！

在JavaScript环境中开发一个控制台游戏，需要系统性地思考游戏的数据模型、状态管理、用户交互以及渲染逻辑。本教程将以扫雷游戏为例，详细阐述这些关键步骤。

一、核心数据结构设计

扫雷游戏的核心是其棋盘上的每一个单元格。每个单元格都应包含其自身的状态信息。为了清晰地表示这些状态，我们可以为每个单元格定义一个JavaScript对象。

一个单元格至少需要以下属性：

• isMine: 布尔值，表示该单元格是否藏有地雷。
• state: 字符串，表示单元格的可见状态，例如 "unopened"（未打开）、"opened"（已打开）或 "flagged"（已标记）。

游戏棋盘则可以表示为一个二维数组，数组的每个元素都是上述单元格对象。

// 示例：单元格对象结构
// interface Cell {
//    isMine: boolean;
//    state: "unopened" | "opened" | "flagged";
//    mineCount?: number; // 周围地雷数量，仅在isMine为false且state为"opened"时有意义
// }

// 游戏网格将是一个 Cell[][] 类型的二维数组

二、游戏状态初始化

游戏开始时，我们需要创建一个指定大小的网格，并随机分布地雷，同时初始化所有单元格为未打开状态。

1. 生成网格骨架: 创建一个空的二维数组，根据 gridSize 填充指定数量的行和列。
2. 随机布雷与单元格初始化: 遍历网格中的每个位置，为每个单元格创建一个上述定义的 Cell 对象。
   • state 初始值设为 "unopened"。
   • isMine 属性通过一个随机函数来决定。
   • 计算周围地雷数量: 在所有地雷位置确定后，遍历每个非雷单元格，计算其八个相邻单元格中地雷的数量，并将这个数字存储在 mineCount 属性中。这对于后续揭示单元格的逻辑至关重要。

isMine 函数优化: 一个更简洁且直接返回布尔值的 isMine 函数实现方式是：

const isMine = () => Math.random() < 0.2; // 0.2 表示约20%的概率是地雷，可调整

这会直接返回 true 或 false，而不是 0 或 1，避免了额外的 Math.round() 操作。

示例代码:

const generateGrid = (gridSize, mineProbability = 0.2) => {
    let grid = [];
    for (let i = 0; i < gridSize; i++) {
        grid.push([]);
        for (let j = 0; j < gridSize; j++) {
            grid[i][j] = {
                isMine: Math.random() < mineProbability,
                state: "unopened",
                mineCount: 0 // 初始为0，后续计算
            };
        }
    }
    // 计算周围地雷数量
    for (let i = 0; i < gridSize; i++) {
        for (let j = 0; j < gridSize; j++) {
            if (!grid[i][j].isMine) {
                grid[i][j].mineCount = countAdjacentMines(grid, i, j, gridSize);
            }
        }
    }
    return grid;
};

// 辅助函数：计算相邻地雷数量
const countAdjacentMines = (grid, row, col, gridSize) => {
    let count = 0;
    for (let i = -1; i <= 1; i++) {
        for (let j = -1; j <= 1; j++) {
            if (i === 0 && j === 0) continue; // 跳过当前单元格
            const newRow = row + i;
            const newCol = col + j;
            // 检查边界
            if (newRow >= 0 && newRow < gridSize && newCol >= 0 && newCol < gridSize) {
                if (grid[newRow][newCol].isMine) {
                    count++;
                }
            }
        }
    }
    return count;
};

三、游戏状态渲染

为了让玩家看到游戏棋盘，我们需要将内部的二维数组表示转换为控制台可打印的字符串。这个渲染函数应该根据每个单元格的 state 属性来显示不同的字符。

• "unopened" 状态的单元格可以显示为 . 或 #。
• "flagged" 状态的单元格可以显示为 F。
• "opened" 状态的单元格：
  • 如果 isMine 为 true，则显示 * (地雷)。
  • 如果 isMine 为 false 且 mineCount 为 0，则显示 ` ` (空格)。
  • 如果 isMine 为 false 且 mineCount 大于 0，则显示 mineCount 的数字。

const render = (grid) => {
    let output = "  "; // 用于列索引的偏移
    const gridSize = grid.length;
    // 打印列索引
    for (let col = 0; col < gridSize; col++) {
        output += `${col} `;
    }
    output += "\n";

    for (let i = 0; i < gridSize; i++) {
        output += `${i} `; // 打印行索引
        for (let j = 0; j < gridSize; j++) {
            const cell = grid[i][j];
            if (cell.state === "flagged") {
                output += "F ";
            } else if (cell.state === "opened") {
                if (cell.isMine) {
                    output += "* "; // 地雷
                } else if (cell.mineCount === 0) {
                    output += "  "; // 空白格
                } else {
                    output += `${cell.mineCount} `; // 数字
                }
            } else { // unopened
                output += "# ";
            }
        }
        output += "\n";
    }
    return output;
};

四、处理用户交互

玩家在扫雷游戏中主要有两种操作：打开单元格和标记（或取消标记）单元格。我们需要为这些操作定义相应的函数。

1. open(grid, row, col, gridSize) 函数:

   • 将指定单元格的 state 从 "unopened" 变为 "opened"。
   • 核心逻辑:
     • 如果打开的是地雷 (isMine: true)，游戏结束，玩家失败。
     • 如果打开的是空单元格 (mineCount: 0)，则需要递归地自动打开其所有相邻的未标记、未打开的空单元格，直到遇到带有数字的单元格为止。这是一个关键的扫雷机制。
     • 如果打开的是带有数字的单元格 (mineCount > 0)，则只打开该单元格。
   • 注意事项: 避免重复打开已打开的单元格或打开已标记的单元格。

2. flag(grid, row, col) 函数:

   • 将指定单元格的 state 在 "unopened" 和 "flagged" 之间切换。
   • 只能标记未打开的单元格。

示例函数签名 (内部逻辑需自行实现):

const openCell = (grid, row, col, gridSize) => {
    // 边界检查和状态检查
    if (row < 0 || row >= gridSize || col < 0 || col >= gridSize || grid[row][col].state !== "unopened") {
        return; // 无效操作
    }

    const cell = grid[row][col];
    cell.state = "opened";

    if (cell.isMine) {
        return "lose"; // 踩到地雷，游戏失败
    }

    // 如果是空单元格，递归打开周围的空单元格
    if (cell.mineCount === 0) {
        for (let i = -1; i <= 1; i++) {
            for (let j = -1; j <= 1; j++) {
                if (i === 0 && j === 0) continue;
                const newRow = row + i;
                const newCol = col + j;
                // 递归调用，但要确保不重复打开和不打开已标记的
                if (newRow >= 0 && newRow < gridSize && newCol >= 0 && newCol < gridSize && grid[newRow][newCol].state === "unopened") {
                    openCell(grid, newRow, newCol, gridSize);
                }
            }
        }
    }
    return "continue"; // 游戏继续
};

const flagCell = (grid, row, col, gridSize) => {
    if (row < 0 || row >= gridSize || col < 0 || col >= gridSize || grid[row][col].state === "opened") {
        return; // 只能标记未打开的单元格
    }
    const cell = grid[row][col];
    cell.state = cell.state === "flagged" ? "unopened" : "flagged";
};

五、判断游戏结束条件

游戏需要一个机制来判断何时结束以及是胜利还是失败。

1. 失败条件: 当玩家打开一个 isMine: true 的单元格时，游戏立即失败。
2. 胜利条件: 当所有非地雷的单元格都被成功打开时，玩家胜利。这意味着玩家没有踩到任何地雷，并且通过打开或标记的方式确认了所有地雷的位置。

checkEnd(grid) 函数应遍历整个网格来判断：

const checkEnd = (grid) => {
    const gridSize = grid.length;
    let unopenedNonMineCount = 0;
    let totalMines = 0;

    for (let i = 0; i < gridSize; i++) {
        for (let j = 0; j < gridSize; j++) {
            const cell = grid[i][j];
            if (cell.isMine) {
                totalMines++;
            }
            if (!cell.isMine && cell.state === "unopened") {
                unopenedNonMineCount++;
            }
            // 如果有地雷被打开，直接判定失败 (这个逻辑也可以放在 openCell 函数中)
            if (cell.isMine && cell.state === "opened") {
                return "lose";
            }
        }
    }

    if (unopenedNonMineCount === 0) {
        return "win"; // 所有非地雷格都已打开
    }

    return false; // 游戏继续
};

六、构建主游戏循环

游戏的整体流程由一个主函数 (main) 控制，它将上述所有组件整合在一起。由于需要读取用户输入，我们将使用Node.js的 readline 模块，并采用异步方式处理输入。

const readline = require('readline');

const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

// 辅助函数：异步获取用户输入
const questionAsync = (query) => {
    return new Promise(resolve => rl.question(query, resolve));
};

const main = async () => {
    console.log("欢迎来到控制台扫雷！");

    let gridSize = 0;
    while (gridSize < 3 || gridSize > 20 || isNaN(gridSize)) { // 限制网格大小在3x3到20x20之间
        const sizeInput = await questionAsync("请输入网格大小 (例如: 9 表示 9x9): ");
        gridSize = parseInt(sizeInput, 10);
        if (gridSize < 3 || gridSize > 20 || isNaN(gridSize)) {
            console.log("无效的网格大小。请输入一个3到20之间的数字。");
        }
    }

    let grid = generateGrid(gridSize);
    let endState = false;

    while (!endState) {
        console.clear(); // 清空控制台，使界面更整洁
        console.log(render(grid));

        const actionInput = await questionAsync("请输入操作 (例如: 'o 0 0' 打开, 'f 1 2' 标记): ");
        const parts = actionInput.trim().split(' ');
        const action = parts[0].toLowerCase();
        const row = parseInt(parts[1], 10);
        const col = parseInt(parts[2], 10);

        if (isNaN(row) || isNaN(col) || row < 0 || row >= gridSize || col < 0 || col >= gridSize) {
            console.log("无效的坐标或输入格式。请重试。");
            await questionAsync("按回车键继续...");
            continue;
        }

        let gameResult = "continue"; // 默认游戏继续

        if (action === 'o') {
            gameResult = openCell(grid, row, col, gridSize);
        } else if (action === 'f') {
            flagCell(grid, row, col, gridSize);
        } else {
            console.log("无效的操作。请使用 'o' (打开) 或 'f' (标记)。");
            await questionAsync("按回车键继续...");
            continue;
        }

        // 检查游戏是否结束
        if (gameResult === "lose") {
            endState = "lose";
        } else {
            endState = checkEnd(grid);
        }
    }

    // 游戏结束，显示最终棋盘和结果
    console.clear();
    console.log(render(grid)); // 最终显示所有地雷位置（如果失败）或所有数字（如果胜利）

    if (endState === "win") {
        console.log("恭喜！你赢了！");
    } else if (endState === "lose") {
        console.log("抱歉！你踩到地雷了。游戏结束！");
    }

    rl.close(); // 关闭 readline 接口
};

main(); // 启动游戏

七、错误处理与用户体验

在实际游戏中，需要考虑各种用户输入错误和不合理操作：

• 无效坐标: 用户输入的行或列超出网格范围。
• 重复操作: 尝试打开一个已打开的单元格。
• 非法操作: 尝试标记一个已打开的单元格。
• 输入格式错误: 用户输入不符合 o 0 0 或 f 1 2 的格式。

这些情况都应该在 openCell、flagCell 函数以及主循环的输入解析阶段进行校验和处理，给出友好的提示信息。

八、性能优化与进阶思考

当前 checkEnd 函数每次都需要遍历整个网格，对于大型网格来说效率较低。可以进行优化：

• 跟踪游戏状态变量: 在 main 函数或全局作用域中维护一些变量，例如 openedCellsCount（已打开的非雷单元格数量）和 totalNonMines（总非雷单元格数量）。
  • 在 generateGrid 时计算 totalNonMines。
  • 在 openCell 成功打开一个非雷单元格时，递增 openedCellsCount。
  • 这样，checkEnd 就可以简化为 return openedCellsCount === totalNonMines ? "win" : false;。
• 提前判断失败: 当 openCell 函数检测到玩家踩到地雷时，可以直接返回 "lose" 状态，而无需等待 checkEnd 再次遍历。
• 可视化优化: 在控制台中，可以通过颜色、特殊字符等进一步美化渲染效果，提升用户体验。

总结

通过上述步骤，我们能够使用纯JavaScript在控制台中构建一个功能完整的扫雷游戏。这个过程涵盖了数据结构设计、状态管理、逻辑实现、用户交互和渲染等多个方面，是学习游戏开发和JavaScript编程的良好实践。在完成基础功能后，可以进一步探索错误处理、性能优化和用户体验改进，使游戏更加健壮和有趣。

终于介绍完啦！小伙伴们，这篇关于《JavaScript扫雷游戏开发实战教程》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！