扫雷小游戏

引言

前阵子无聊,LOL也不是很想玩,发现了电脑中自带的扫雷,当时在一个神奇的地方，用的是一个windows2000的系统界面可是扫雷确是win7的样式,玩了几句几局，其中有一局很崩溃，我先上图为敬。

>

这种状况,就是考验运气的时候了，可是果不其然。。。

我成功选择了有炸弹的那一个，从这里面我明白了一个道理，那就是：成功须要99%的努力再加上1%的运气。。。。。。

原理(思路)

布局

玩了几句搞清了游戏规则,就想本身动手作一个,由于之前作过 2048,因此首先想到的就是用二维数组布局

添加三个难度的按钮

<a class="type" href="#" data-width="9" data-height="9" data-mine="10">简单</a>
<a class="type" href="#" data-width="16" data-height="16" data-mine="40">中级</a>
<a class="type" href="#" data-width="30" data-height="16" data-mine="99">高级</a 复制代码

点击相应按钮经过 js 获取对应的 data 属性,而后动态的生成相应的方格,而后动态计算包裹全部小方格的宽度和高度,为了之后方便操做每个小方格,给每个小方格按行列添加独有的 id 。

盒子对象

属性

由于扫雷是对每一个格子进行操做，所以我把每一个格子都当作一个独立的个体，这个个体具备属性和方法，就至关于一个小对象。定义了两个数组

//表明盒子身份的数组
var boxArr = [];
//用于存储周围八个格子中雷的个数
var MineArr = [];
复制代码

经过这两个数组,我能够知道每一个格子是不是炸弹,还有每一个格子周围对应八个格子中有多少个炸弹，这属于格子对象的属性。

方法

盒子对象还有鼠标按下和抬起的方法，这里要注意，不要给每一个盒子都添加事件。假设有100个盒子的话，就要添加100个事件，事实上高级难度下的盒子话还有更多，这样就不如在container上绑定事件，利用冒泡。也能够实现相同的效果，而且只须要绑定一个事件

container.on('mousedown', '.box', function (e) {
  $(e.target)//获取点击到的class为box的元素
}
复制代码

，有的时候格子的MineArr里面存的多是0,这就表明他周围8个不存在炸弹,像这种的话就直接将其周围的八个格子直接自动点开就行了,下面这幅图，我只点了一下,就是点到了MineArr[i][j]==0的格子,而后让他周围八个直接显示MineArr中的数值,若是周围八个格子还有MineArr[i][j]==0的状况，就继续打开去显示。

扫雷中还有一个必定要有的方法就是左右键一块儿按一个点开的格子，会自动判断周围格子中你标记雷的个数和你点击的这个格子的数值。若是你标记雷的个数等于左右键点击的格子中的数值，他会自动帮你点开剩下的还没点击过的格子，这些格子中可能有雷也可能没雷，这要看你本身标记的雷是否是对的。

这个也蛮好实现,右键按下的时候将周围没点击过也没被标记过雷的方格添加带有别的颜色的class，而后记录周围八个方格标记的雷的个数，而后在右键松开的时候移除此class,并判断刚记录的标记的雷的个数和当前点击的格子的数值是否相等，而后去作下一步处理。

成功失败判断

失败很好判断，点中了boxArr为1的格子就判失败，就是点中了雷。

成功的话我是经过点击出来的格子的数量来判断的，成功显现的格子只要等于总格子减去雷的格子就判断为游戏胜利

总结

虽然是一个比较简单的游戏，可是本身在作的时候仍是碰到过很多的bug,也学到了蛮多的,这里列一下。

清空问题

• 每次建立新的格子都要清空上次建立的全部格子

• 我是采用冒泡的方式给盒子添加的点击事件，是添加在container上的，而后container是不消失的，因此每次建立新格子前还要将container上的事件解绑

右键

右键在网页上是有默认行为的，在这个游戏中要禁掉

//去掉默认的contextmenu事件，不然会和默认右键事件同时出现。
document.oncontextmenu = function (e) {
  e.preventDefault();
};
复制代码

each()

jquery中的each是不能用break跳出的。是用return false代替的break,return true或return代替的continue

最后

还有一些我思路上或者说写法中存在的小bug,我用相应的方法去解决掉了。你们能够看源码,由于花的时间比较短,可能里面还存在一些问题,还请大佬们多多包涵,也欢迎大佬们来指正。本小白感激涕零

小游戏试玩

各位巨佬喜欢的话，no have face 的求个 star

项目地址