js实现扫雷游戏.pdfVIP

js实实现现扫扫雷雷游游戏戏

javascript作为前端常⽤的开发语⾔，越来越多的⼈都在学习它，今天就教家利⽤js来实现基本的扫雷游戏。由于本篇⽂章主要⾯向于初学

者，因此在思想上我会尽最努⼒让它简单化，若有读者看完有不明⽩请多多反馈。

预备知识：Javascript语⾔的基础知识，HTML、CSS（这⾥⽤的不多，了解⼀点即可），数据结构

⾸先，我先简单的介绍⼀下扫雷游戏的基本规则（了解规则的跳过即可）

1.初始状态，玩家只能看到若⼲个⽅格，⽅格可以被点击

2.若点击的⽅格是雷，则显⽰棋盘上的所有雷，游戏结束，当前被点击的雷块的背景颜⾊发⽣变化，并且这时点击任何⽅格将不会有任何反

应。

3.若点击的部分不是雷，并且该块的四周有雷，则该块显⽰周围雷的数量。

4.若点击的部分不是雷并且该块的四周没有雷，该块显⽰空⽩，并且周围⽆雷区域会⾃动打开。

5.右键点击，点击后可以标记玩家认为是雷的⽅格。（如图红⾊的⽅格）

主要的规则就这些，接下来整理⼀下整体思路（以9*9的棋盘为例）

1.创建棋盘边界的div

h1共span/span颗雷/h1

dividfather/div

#father{

width:468px;

height:468px;

border:3pxsolidblack;

}

2.初始化棋盘，即创建若⼲个⽅格div，并且将每个div给予⼀个id值，保证每个id是相互独⽴的，之后依次添加到边界div中即可

varsquaredocument.getElementsByTagName(div);

varspandocument.getElementsByTagName(span);

functioninit(n){

for(vari1;in;i++){

varcheckdocument.createElement(div);

check.idi;

check.setAttribute(displayName,0);

check.classNamea;

check.innerHTMLi;

check.style.width50px;

check.style.height50px;

check.style.border1pxsolidred;

check.style.backgroundColor#5ad7d7;

check.style.floatleft;

square[0].appendChild(check);

}

}

以9*9棋盘为例，因此传⼊n81

当然，在真正的游戏中是不显⽰⽅格对应id的值，因此后续需要将check.innerHTMLi;注释掉

3.构建图的数据结构

主要思路：⽤js中的字典来存储，我们知道字典中有键值对，那么每⼀个id值就可以充当字典的键，⽽该键对应的值就是四周可以检测到的

范围

如图所⽰：

中间的圆圈部分都有8个周边⽅格，

如34，周边的⽅格有24,25,26,33,35,42,43,44设当前id值为num，周边⽅格可总结为num-1,num+1,num-8,num+8,num-9,num+9,num-

10,num+10

四个⾓⽐较特殊，只有三个周边⽅格，如9，周边⽅格有8,17,18，由于格数较少，这⾥特殊处理

最后就是四周的⽅格了，分上下左右四个⽅向来考虑

上（id值于等于2⼩于等于8）：⽐如5，周边⽅格有4,6,13,14,15设当前id值为num，周边⽅格可总结为num-

1,num+1,num+8,num+9,num+10

下（id值于