本教程详细指导如何使用纯JavaScript在VS Code控制台中构建一个功能完整的扫雷游戏。内容涵盖从核心数据结构设计、游戏状态初始化与渲染，到处理用户输入、实现游戏逻辑（开格、标记）、判断胜负条件，以及构建主游戏循环的完整开发流程，并提供错误处理和性能优化的建议。
在javascript环境中开发一个控制台游戏，需要系统性地思考游戏的数据模型、状态管理、用户交互以及渲染逻辑。本教程将以扫雷游戏为例，详细阐述这些关键步骤。
一、核心数据结构设计
扫雷游戏的核心是其棋盘上的每一个单元格。每个单元格都应包含其自身的状态信息。为了清晰地表示这些状态，我们可以为每个单元格定义一个JavaScript对象。
一个单元格至少需要以下属性：
- isMine: 布尔值，表示该单元格是否藏有地雷。
- state: 字符串，表示单元格的可见状态，例如 “unopened”（未打开）、”opened”（已打开）或 “flagged”（已标记）。
游戏棋盘则可以表示为一个二维数组，数组的每个元素都是上述单元格对象。
// 示例：单元格对象结构 // interface Cell { // isMine: boolean; // state: "unopened" | "opened" | "flagged"; // mineCount?: number; // 周围地雷数量，仅在isMine为false且state为"opened"时有意义 // } // 游戏网格将是一个 Cell[][] 类型的二维数组
二、游戏状态初始化
游戏开始时，我们需要创建一个指定大小的网格，并随机分布地雷，同时初始化所有单元格为未打开状态。
立即学习“Java免费学习笔记（深入）”；
- 生成网格骨架: 创建一个空的二维数组，根据 gridSize 填充指定数量的行和列。
- 随机布雷与单元格初始化: 遍历网格中的每个位置，为每个单元格创建一个上述定义的 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; };
四、处理用户交互
玩家在扫雷游戏中主要有两种操作：打开单元格和标记（或取消标记）单元格。我们需要为这些操作定义相应的函数。
-
open(grid, row, col, gridSize) 函数:
- 将指定单元格的 state 从 “unopened” 变为 “opened”。
- 核心逻辑:
- 如果打开的是地雷 (isMine: true)，游戏结束，玩家失败。
- 如果打开的是空单元格 (mineCount: 0)，则需要递归地自动打开其所有相邻的未标记、未打开的空单元格，直到遇到带有数字的单元格为止。这是一个关键的扫雷机制。
- 如果打开的是带有数字的单元格 (mineCount > 0)，则只打开该单元格。
- 注意事项: 避免重复打开已打开的单元格或打开已标记的单元格。
-
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"; };
五、判断游戏结束条件
游戏需要一个机制来判断何时结束以及是胜利还是失败。
- 失败条件: 当玩家打开一个 isMine: true 的单元格时，游戏立即失败。
- 胜利条件: 当所有非地雷的单元格都被成功打开时，玩家胜利。这意味着玩家没有踩到任何地雷，并且通过打开或标记的方式确认了所有地雷的位置。
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编程的良好实践。在完成基础功能后，可以进一步探索错误处理、性能优化和用户体验改进，使游戏更加健壮和有趣。
评论（已关闭）
评论已关闭