首页 > 网络编程 > JavaScript > javascript技巧 > javascript 连连看

javascript 连连看代码出炉

2009-06-25 09:01:52 作者：

非常不错的连连看实现代码，大家可以运行下，看下效果。

<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
var RowMax = 42;//列数 
var ColMax = 22;//行数 
var PicMax = 26;//总图片数 
var TimeMax = 60;//总时间 
var OffSet = 32;//使用系统图标webdings（从asc2的32开始）

var st;//倒计时 
var TmpStr = ""; 
var TmpObj = null; 
var TmpTime = 0; 
var TmpInt = 0;

var PicAry = new Array(PicMax);

var Matrix = new Array(RowMax); 
for(i=0; i<RowMax; i++){ 
Matrix[i] = new Array(ColMax); 
}

var P = new Array(4); 
for(i=0; i<4; i++){ 
P[i] = new Object(); 
}

//初始化 
function SetTab(){ 
clearInterval(st);//清除倒计时

//从input中取出设定值 
TmpInt = parseInt(document.getElementById("setrow").value);//列 
if(TmpInt>0 && TmpInt<41 && !(TmpInt%2)){RowMax = (TmpInt+2);} 
TmpInt = parseInt(document.getElementById("setcol").value);//行 
if(TmpInt>0 && TmpInt<21){ColMax = (TmpInt+2);} 
TmpInt = parseInt(document.getElementById("setpic").value);//图片数 
if(TmpInt>0 && TmpInt<27){PicMax = TmpInt;} 
TmpInt = parseInt(document.getElementById("settime").value);//时间 
if(TmpInt>0 && TmpInt<601){TimeMax = TmpInt;}

TmpTime = TimeMax; 
OffSet = 40 + Math.floor( (120-PicMax) * Math.random() );//图标asc2值40~120（32~158）

//图片数组，记录每种图片总数的奇偶 
for(PicNum=0; PicNum<=PicMax; PicNum++){PicAry[PicNum] = 0;} 
PicNum = 0;//总数为奇数的图片种类总数 
TmpInt = (RowMax-2) * (ColMax-2);//有效区域的图片总数

//绘制表格 
TmpStr = "<table border=\"1\">"; 
for(j=0; j<ColMax; j++){ 
TmpStr += "<tr>"; 
for(i=0; i<RowMax; i++){ 
TmpStr += "<td onclick=\"CheckP(this,"+i+","+j+");\" width=\"32\" height=\"40\"><font face=\"webdings\" size=\"6\" "

if(0==i || 0==j || (RowMax-1)==i || (ColMax-1)==j){ 
Matrix[i][j] = 0;//边界填充空单元格，连线用。 
TmpStr += ">"; 
} 
else{ 
TmpInt--; 
Matrix[i][j] = 1 + Math.floor( PicMax * Math.random() ); 
if(TmpInt<PicNum){//图片配对 
for(k=1; k<=PicMax; k++){ 
if(PicAry[k]){ 
Matrix[i][j] = k; 
break; 
} 
} 
}

//更新该类图片的奇偶数数组，以及单张图片总数 
if(PicAry[Matrix[i][j]]){ 
PicAry[Matrix[i][j]] = 0; 
PicNum--; 
} 
else{ 
PicAry[Matrix[i][j]] = 1; 
PicNum++; 
}

//填写颜色 
var tmp_color = Math.floor(0xFFFF00*Matrix[i][j]/PicMax).toString(16); 
TmpStr += "color=\"#"; 
for(k=tmp_color.length; k<6; k++) TmpStr += "0"; 
TmpStr += tmp_color; 
TmpStr += "\">";

//添图片（webdings图标） 
TmpStr += String.fromCharCode(Matrix[i][j] + OffSet);//different pics 
}

TmpStr += "</font></td>"; 
} 
TmpStr += "</tr>"; 
} 
TmpStr += "</table>"; 
TmpInt = (RowMax-2) * (ColMax-2) / 2;//剩余数量，判断结束用。 
//TmpStr += "<BGSOUND volume=-1000 src=\"emc.mid\" LOOP=-1>"//背景音乐

document.getElementById("container").innerHTML = TmpStr;//输出表格 
document.getElementById("timeleft").innerHTML = TmpTime;//显示剩余时间 
document.getElementById("timebar").style.width = 600;//时间条 
document.getElementById("timebar").style.backgroundColor = "green";

st = setInterval("ShowTime()",1000);//开始倒计时 
}

//X方向连线。（有起点，无终点） 
function LineX(x, y, xt){ 
for( i=x; i!=xt; (x<xt? i++: i--) ){ 
if(Matrix[i][y]){ 
return false; 
} 
} 
return true; 
}

//Y方向连线。（有起点，无终点） 
function LineY(x, y, yt){ 
for( i=y; i!=yt; (y<yt? i++: i--) ){ 
if(Matrix[x][i]){ 
return false; 
} 
} 
return true; 
}

//2个点被3条线连接 
function LinkP(P1,P2){

//P1在P2下方，交换P1、P2 
if(P1.y>P2.y){ 
P3=P1; 
P1=P2; 
P2=P3; 
} 
//P1下方1点（y+1）先纵向再横向是否可连接。（因为起点P1不为空，所以检测其下方一点） 
if( LineY(P1.x, (P1.y+1), P2.y) && LineX(P1.x, P2.y, P2.x) ) return true; 
//P1先向左侧连接，再检测该点再纵向再横向是否可连接P2。 
for(j=(P1.x-1); j>=0; j--){ 
if(Matrix[j][P1.y]) break; 
if( LineY(j, (P1.y+1), P2.y) && LineX(j, P2.y, P2.x) ) return true; 
} 
//P1先向右侧连接，再检测该点再纵向再横向是否可连接P2。 
for(j=(P1.x+1); j<RowMax; j++){ 
if(Matrix[j][P1.y]) break; 
if( LineY(j, (P1.y+1), P2.y) && LineX(j, P2.y, P2.x) ) return true; 
}

//P1在P2右侧，交换P1、P2 
if(P1.x>P2.x){ 
P3=P1; 
P1=P2; 
P2=P3; 
} 
if( LineX((P1.x+1), P1.y, P2.x) && LineY(P2.x, P1.y, P2.y) ) return true; 
for(j=(P1.y-1); j>=0; j--){ 
if(Matrix[P1.x][j]) break; 
if( LineX((P1.x+1), j, P2.x) && LineY(P2.x, j, P2.y) ) return true; 
} 
for(j=(P1.y+1); j<ColMax; j++){ 
if(Matrix[P1.x][j]) break; 
if( LineX((P1.x+1), j, P2.x) && LineY(P2.x, j, P2.y) ) return true; 
} 
return false;

}

//单击检测该点 
function CheckP(o,x,y){

if(Matrix[x][y]){//非空 
if(null==TmpObj){//之前无选中图片 
TmpObj = o;//选中该图片 
TmpObj.borderColor = "0000FF";//改变边框颜色 
P[0].x = x;//保存该点 
P[0].y = y; 
} 
else if(o!=TmpObj){//非同一点 
TmpObj.borderColor = "FFFFFF";//恢复边框颜色 
P[1].x = x;//保存该点 
P[1].y = y; 
if(Matrix[P[0].x][P[0].y]==Matrix[P[1].x][P[1].y]){//同一类图片 
if(LinkP(P[0],P[1])){//可以连接 
Matrix[P[0].x][P[0].y] = 0;//清零 
Matrix[P[1].x][P[1].y] = 0; 
TmpObj.innerHTML = "";//原图片显示为空 
o.innerHTML = ""; 
TmpTime++;//奖励时间

TmpInt--;//剩余图片减1 
if(!TmpInt){//剩余图片为0 
clearInterval(st);//清除倒计时 
document.getElementById("container").innerHTML = ""; 
document.getElementById("timeleft").innerHTML = ""; 
document.getElementById("timebar").style.backgroundColor = "white"; 
alert("完成！"); 
} 
} 
} 
TmpObj = null;//无选中图片 
} 
} 
else{ 
if(TmpObj){TmpObj.borderColor = "FFFFFF";}//恢复边框颜色 
TmpObj = null;//无选中图片 
} 
}

function ShowTime(){ 
TmpTime--;//时间减1 
//更新时间显示 
document.getElementById("timeleft").innerHTML = TmpTime; 
document.getElementById("timebar").style.width = Math.floor(600*TmpTime/TimeMax); 
if( (TimeMax/TmpTime)>4 ){ 
document.getElementById("timebar").style.backgroundColor = "red"; 
} 
else if( (TimeMax/TmpTime)>2 ){ 
document.getElementById("timebar").style.backgroundColor = "yellow"; 
}

if(!TmpTime){//剩余时间为0 
clearInterval(st);//清除倒计时 
document.getElementById("container").innerHTML = "";//清屏 
document.getElementById("timeleft").innerHTML = ""; 
document.getElementById("timebar").style.backgroundColor = "white"; 
alert("时间到！"); 
} 
} 
//--> 
</SCRIPT>

行数<INPUT id="setrow" type="text" value="16" size="2">&nbsp; 
列数<INPUT id="setcol" type="text" value="9" size="2">&nbsp; 
图片数<INPUT id="setpic" type="text" value="12" size="2">&nbsp; 
时间<INPUT id="settime" type="text" value="60" size="3">秒&nbsp; 
<BUTTON onclick="SetTab();">重置</BUTTON>&nbsp; 
<DIV id="timeleft" style="float:left;"></DIV> 
<DIV id="timebar" style="height:5;width:600;background-color:white;"></DIV> 
<DIV id="container"></DIV>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

javascript 连连看代码出炉

您可能感兴趣的文章: