Web版扫雷 JS实现

最新推荐文章于 2024-09-03 15:37:52 发布

NNode

最新推荐文章于 2024-09-03 15:37:52 发布

阅读量6.1k

点赞数

分类专栏： Javascript Web前端文章标签： web bfs 扫雷 javascript

本文链接：https://blog.csdn.net/Jesounao/article/details/51505387

版权

博主在课程中制作了一个Web版的扫雷游戏，并使用BFS算法扩展雷区。游戏DEMO已提供，文章还讨论了BFS的空间复杂度及其在浏览器环境中的适用性。源码可在GitHub找到。

摘要由CSDN通过智能技术生成

这几天中毒了，无比迷恋扫雷游戏（摔！明明是机房机器渣到只能玩扫雷），于是在上网络互联与路由课的时候，写了个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