javascript 连连看代码出炉_javascript技巧

<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 += ""; } TmpStr += ""; } TmpStr += ""; 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">  列数<input id="setcol" type="text" value="9" size="2">  图片数<input id="setpic" type="text" value="12" size="2">  时间<input id="settime" type="text" value="60" size="3">秒  <button onclick="SetTab();">重置</button>  <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需刷新才能执行]