js实现网页版扫雷,新手,如何实现除显示当周边无雷时将周边的无雷区全部显示出来。

JavaScript04

js实现网页版扫雷,新手,如何实现除显示当周边无雷时将周边的无雷区全部显示出来。,第1张

用递归啊。你肯定已经做了一个方法用来检测当前点周边8个点是否无雷了吧?对于无雷的点逐个再次调用该方法。

以下是伪码示例. isBad是用来检测指定的点是否是雷的方法

function checkRimPoint(x, y) {

    var points = [[x-1,y-1],[x,y-1],[x+1,y-1],[x-1,y],[x+1,y],[x-1,y+1],[x,y+1],[x+1,y+1]

    for(var i = 0i <points.lengthi++) {

        if (! isBad(points[i][0], points[i][1])) {

            showPoint(points[i][0], points[i][1]))//这个不是雷,调用方法显示这个点

            checkRimPoint(points[i][0], points[i][1]))//对该点递归处理

        }

    }

}

以上只是个思路,没有实际价值哦,我记得展开后的效果一种可能是到边界了,另一种可能就是显示周围有几个雷的那种数字框。不过核心就是递归处理。

如果有帮助的话望采纳

1)jquery.tableGen.js,这段js的作用是产生一个表格,表格中显示数字和雷区,调用的方法很简单,如下:

var options ={

rows:5,

cols:5,

percent:0.1

}

$("table").tableGen(options) 

思路是:根据table的单元格的数目随机产生percent的雷,并填充td。然后遍历所有的td,查找周围雷的个数来填充单元格的数字

[javascript] view plain copy

var neigUp = new Array()

var neig = new Array()

var neigDw = new Array()

var cols,rows

var table,tds

var colors =["black","blue","red","orange","yellow","green","black","black"]  var mineNum 

function($){

var randoms = function(max,percent){

// General digital between 0 and max num times

if(!max)max =100

if(!percent) percent =0.1

num = max*percent

var i=0

var arr = new Array()

while(i<num)   arr[i++]=Math.floor(Math.random()*max)

return arr

}

$.fn.tableGen = function(options){

var setting = $.extend({

rows:10,

cols:10,

percent:0.1

},options || {}

)

rows = setting.rows

cols = setting.cols

neigUp = [-(cols+1),-cols,-(cols-1)]

neig =[-1,1]

neigDw =[cols-1,cols,cols+1] 

var str = ""

for(var j=0j<setting.rowsj++){

str+="<tr>"

for(var i=0i<setting.colsi++){

str+="<td>"+i+"</td>"

}

str+="</tr>"

}

this.empty()

this.append(str)

$("td",this).addClass("org")       // orginal color

//fill

var arr = randoms(setting.rows*setting.cols,setting.percent)

tds = $("td",this)

mineNum = arr.length

for(var i=0i<arr.lengthi++){

$(tds[arr[i]]).addClass("mine").html("<span>"+"*"+"</span>").find("span").css("opacity",0)

}

// add tips number to regular cells

var $this =this

tds.each(function(i){

if($(this).text() == "*") return

var cnt = 0

var seq = i

for(var i=0i<neig.lengthi++){

var p = neig[i]+seq

if(tds[p]&&Math.floor(p/cols) == Math.floor(seq/cols) && $(tds[p]).text() == "*") cnt++

}

for(var i=0i<neigUp.lengthi++){

var p = neigUp[i]+seq

if(tds[p]&&Math.floor(p/cols)+1 == Math.floor(seq/cols )&& $(tds[p]).text() == "*") cnt++

}

for(var i=0i<neigDw.lengthi++){

var p = neigDw[i]+seq

if(tds[p]&&Math.floor(p/cols)-1 == Math.floor(seq/cols) && $(tds[p]).text() == "*") cnt++

}

if(!cnt)    { cnt = "" colors[""]=""}

$(this).html("<span>"+cnt+"</span>").css("color",colors[cnt]).find("span").css("opacity",0)

})

tds.addClass("mark")

} // tableGen Fn end

)(jQuery)

2)jquery.fill.js。这段代码的作用是定义点击事件,每次点击根据点击的内容来显示周围的区域或者提示成功失败

[javascript] view plain copy

(function($){

neig =[-1,1]

neigDw =[cols]

neigUp = [-cols]

var recover =function(td,table){

if(!td)       return

if(!td.attr)  td = $(td)

if(!td.hasClass("mark")){

return

}

if(td.text() == ""){

td.removeClass("mark").find("span").css("opacity",1)

}

else if(td.text() !="*"){

td.removeClass("mark").find("span").css("opacity",1)

return

}

else if(td.text() == "*"){

return

}

var seq = td.index("td",table)

tds = table.filter("td")

/*----------------------------*/

for(var i=0i<neig.lengthi++){

var p = neig[i]+seq

if(tds[p]&&Math.floor(p/cols) == Math.floor(seq/cols) && $(tds[p]).text() != "*") {

recover($(tds[p]),table)

}

}

for(var i=0i<neigUp.lengthi++){

var p = neigUp[i]+seq

if(tds[p]&&Math.floor(p/cols)+1 == Math.floor(seq/cols )&& $(tds[p]).text() != "*") {

recover($(tds[p]),table)

}

}

for(var i=0i<neigDw.lengthi++){

var p = neigDw[i]+seq

if(tds[p]&&Math.floor(p/cols)-1 == Math.floor(seq/cols) && $(tds[p]).text() != "*") {

recover($(tds[p]),table)

}

}

}

$.fn.fill = function(){

table = $(this)

tds =$("td",table)

var mineCnt = 0

tds.click(function(event){

if($(this).text() != "*"){

if(event.altKey){

tds.removeClass("mark").find("span").css("opacity",1)

var rs = confirm("No Bomb here !Bad Luck,Try Again?")

if(rs){

table.tableGen(options).fill()

}

return

}

}

if($(this).text() == "*"){

$(this).removeClass("mark").find("span").css("opacity",1)

var event = event || window.event

if(event.altKey){

mineCnt++

if(mineCnt == mineNum){

var rs = confirm("congratulations!Try Again?")

if(rs){

table.tableGen(options).fill()

}

return

}

return

}

// Game over

tds.removeClass("mark").find("span").css("opacity",1)

var rs = confirm("Bomb!Bad Luck,Try Again?")

if(rs){

table.tableGen(options)

table.fill()

}

}

else if($(this).text() !="*" && $(this).text() !=""){

$(this).removeClass("mark").find("span").css("opacity",1)

}

else

recover($(this),tds)

})

}

})(jQuery)

[html] view plain copy

<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.table.js"></script>

<script type="text/javascript" src="jquery.fill.js"></script>

<title>Mine</title>

<style type="text/css">

table{

table-layout: fixed

}

.org {

border:1px solid black

background-color:white

overflow: hidden

width: 10px

height:10px

}

.mine{

}

.mark{

background-color: orange

}

.flag{

background: url(flag.png)

background-color: blue

}

</style>

</head>

<body>

<h3>Mine Game</h3>

<table colspan='4'>

</table>

<script type="text/javascript" >

var options ={

rows:5,

cols:5,

percent:0.1

}

$("table").tableGen(options)

$("table").fill()

</script>

</body>

</html> -->

扫雷玩法技巧图解如下:

游戏规则很简单,点击方格,如果是地雷,游戏失败,找到所有地雷游戏胜利。

1、刚开始纯属看运气,只要点开一个区域,就可以正式开始了。1代表1的上下左右及斜角合计有一颗雷,依次轮推,2则有2颗,3则有3颗。

2、第二步,也是最重要的一步,根据现有情况,判断出一定有雷的位置。

3、接下来,就是计算,这也是很关键的一步,举个例子因为2右边的1已经有从属的雷了,所以右边的2的正下方没有雷,因此可以判断出左边有两颗雷,满足两个2。

4、1已经有一颗确定的雷了,这时只需要把鼠标放在1上,按住右键不放,再点一下左键,1周围的其他方块就全被点开了。这个小技巧对于提升速度非常有帮助。

5、两个2夹一个1,中心的1底下必有雷。两个2夹n,n>1个3,3底下全有雷。中心数字为1,则说明1的周围8个格里,肯定会有一个雷,即对角有雷。连续的三个1,中间的1有雷。

技巧:

1、标单雷双击:在有雷的格子上按住右键后不松开,移动到数字1上按左键,再松开右键(即1.5click)。

2、听快节奏的音乐有助于集中注意力,也能掩盖鼠标的响声。

3、降低屏幕的分辨率,同时降低鼠标的灵敏度,有助于提升操作性。

注意:

1、这是一个熟能生巧的游戏, 新手可以先从初级开始, 一步一步来。

2、不要执着于一个格子 ,可以先试试从别的地方开始找。

3、不要乱猜格子下是否有雷 ,每个格子跟每个格子间都有联系。

4、扫雷的bug:打开扫雷界面,输入XYZZY ,按一下右下角的shift键,这时,鼠标放在雷区,在方格区活动,你会看到屏幕左上角有个小光点在一闪一闪。