JS版连连看（这年头这么多用JS写怀旧小游戏的，俺也赶流行发一个）,该如何处理

JS版连连看（这年头这么多用JS写怀旧小游戏的，俺也赶流行发一个）
这年头这么多用JS写怀旧小游戏的，俺也赶流行发一个。

N年前下过笨狼大侠的代码收集里面有个JS的连连看，
后来丢了，当年的网站也打不开了。

前一阵子无聊自己手写了一个，没考虑兼容啥的。
赶流行，也放上来。 O(∩_∩)O

JScript code

 
  <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> 
 

HTML code

<style type="text/css">    td{cursor: pointer;}</style>
[解决办法]
相当漂亮，
我也想做一个， 不过受桌面程序的影响， 一直没有找到一个在两点之间画线的方案， 所以就没写。
[解决办法]

[解决办法]
頂LZ。。
[解决办法]
又见js游戏，呵呵
[解决办法]
不错
[解决办法]
不错,相当好,可以把图修改漂亮些,可以出手了
[解决办法]
不错不错 值得学习
[解决办法]
qiang
[解决办法]
呵呵 。收藏起来慢慢研究。。
[解决办法]
hoho~
[解决办法]

[解决办法]
强。。。。。。。。。
[解决办法]
感觉好难哦。。水平低啊。没办法看懂。
------解决方案-------------------- 
 
学习~
[解决办法]
果然现在流行JS怀旧  小弟我自己刚无聊整了个JS的华容道玩
[解决办法]
不错！支持LZ！！！
[解决办法]
哈哈    lz也赶时髦 哈  顶个  写的不错
[解决办法]
不错，，支持一下
[解决办法]
太强了，太强了。
[解决办法]
支持
[解决办法]
支持支持！ ^_^
[解决办法]
LZ,牛A和C之间啊
[解决办法]
狂向楼上顶
[解决办法]
顶~~~~~~~~~
[解决办法]
太帅了！~！~
[解决办法]

有时更改行列后重置不成功，主要是列，未按新值设置。

[解决办法]
很强
[解决办法]
up
[解决办法]
不错
[解决办法]
路过，看一下。。。呵呵。。
[解决办法]
牛
[解决办法]
强
[解决办法]
强大...
[解决办法]
不错么  顶顶
[解决办法]
强哦！！！！～～～楼主可以往web game 的方向努力一下，现在这个可是热门。& 蹭分～～
[解决办法]
有意思
[解决办法]
进过本人使用，的确还可以！很不错！
[解决办法]
。
[解决办法]
收藏/
[解决办法]
收藏
[解决办法]
学习学习
[解决办法]



[解决办法]
接分～
[解决办法]
耍了一下，不错啊~~嘿嘿~~支持原创~~~
[解决办法]
太牛了
[解决办法]
....LZ头像是恶魔辩护师？- -
[解决办法]
牛
但是楼主的那个时间只会减少而不会随着玩家的得分而增加
[解决办法]
顶下
------解决方案-------------------- 
 
这个一定要顶～～～～
学习
[解决办法]
不错，学习
[解决办法]
没有最强！只有更强！不错！
[解决办法]
牛
[解决办法]
探讨

~jF

[解决办法]
收藏。
[解决办法]
HTML 写的吗？
支持下，收藏！
[解决办法]
厉害哦~
[解决办法]
玩了下，好厉害！
楼主好强啊！
[解决办法]
学习中，路过
[解决办法]
收藏
[解决办法]
好啊好啊，都公布点吧！嘿嘿。。。
[解决办法]
收藏！
[解决办法]
不错
[解决办法]

[解决办法]
我也想写个，可惜不会么，学习。。。。
[解决办法]
新手提问： 那些图片是怎么生成的啊。。。。。。。。。。。。。。
[解决办法]
TmpStr += String.fromCharCode(Matrix[i][j] + OffSet) 怎么能生成 汽车，滑雪人等图案啊。。。。。
[解决办法]
精华，学习
[解决办法]
不错。
  争取为JS打出一片天下 哈哈
[解决办法]
呵呵，什么时候才能自己也写一个啊
[解决办法]
强。。。。。。。。。
[解决办法]
jf 哈哈
[解决办法]
牛。。。
[解决办法]
路过，顶顶！！
[解决办法]
不错
[解决办法]
强啊
[解决办法]
好东西。。。
[解决办法]
太强悍了
[解决办法]
厉害
[解决办法]
好！很好！非常好！相当的好！真他妈的好！聪明绝顶的好！
[解决办法]
up
[解决办法]
不错不错
[解决办法]
firefox能用吗
------解决方案-------------------- 
 
slowhand 比我写的好！~~~
[解决办法]
抛砖引玉
我把那连连看放在国家药监局的项目里做彩蛋，只要3击菜单的某一条就会出来。
那项目有时候在新闻联播能看到，sars,H1N1或者什么药出了问题，新闻就可能出现人调用那网数据的情况。
每到电视上出现我熟悉的界面，我就会和旁边人（一般是我老婆）说：快看，这个程序是我做的，现在还运行！里边我藏了个彩蛋！~~~
[解决办法]
汗，楼主真的好牛额
[解决办法]
lz强人
[解决办法]
探讨

抛砖引玉
我把那连连看放在国家药监局的项目里做彩蛋，只要3击菜单的某一条就会出来。
那项目有时候在新闻联播能看到，sars,H1N1或者什么药出了问题，新闻就可能出现人调用那网数据的情况。
每到电视上出现我熟悉的界面，我就会和旁边人（一般是我老婆）说：快看，这个程序是我做的，现在还运行！里边我藏了个彩蛋！~~~