VML+js 完成网页版扫雷
炸.gif
空.gif
标记.gif
未知.gif
最近在培训js，试着用js做个扫雷。
未解决问题：当载入多个行列的时候 会加载很长时间，不知道怎么解决，求解……
下面是代码：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>扫雷GAME</title>
</head>
<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<script language="JavaScript">
var desk; //数组 显示用 V:image元素
var boom; //数组 标记用 整数
var isGameStart=false;//标记 游戏是否开始
var isEmpty=false;//标记 所点击的是否为空
var isGameEnd=false;//标记 游戏是否结束
var l=9,h=9;//行数和列数
var boomnum=10;//雷个数,不要超过最大显示数
var x0=10;y0=10;//扫雷区域显示的位置
//
//游戏初始化 body onload时载入
//初始化boom数组
//载入显示控件
//
function init()
{
boom=Array(l*h);
for(i=0;i<h;i++)
{
for(j=0;j<l;j++)
{
position=i*l+j;
boom[position]=0;
}
}
drawGame();
}
//
//右键点击时发生
//如果没有标记 对应boom数会加上40
//已经标记 对应boom数减去40
//
function RBclick(obj,num)
{
if(boom[num]<40)
{
obj.src="标记.gif";
boom[num]+=40;
return;
}
if(boom[num]>=40&&boom[num]<50)
{
obj.src="未知.gif";
boom[num]-=40;
return;
}
}
//
//鼠标点击控件时发生调用 会传入控件 和控件在数组中位置
//左键单击初始化雷
//
function dian(obj,num)
{
if(isGameEnd) return;
if(event.button==2)
{
RBclick(obj,num);
}
if(event.button==1)
{
if(!isGameStart)
{
isGameStart=true;
giveBoom(num);
saveBox();
}
LBclick(obj,num);
}
}
//
//左键点击控件时候发生
//如果控件被标记 直接返回
//
function LBclick(obj,num)
{
if(boom[num]>=40)return;
drawNum(obj,num);
}
//
//左键点击控件时候发生
//如果boom对应标记为1 游戏结束
//否则判断如果周围没有雷 调用clearDesk点击周围控件
//如果周围有雷 显示雷个数
//
function drawNum(obj,num)
{
if(boom[num]==1)
{
isGameEnd=true;
gameEnd();
}
else
{
obj.src="空.gif";
boom[num]+=50;
x=num%l;
y=parseInt(num/l);
strElement="<v:TextBox style='position:absolute;z-index:4;top:"+y*25+";left:"+(x*25+6) +";width:24;height:25;COLOR:#ff0000;font-size:20.2pt;'>"+getNum(x,y)+"</v:TextBox>";
var newPoint = document.createElement("v:TestBox");
newPoint.innerHTML=strElement;
obj.parentNode.insertBefore(newPoint,obj);
if(isEmpty)
{
isEmpty=false;
clearDesk(x,y);
}
}
}
//
//雷初始化时候调用
//初始化控件数组
//
function saveBox(x,y)
{
desk=Array(l*h);
temp=document.getElementById("as").childNodes;
for(i=0;i<temp.length;i++)
{
desk[i]=temp[i];
}
}
//
//返回x,y控件周围的雷个数
//如果为0设置isEmpty=true;
//
function getNum(x,y)
{
i=0;
if(x>0&&y>0)if(boom[(y-1)*l+x-1]%10==1) i++;
if(y>0)if(boom[(y-1)*l+x]%10==1) i++;
if(y>0&&x<l-1)if(boom[(y-1)*l+x+1]%10==1) i++;
if(x>0)if(boom[(y)*l+x-1]%10==1) i++;
if(x<l-1)if(boom[(y)*l+x+1]%10==1) i++;
if(x>0&&y<h-1)if(boom[(y+1)*l+x-1]%10==1) i++;
if(y<h-1)if(boom[(y+1)*l+x]%10==1) i++;
if(y<h-1&&x<l-1)if(boom[(y+1)*l+x+1]%10==1) i++;
if(i!=0)
return ""+i;
else
{
isEmpty=true;
return "";
}
}
//
//点击x,y周围的控件
//如果周围控件对应boom为50表示已经被点击
//
function clearDesk(x,y)
{
if(x>0&&y>0)if(boom[(y-1)*l+x-1]!=50)
LBclick(desk[(y-1)*l+x-1],(y-1)*l+x-1);
if(y>0)if(boom[(y-1)*l+x]!=50)
LBclick(desk[(y-1)*l+x],(y-1)*l+x);
if(y>0&&x<l-1)if(boom[(y-1)*l+x+1]!=50)
LBclick(desk[(y-1)*l+x+1],(y-1)*l+x+1);
if(x>0)if(boom[(y)*l+x-1]!=50)
LBclick(desk[(y)*l+x-1],(y)*l+x-1);
if(x<l-1)if(boom[(y)*l+x+1]!=50)
LBclick(desk[(y)*l+x+1],(y)*l+x+1);
if(x>0&&y<h-1)if(boom[(y+1)*l+x-1]!=50)
LBclick(desk[(y+1)*l+x-1],(y+1)*l+x-1);
if(y<h-1)if(boom[(y+1)*l+x]!=50)
LBclick(desk[(y+1)*l+x],(y+1)*l+x);
if(y<h-1&&x<l-1)if(boom[(y+1)*l+x+1]!=50)
LBclick(desk[(y+1)*l+x+1],(y+1)*l+x+1);
}
//
//游戏结束，显示所有雷的位置
//
function gameEnd()
{
for(i=0;i<desk.length;i++)
{
if(boom[i]%10==1)
{
desk[i].src="炸.gif";
}
}
}
//
//返回min 和max之间的随机数;
//
function randNum(min,max)
{
return Math.floor(Math.random()*abs(max-min)+min);;
}
//
//在boom数组中随机产生boomnum个1
//
function giveBoom(num)
{
i=0;
var max=l*h-1;
while(i<boomnum)
{
temp=randNum(0,max);
if(temp!=num&&boom[temp]!=1)
{
i++;
boom[temp]=1;
}
}
}
//
//body load时被调用 初始化控件
//太多会很慢 不知道怎么解决……
//
function drawGame()
{
str="<v:group ID='as' style='top:"+x0+";left:"+y0+";position:absolute;WIDTH:50px;HEIGHT:200px;' coordsize = '50,200'>";
for(i=0;i<l;i++)
{
for(j=0;j<h;j++)
{
str+="<v:image src='未知.gif' id='"+(i*l+j)+"' onMouseDown='dian(this,"+(i*l+j)+");' style='position:absolute;top:"+i*25+";left:"+j*25+";width:25;height:25'></v:image>";
}
}
str+="</v:group>";
document.getElementById("gameDesk").innerHTML=str;
}
//
//阻止右键菜单
//
document.oncontextmenu=function()
{
return false;
}
</script>
<body onload="init();" onselectstart="return false;">
<div id=gameDesk>
</div>
<div ><h1 ></h1></div>
</body>
</html>
