Web版 扫雷 JS实现

最新推荐文章于 2024-05-09 14:17:00 发布
最新推荐文章于 2024-05-09 14:17:00 发布
阅读量6.1k 收藏 5
点赞数
分类专栏： Javascript Web前端 文章标签： web bfs 扫雷 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jesounao/article/details/51505387
版权

这几天中毒了，无比迷恋扫雷游戏（摔！明明是机房机器渣到只能玩扫雷），于是在上网络互联与路由课的时候，写了个Web版的扫雷游戏，起码能玩了，还在完善中，嘿嘿，晚上又增加了一些有趣的东东，还有个彩蛋。DEMO：http://imgbattle.cn/mine/

其中雷区扩展的时候，用的BFS算法。

考虑到所有节点都必须被储存，因此BFS的空间复杂度为 O(|V| + |E|)，其中 |V| 是节点的数目，而 |E| 是图中边的数目。（另一种说法称BFS的空间复杂度为 O(BM)，其中 B 是最大分支系数，而 M 是树的最长路径长度）由于对空间的大量需求，因此BFS并不适合解非常大的问题。还有就是浏览器页面有限，滚动条影响体验太大，所以把雷区大小作了限制。

边的长度相等，无权图，所以BFS算法是最佳解。

源码：
想要JS的同学，可以下方留言邮箱，顺丰包邮。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Mine</title>
    <link rel="stylesheet" type="text/css" href="mine.css">
    <!-- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> -->
    <script src="jquery.min.js"></script>
    <!-- <script src="mine.js"></script> -->
    <script src="mine.min.js"></script>
</head>
<body>
<div id="page">
    <div id="game">
        <label>x:<input type="num" name="x"></label><br>
        <label>y:<input type="num" name="y"></label><br>
        <label>n:<input type="num" name="n"></label><br>
        <label id
最低0.47元/天 解锁文章
NNode
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
前端技术搭建扫雷小游戏（内含源码）
官方推荐
06-01 3万+
六一儿童节了，为你的小朋友来实现一个扫雷游戏吧！通过扫雷游戏也能让你更进一步的感受前端基础三件套的作用及搭配
原生JS实现web版扫雷
RonnyChan的博客
03-14 273
利用两个周末，编写了经典扫雷游戏web版 纯JavaScript开发，效果如下： GitHub地址如下： https://github.com/ronnycyy/MinesSweeper.git 欢迎加微信：13823120793 交流～ ...
网页版扫雷游戏
最新发布
2301_80293394的博客
05-09 1574
2.//定义行列，方便修改好啦，以上就是今天的全部分享了，如有不足欢迎家人们评论区批评指正，如果这篇文章对你有用的话，可以给我来个一键三连嘛（写了一天了，求赞求支持/(ㄒoㄒ)/~~）
纯js实现扫雷小游戏
zyz00000000的博客
10-07 4740
项目地址：https://github.com/zhuyuzhu/sweep-mine git地址：https://github.com/zhuyuzhu/sweep-mine.git （1）html代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&g...
网页扫雷html css js,小游戏：扫雷 前端 H5 + CSS + JS
weixin_31861055的博客
06-22 781
简介很久以前刚接触前端的时候做的扫雷小游戏。虽然花了不少时间，但是整个做下来，还是很有收获的。现在来看代码还是比较一般的，但也是一番心血。特地分享出来，希望对需要的人有所帮助。适合初学者练习。运行效果运行效果上方的表格左边格子表示剩余雷数，中间选择难度，右边计时。按下空格可以开始新游戏。游戏中游戏胜利游戏失败主体思路随机生成雷的分布，用二维数组储存。同时遍历数组，生成数字，表示周围的雷的数目，同样...
Web-js实现扫雷小游戏----代码详解
qq_47815128的博客
11-02 876
Web-js实现扫雷小游戏----代码详解 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>经典扫雷</title> <link rel="icon" href="favicon.ico"> <style> *{ margin: 0;
前端经典练手项目｜用 JavaScript 实现网页版扫雷
实验楼
12-23 2368
相信大家都玩过扫雷这个经典的小游戏，它规则简单但耐玩。你有没有想过自己动手开发一个呢？今天我们就教你做一个网页版的扫雷，先上一张效果截图：知识点javascriptcss3扫雷原理实验原...
JS扫雷小游戏(DOM (html+css+js))
路漫漫其修远兮，吾将上下而求索。
11-11 2370
JS扫雷小游戏
web版扫雷小游戏（一）
weixin_30699741的博客
10-21 371
　　作为一名程序猿，平时的爱好也不多，说起游戏，我不太喜欢大型的网游，因为太耗时间，偶尔玩玩经典的单机小游戏，比如windows下自带的游戏扫雷（秀一下，高级下最高纪录110s）。 　　现阶段正在致力于web前端，工作之余，突然想用javascript来实现一下这个小游戏，说做就做，才发现玩起来简单，做起来还是遇到蛮多困难的，这里想和大家分享一下游戏的实现过程，之前做过一年多的C++开发，对OO...
web(html+css+js)扫雷-1
qq_43352505的博客
02-24 163
记录自己从零开始写扫雷游戏的一些过程。
JavaScript网页版扫雷
05-23
用JavaScript实现网页版扫雷，文件分为css,js,html三个文件及一张图片。下载解压即可运行。
js版本扫雷
01-04
"JS版本扫雷"是一款基于JavaScript和HTML5技术实现的经典扫雷游戏，它模拟了Windows系统中的扫雷体验，但不支持右键点击功能。在本文中，我们将深入探讨JavaScript、HTML5以及如何利用它们来构建这样的游戏。 首先...
原生js实现的扫雷小游戏
02-26
【原生JS实现的扫雷小游戏】是一款基于JavaScript语言开发的经典电脑游戏，旨在提供一个纯JavaScript环境下的扫雷体验。这款游戏的实现展示了JavaScript在构建交互式网页应用方面的强大能力，尤其是对于事件处理、...
web前端 扫雷 小游戏 适合初学者入门
02-26
在本项目中，"web前端 扫雷 小游戏 适合初学者入门"是一个适合新手学习的实践项目，它利用JavaScript、HTML和CSS这三种基本的Web前端技术来实现一个经典的扫雷游戏。这个小游戏可以帮助初学者理解如何将编程概念转化...
minesweeper:用于控制台和 Web 的扫雷器的 Vanilla JS 实现
05-29
扫雷车用极简的软件设计实现扫雷游戏此时的UI是在控制台中，添加一个带有HTML/CSS或图形引擎的新UI应该是实现draw和drawGameOver的UI界面方法的drawGameOver 。开始使用节点 7.0.0$ npm install$ npm test$ npm ...
CSS3弹性布局文字超出省略号代替不起作用解决方法
iMeta
01-26 6822
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalab
ionic 里使用 iframe 可能遇到的问题
iMeta
03-21 5582
无法访问外部url的问题–两个步骤解决：1.iframe的src属性用ng-src属性替代，并指明绑定对象：ng-src="{{targetUrl}}"2.在controller里，调用$sce: $scope.targetUrl = $sce.trustAsResourceUrl(url)高度无法最大化的问题–两个步骤：1.ion-content 属性里添加 scroll="true" overf
ionic & AngularJS 传递url类型的参数
iMeta
03-21 2093
ionic用的是ui-router，如果参数是一个路径，直接使用：url: "/newslist/:url",就会出现问题，比如当传递的时候：href="#/tab/{{u}}"，假如u的值为http://isunday.top，那么拼接起来就会变成：#/tab/http://isunday.top，造成错误。so，定义path类型的路由应该如下：url: "/newslist/{path:.*}"
node.js实现扫雷
06-10
好的，实现扫雷游戏需要先了解一下游戏规则和基本原理。 游戏规则： 扫雷游戏是一种单人益智游戏。游戏区域被分为许多单元格，有些单元格下面有地雷。游戏的目标是揭示出所有没有地雷的单元格，同时不揭开任何地雷。当揭开一个地雷时游戏就结束了。如果成功地揭示出所有没有地雷的单元格，游戏就胜利了。 基本原理： 游戏区域被分为许多单元格，每个单元格有三种状态：覆盖状态、揭示状态和标记状态。覆盖状态表示该单元格还没有被揭示，揭示状态表示该单元格已经被揭示，标记状态表示该单元格被标记为地雷。在游戏开始时，随机生成若干个地雷，将它们分布在游戏区域中。当玩家点击一个单元格时，如果该单元格下面有地雷，游戏失败，否则将该单元格变为揭示状态，如果该单元格周围没有地雷，就会自动揭示周围的单元格，直到揭示到有地雷的单元格或者揭示到边缘为止。玩家可以用鼠标右键将一个单元格标记为地雷，标记状态的单元格不会被揭示。 以下是一个简单的实现扫雷游戏的示例代码，使用Node.js和控制台输出实现： ```javascript const readline = require('readline'); // 游戏参数，可以根据需要进行修改 const ROWS = 10; // 行数 const COLS = 10; // 列数 const MINES = 10; // 地雷数 // 游戏状态 const STATE_COVERED = 0; // 覆盖状态 const STATE_MARKED = 1; // 标记状态 const STATE_REVEALED = 2; // 揭示状态 // 单元格对象 class Cell { constructor() { this.mine = false; // 是否为地雷 this.state = STATE_COVERED; // 单元格状态 this.adjacentMines = 0; // 周围地雷数 } } // 游戏对象 class Minesweeper { constructor() { this.board = []; // 游戏区域 this.gameOver = false; // 游戏是否结束 this.uncoveredCount = 0; // 已经揭示的单元格数量 this.initBoard(); // 初始化游戏区域 } // 初始化游戏区域 initBoard() { // 生成空白的游戏区域 for (let i = 0; i < ROWS; i++) { this.board.push([]); for (let j = 0; j < COLS; j++) { this.board[i].push(new Cell()); } } // 随机生成地雷 let count = 0; while (count < MINES) { let row = Math.floor(Math.random() * ROWS); let col = Math.floor(Math.random() * COLS); if (!this.board[row][col].mine) { this.board[row][col].mine = true; count++; } } // 计算每个单元格周围的地雷数 for (let i = 0; i < ROWS; i++) { for (let j = 0; j < COLS; j++) { if (!this.board[i][j].mine) { let count = 0; for (let r = i - 1; r <= i + 1; r++) { for (let c = j - 1; c <= j + 1; c++) { if (r >= 0 && r < ROWS && c >= 0 && c < COLS && this.board[r][c].mine) { count++; } } } this.board[i][j].adjacentMines = count; } } } } // 揭示单元格 reveal(row, col) { let cell = this.board[row][col]; if (cell.state !== STATE_COVERED || this.gameOver) { return; } cell.state = STATE_REVEALED; this.uncoveredCount++; // 如果揭示到了地雷，游戏结束 if (cell.mine) { this.gameOver = true; this.showBoard(); console.log('Game over!'); return; } // 如果所有没有地雷的单元格都被揭示了，游戏胜利 if (this.uncoveredCount === ROWS * COLS - MINES) { this.gameOver = true; this.showBoard(); console.log('Congratulations, you win!'); return; } // 如果揭示到的单元格周围没有地雷，继续揭示周围的单元格 if (cell.adjacentMines === 0) { this.revealNeighbors(row, col); } this.showBoard(); } // 揭示周围的单元格 revealNeighbors(row, col) { for (let r = row - 1; r <= row + 1; r++) { for (let c = col - 1; c <= col + 1; c++) { if (r >= 0 && r < ROWS && c >= 0 && c < COLS && !(r === row && c === col)) { this.reveal(r, c); } } } } // 标记单元格 mark(row, col) { let cell = this.board[row][col]; if (cell.state === STATE_COVERED) { cell.state = STATE_MARKED; } else if (cell.state === STATE_MARKED) { cell.state = STATE_COVERED; } this.showBoard(); } // 显示游戏区域 showBoard() { console.clear(); console.log(' ' + Array.from({ length: COLS }, (_, i) => i + 1).join(' ')); for (let i = 0; i < ROWS; i++) { let row = []; for (let j = 0; j < COLS; j++) { let cell = this.board[i][j]; if (cell.state === STATE_COVERED) { row.push('.'); } else if (cell.state === STATE_MARKED) { row.push('F'); } else { row.push(cell.mine ? '*' : cell.adjacentMines === 0 ? ' ' : cell.adjacentMines); } } console.log((i + 1) + ' ' + row.join(' ')); } console.log(); } } // 读取用户输入 const rl = readline.createInterface({ input: process.stdin, output: process.stdout }); // 创建游戏对象 const game = new Minesweeper(); // 开始游戏 console.log('Welcome to Minesweeper!'); game.showBoard(); rl.on('line', (input) => { let parts = input.split(' '); if (parts.length !== 3 || !/^[rm]$/i.test(parts[0]) || isNaN(parts[1]) || isNaN(parts[2])) { console.log('Invalid input, please try again.'); return; } let row = parseInt(parts[1]) - 1; let col = parseInt(parts[2]) - 1; if (row < 0 || row >= ROWS || col < 0 || col >= COLS) { console.log('Invalid row or column, please try again.'); return; } if (parts[0].toLowerCase() === 'r') { game.reveal(row, col); } else { game.mark(row, col); } }); ``` 运行以上代码，可以在控制台上玩扫雷游戏。例如，输入 `r 1 1` 可以揭示第一行第一列的单元格，输入 `m 2 3` 可以将第二行第三列的单元格标记为地雷。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值