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

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

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

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

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

144 个解决方案

#1

支持LZ SF哈哈

#2

强...

#3

不错

#4

~jF

#5

呵呵 看来论坛要掀起流行风了

#6

DING  ...lz

#7

顶```

#8

#9

#10

支持lZ。呵呵，收藏了

#11

加上这个用户体验应该会更好一些

<style type="text/css">
	td{cursor: pointer;}
</style>

#12

相当漂亮，
我也想做一个， 不过受桌面程序的影响， 一直没有找到一个在两点之间画线的方案， 所以就没写。

#13

#14

頂LZ。。

#15

又见js游戏，呵呵

#16

不错

#17

不错,相当好,可以把图修改漂亮些,可以出手了

#18

不错不错 值得学习

#19

qiang

#20

呵呵 。收藏起来慢慢研究。。

#21

hoho~

#22

#23

强。。。。。。。。。

#24

感觉好难哦。。水平低啊。没办法看懂。

#25

学习~

#26

果然现在流行JS怀旧  小弟我自己刚无聊整了个JS的华容道玩

#27

不错！支持LZ！！！

#28

哈哈    lz也赶时髦 哈  顶个  写的不错

#29

不错，，支持一下

#30

太强了，太强了。

#31

支持

#32

支持支持！ ^_^

#33

LZ,牛A和C之间啊

#34

狂向楼上顶

#35

顶~~~~~~~~~

#36

太帅了！~！~

#37

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

#38

很强

#39

up

#40

不错

#41

路过，看一下。。。呵呵。。

#42

该回复于2009-06-23 18:36:47被版主删除

#43

牛

#44

强

#45

强大...

#46

不错么  顶顶

#47

强哦！！！！～～～楼主可以往web game 的方向努力一下，现在这个可是热门。& 蹭分～～

#48

有意思

#49

进过本人使用，的确还可以！很不错！

#50

。