原生js小游戏之扫雷
在经过一段时间js的学习之后,决定去使用所学的知识去锻炼下自己,因此就写了这个扫雷的小游戏。目前还有两个未解决的bug是现在我查阅资料无法改的。不过这个小游戏还是可以玩的。
对于扫雷,要实现在我们的网页上,首先就是其布局,每一个人都有每一个人不同的布局方式,下面就是我整个项目的思路。
第一,对于页面布局
一共分为以下几块,第一将整个页面设置一个背景,第二设置开始按键,第三设置游戏区域,第四设置结束和成功区域
在这里,我并没有一开始就去实现游戏格子的数量,而是通过js来自动生成格子数,下方是代码部分,将生成格子的代码放入到一个函数中。
第二就是对于游戏的功能
要解决的功能如下,第一随机产生地雷,第二扩散,第三周围雷的判定,第四插旗,雷数量减少。
首先就是解决的就是产生随机地雷,我们可以通过随机数的方式产生,并且将有这个随机数的加上一个class选择其,用于标记其实雷。在这里需要注意的是,我们去获取上面所说通过js产生的格子的class选择器时,只能在局部去获取,否则将发生错误。
第二就是扩散问题鼠标左键点击,如果是数字0整个区域就扩散,如果不是则,整个区域就不扩散。在这一部分,采用了一个递归的思想,其中的n表示周围的地雷数。如果周围的地雷数一直都是0的话,就调用这个函数,知道n不为了0时,扩散结束。
第三就是周围雷数量的判定,首先我已经在产生的小格数中,设置了一个id选择器,就是通过这个id选择器来获取的当前位置,然后通过for循环的嵌套,来实现周围八个格子的选取,然后再来查询这个八个格子中,是否含有我之前为每个含有雷的格子所设置的class属性,最后就达到了判定周围八个格子的地雷数。
第四,就是插旗与雷数量减少,这个是鼠标右键的功能,首先如果这个格子上点击了,产生了数字的话,就不能再进行插旗,第二就是如果插上旗的话,就会自动添加一个名为flag的class选择器。如果这个格子中的选择器中有之前标记的雷的选择器,则表明获取成功,然后显示雷的数量减少。下面就是其代码部分
在做扫雷这个小游戏中,还遇到过很多错误和很多问题,都是自己慢慢的去解决的,通过这次的练习,加深了我对js的认识与使用。