在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编程的良好实践。在完成基础功能后，可以进一步探索错误处理、性能优化和用户体验改进，使游戏更加健壮和有趣。
