Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $YECBGYFECGEAFWHA as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2

Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $BBWFDDBHHYHDXXAB as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2
JavaScript控制台扫雷游戏开发教程_创想鸟

JavaScript控制台扫雷游戏开发教程

JavaScript控制台扫雷游戏开发教程

本教程详细指导如何使用纯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  {    let count = 0;    for (let i = -1; i <= 1; i++) {        for (let j = -1; j = 0 && newRow = 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 = gridSize || 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 = 0 && newRow = 0 && newCol  {    if (row = gridSize || 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  20 || isNaN(gridSize)) { // 限制网格大小在3x3到20x20之间        const sizeInput = await questionAsync("请输入网格大小 (例如: 9 表示 9x9): ");        gridSize = parseInt(sizeInput, 10);        if (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 = gridSize || 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控制台扫雷游戏开发教程的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1517372.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
高效检查数组奇偶交替模式:JavaScript实现与解析
上一篇 2025年12月20日 10:43:14
使用JavaScript构建控制台版扫雷游戏:从数据结构到游戏循环
下一篇 2025年12月20日 10:43:23

相关推荐

发表回复

登录后才能评论
关注微信