html扫雷源码js,js实现扫雷源代码.pdf

js实实现现扫扫雷雷源源代代码码

经过一段时间学习，对javascript有了一个初步的了解自己制作了一个扫雷，源代码+详细注 放在后面，先看下效果图。

初始化界面：

游戏界面：

难易程度切换：

游戏结束：

思思路路

采用构造函数的形式进行全局开发

生生成成游游戏戏棋棋盘盘

利用双层for循环创建设定的棋盘大小

为每个单元格的dom元素创建一个属性，该属性用于保存单元格的所有信息，如x,y坐标,value,是否为雷等

随随机机生生成成炸炸弹弹

利用随机数，随机生成炸弹x,y坐标，并将符合该坐标信息的单元格的属性更改为雷

炸弹是在用户第一次点击的时候生成，防止用户第一次点击到炸弹

将生成的每个炸弹信息都保存到一个this变量中，方便后续使用

遍历每个炸弹周围的非炸弹方格，每遍历一次value值+1

鼠鼠标标左左键键点点击击

点击的时候需要考虑该单元格是否有被标记小旗子 (isFlag属性)，如果有则无法点击

判断是雷还是数字，雷的话则游戏结束，数字则继续判断是否等于0，等于0则使用递归显示空白区域

每次打开一个单元格，需要更改该单元格的isOpen属性，表示单元格被打开

鼠鼠标标右右键键点点击击

点击时需要考虑该单元格的isOpen属性是否被打开，打开的话则无法点击

当该单元格没有标记旗帜时标记，如果有标记旗帜则取消标记

每标记一个方格，剩余炸弹数量-1，取消标记则+1

游游戏戏结结束束

当左键点击到炸弹的时候游戏结束。失败

剩余炸弹数量为0时。判断旗帜标记是否正确，正确游戏胜利，标记有误则失败

HTML代代码码

超短的HTM 代码

1

2

3

4

5

6

7

Do ument

8

9

10

11

12

13

14 初级

15 中级

16 高级

17

18

19 剩余雷数量：

20

21

22

23

24

25

CSS代代码码

1 .main .header {

1 .main .header {

2 text-align: enter;

3 margin: 20px auto;

4 }

5

6 .main .gameBox table {

7 border-spacing: 1px;

8 background-color: rgb(170, 170, 170);

9 text-align: enter;

10 margin: 20px auto;

11 }

12

13 .main .gameBox table td.mine {

14 /* 游戏结束时显示 */

15 border: none;

16 background: url(./../img/mine.png) no-repeat;

17 ba