本文将引导你使用 JavaScript 构建一个简单的扫雷游戏。我们将讨论数据结构设计、游戏状态初始化、渲染游戏界面、处理用户输入、判断游戏结束条件以及构建主函数。此外，还将探讨错误处理和潜在的优化方向，帮助你构建一个功能完善且高效的扫雷游戏。
1. 数据结构设计
扫雷游戏的核心在于如何表示游戏状态。一个二维数组可以很好地表示游戏棋盘，而数组中的每个元素代表一个单元格。每个单元格需要存储以下信息：
- 是否是地雷 (isMine): boolean 类型，表示该单元格是否包含地雷。
- 单元格状态 (state): 字符串类型，可以有三种状态："unopened" (未打开), "opened" (已打开), "flagged" (已标记)。
因此，每个单元格可以表示为一个对象：
{
isMine: boolean,
state: "unopened" | "opened" | "flagged"
}游戏状态可以用一个二维数组来表示，数组中的每个元素都是上述对象。
立即学习“Java免费学习笔记（深入）”；
2. 初始化游戏状态
游戏初始化包括生成二维数组并初始化每个单元格的状态。以下代码展示了如何创建一个动态的二维数组，并随机地在单元格中放置地雷：
const generateGrid = (gridSize) => {
let grid = [];
for (let i = 0; i < gridSize; i++) {
grid.push([]);
for (let j = 0; j < gridSize; j++) {
grid[i][j] = {
isMine: isMine(),
state: "unopened"
};
}
}
return grid;
};
const isMine = () => Math.random() < 0.3; // Adjust probability for mine density
let grid = generateGrid(9); // 创建一个 9x9 的棋盘generateGrid 函数创建了一个指定大小的二维数组，并使用 isMine 函数随机地将地雷放置在单元格中。isMine 函数使用 Math.random() 生成一个 0 到 1 之间的随机数，如果该数字小于设定的概率值 (例如 0.3)，则认为该单元格包含地雷。
3. 渲染游戏状态
渲染游戏状态是将游戏数据转换为用户可读的形式。以下代码展示了如何将二维数组渲染成字符串，以便在控制台中显示：
const render = (grid) => {
let output = "";
for (let i = 0; i < grid.length; i++) {
for (let j = 0; j < grid[i].length; j++) {
const cell = grid[i][j];
if (cell.state === "unopened") {
output += ". "; // 未打开的单元格
} else if (cell.state === "flagged") {
output += "F "; // 已标记的单元格
} else if (cell.isMine) {
output += "X "; // 地雷
} else {
// 计算周围地雷数量
let mineCount = 0;
for (let x = Math.max(0, i - 1); x <= Math.min(grid.length - 1, i + 1); x++) {
for (let y = Math.max(0, j - 1); y <= Math.min(grid[i].length - 1, j + 1); y++) {
if (x === i && y === j) continue; // Skip the current cell
if (grid[x][y].isMine) mineCount++;
}
}
output += mineCount + " "; // 显示周围地雷数量
}
}
output += "\n"; // 换行
}
return output;
};
console.log(render(grid));render 函数遍历二维数组，根据单元格的状态生成相应的字符。未打开的单元格显示为 "."，已标记的单元格显示为 "F"，地雷显示为 "X"，已打开的非地雷单元格显示周围地雷的数量。
4. 处理用户输入
为了让玩家与游戏互动，我们需要接收用户的输入。可以使用 Node.js 的 readline 模块来接收用户输入。
const readline = require('readline').createInterface({
input: process.stdin,
output: process.stdout,
});
const open = (grid, row, column) => {
if (row < 0 || row >= grid.length || column < 0 || column >= grid[0].length) {
console.log("Invalid coordinates. Please try again.");
return;
}
const cell = grid[row][column];
if (cell.state !== "unopened") {
console.log("Cell already opened or flagged.");
return;
}
cell.state = "opened";
if (cell.isMine) {
return "lose"; // Game over
} else {
// 展开周围的空白单元格（递归） - 简化版本，未完全实现扫雷的自动展开
return false;
}
};
const flag = (grid, row, column) => {
if (row < 0 || row >= grid.length || column < 0 || column >= grid[0].length) {
console.log("Invalid coordinates. Please try again.");
return;
}
const cell = grid[row][column];
if (cell.state === "opened") {
console.log("Cannot flag an opened cell.");
return;
}
cell.state = (cell.state === "unopened") ? "flagged" : "unopened";
return false;
};open 函数处理打开单元格的逻辑。它首先检查坐标是否有效，然后检查单元格是否已经打开或标记。如果单元格包含地雷，则游戏结束。否则，将单元格状态设置为 "opened"，并展开周围的空白单元格（此示例中仅为简单版本，未完全实现扫雷的自动展开）。
flag 函数处理标记单元格的逻辑。它首先检查坐标是否有效，然后检查单元格是否已经打开。如果单元格未打开，则将其状态设置为 "flagged"，如果已经标记则取消标记。
5. 判断游戏结束条件
游戏需要在以下两种情况下结束：
- 失败: 玩家打开了一个包含地雷的单元格。
- 胜利: 玩家打开了所有非地雷的单元格。
以下代码展示了如何检查游戏是否结束：
const checkEnd = (grid) => {
let allNonMineCellsOpened = true;
for (let i = 0; i < grid.length; i++) {
for (let j = 0; j < grid[i].length; j++) {
const cell = grid[i][j];
if (!cell.isMine && cell.state !== "opened") {
allNonMineCellsOpened = false;
break;
}
}
if (!allNonMineCellsOpened) break;
}
if (allNonMineCellsOpened) {
return "win";
}
return false;
};checkEnd 函数遍历整个棋盘，检查是否所有非地雷单元格都已打开。如果是，则游戏胜利。如果玩家打开了地雷，则在 open 函数中返回 "lose"。
6. 构建主函数
主函数将所有组件整合在一起，实现完整的游戏流程。
const main = async () => {
const gridSize = 9;
let grid = generateGrid(gridSize);
let endState = false;
while (!endState) {
console.log(render(grid));
const action = await new Promise((resolve) => {
readline.question('Enter action (open/flag), row, column (e.g., open 1 2): ', input => {
resolve(input);
});
});
const [command, rowStr, colStr] = action.split(' ');
const row = parseInt(rowStr);
const column = parseInt(colStr);
let result = false;
if (command === "open") {
result = open(grid, row, column);
} else if (command === "flag") {
result = flag(grid, row, column);
} else {
console.log("Invalid command. Please try again.");
continue;
}
if (result === "lose") {
endState = "lose";
} else {
endState = checkEnd(grid);
}
}
console.log(render(grid)); // Render final state
if (endState === "win") {
console.log("Congratulations! You win!");
} else {
console.log("Game over! You lose!");
}
readline.close();
};
main();main 函数首先生成游戏棋盘，然后进入一个循环，直到游戏结束。在循环中，它首先渲染游戏状态，然后提示用户输入操作。根据用户的输入，调用相应的函数 (open 或 flag)。最后，检查游戏是否结束，并输出相应的信息。
7. 错误处理
在编写游戏时，需要考虑各种可能的错误情况。例如，用户可能输入无效的坐标，或者尝试打开已经打开的单元格。在 open 和 flag 函数中，我们已经添加了一些基本的错误处理。可以根据需要添加更多的错误处理逻辑，以提高游戏的健壮性。
8. 优化方向
- 自动展开: 实现扫雷的自动展开功能，即当玩家打开一个周围没有地雷的单元格时，自动展开其周围的空白单元格。
- 性能优化: checkEnd 函数的时间复杂度为 O(N^2)。可以通过维护额外的变量来跟踪游戏状态，从而降低时间复杂度。
- 用户界面: 使用 HTML、CSS 和 JavaScript 构建一个图形用户界面，以提高游戏的可玩性。
总结
通过以上步骤，你已经学会了使用 JavaScript 构建一个简单的扫雷游戏。这个教程涵盖了游戏开发的基本概念，包括数据结构设计、游戏状态初始化、渲染游戏界面、处理用户输入和判断游戏结束条件。希望这个教程能够帮助你入门游戏开发，并为你构建更复杂的游戏打下基础。记住，实践是最好的学习方式，尝试修改和扩展这个游戏，你会学到更多！
