javascript 消消樂 版本二

摘要:javascript 消消樂 版本二

鏘鏘鏘鏘!

姊姊想要的版本終於差不多了!

剛好在星期天的晚上完成XDDDD

接著下個星期就是給姊姊驗收以及看看需要修改什麼?

 

先上個程式碼:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TTD</title>
</head>
<script type="text/javascript">

var color = new Array(6);
for(var p=0;p<6;p++)
{
	color[p]=new Array(6);
}
var pic = new Array(6);
for(var q=0;q<6;q++)
{
	pic[q]=new Array(6);
}
var change=new Array(6);
for(var n=0;n<6;n++)
{
	change[n]=new Array(6);
}
function initial()
{
	color[0][0] = Math.floor(1 + Math.random() * 4);
	color[0][1] = Math.floor(1 + Math.random() * 4);
	color[0][2] = Math.floor(1 + Math.random() * 4);
	color[0][3] = Math.floor(1 + Math.random() * 4);
	color[0][4] = Math.floor(1 + Math.random() * 4);
	color[0][5] = Math.floor(1 + Math.random() * 4);
	color[1][0] = Math.floor(1 + Math.random() * 4);
	color[1][1] = Math.floor(1 + Math.random() * 4);
	color[1][2] = Math.floor(1 + Math.random() * 4);
	color[1][3] = Math.floor(1 + Math.random() * 4);
	color[1][4] = Math.floor(1 + Math.random() * 4);
	color[1][5] = Math.floor(1 + Math.random() * 4);
	color[2][0] = Math.floor(1 + Math.random() * 4);
	color[2][1] = Math.floor(1 + Math.random() * 4);
	color[2][2] = Math.floor(1 + Math.random() * 4);
	color[2][3] = Math.floor(1 + Math.random() * 4);
	color[2][4] = Math.floor(1 + Math.random() * 4);
	color[2][5] = Math.floor(1 + Math.random() * 4);
	color[3][0] = Math.floor(1 + Math.random() * 4);
	color[3][1] = Math.floor(1 + Math.random() * 4);
	color[3][2] = Math.floor(1 + Math.random() * 4);
	color[3][3] = Math.floor(1 + Math.random() * 4);
	color[3][4] = Math.floor(1 + Math.random() * 4);
	color[3][5] = Math.floor(1 + Math.random() * 4);
	color[4][0] = Math.floor(1 + Math.random() * 4);
	color[4][1] = Math.floor(1 + Math.random() * 4);
	color[4][2] = Math.floor(1 + Math.random() * 4);
	color[4][3] = Math.floor(1 + Math.random() * 4);
	color[4][4] = Math.floor(1 + Math.random() * 4);
	color[4][5] = Math.floor(1 + Math.random() * 4);
	color[5][0] = Math.floor(1 + Math.random() * 4);
	color[5][1] = Math.floor(1 + Math.random() * 4);
	color[5][2] = Math.floor(1 + Math.random() * 4);
	color[5][3] = Math.floor(1 + Math.random() * 4);
	color[5][4] = Math.floor(1 + Math.random() * 4);
	color[5][5] = Math.floor(1 + Math.random() * 4);
	pic[0][0]="pic00";
	pic[0][1]="pic01";
	pic[0][2]="pic02";
	pic[0][3]="pic03";
	pic[0][4]="pic04";
	pic[0][5]="pic05";
	pic[1][0]="pic10";
	pic[1][1]="pic11";
	pic[1][2]="pic12";
	pic[1][3]="pic13";
	pic[1][4]="pic14";
	pic[1][5]="pic15";
	pic[2][0]="pic20";
	pic[2][1]="pic21";
	pic[2][2]="pic22";
	pic[2][3]="pic23";
	pic[2][4]="pic24";
	pic[2][5]="pic25";
	pic[3][0]="pic30";
	pic[3][1]="pic31";
	pic[3][2]="pic32";
	pic[3][3]="pic33";
	pic[3][4]="pic34";
	pic[3][5]="pic35";
	pic[4][0]="pic40";
	pic[4][1]="pic41";
	pic[4][2]="pic42";
	pic[4][3]="pic43";
	pic[4][4]="pic44";
	pic[4][5]="pic45";
	pic[5][0]="pic50";
	pic[5][1]="pic51";
	pic[5][2]="pic52";
	pic[5][3]="pic53";
	pic[5][4]="pic54";
	pic[5][5]="pic55";
	for(var i = 0; i < 6; i++)
	{
		for(var j=0;j<6;j++){
			switch(color[i][j])
			{
				case 1:
					document.getElementById(pic[i][j]).src="red.png";
					break;
				case 2:
					document.getElementById(pic[i][j]).src="green.png";
					break;
				case 3:
					document.getElementById(pic[i][j]).src="blue.png";
					break;
				case 4:
					document.getElementById(pic[i][j]).src="yellow.png";
					break;
			}
		}
	}
	for(var i=0;i<6;i++)
	{
		for(var j=0;j<6;j++)
		{
			change[i][j]=color[i][j];
		}
	}
	if(isFinal()==false)
	{
		document.getElementById("btnReplay").style.display="inline";
	}
	else
	{
		anime();
	}
}
function anime()
{
	if(isFinal()!=false)
	{
		shouldAdd();
		setTimeout("anime();", 1000);
	}
}
var theTop1=0;
var theTop2=0;
var theTop3=0;
var theTop4=0;
var theTop5=0;
var theTop6=0;
function shouldAdd()
{
	if((color[0][0]==8)||(color[0][0]==7)||(color[0][1]==8)||(color[0][1]==7)||(color[0][2]==8)||(color[0][2]==7)||(color[0][3]==8)||(color[0][3]==7)||(color[0][4]==8)||(color[0][4]==7)||(color[0][5]==8)||(color[0][5]==7))
	{
		addNew();
	}
	else
	{
		return;
	}
} 
function addNew()
{
	for(var i=0;i<6;i++)
	{
		for(var j=0;j<6;j++)
		{
			change[i][j]=color[i][j];
		}
	}
	TheCol1();
	TheCol2();
	TheCol3();
	TheCol4();
	TheCol5();
	TheCol6();
}
function TheCol1()
{
	if((color[0][0]==8)||(color[0][0]==7))
	{
		for(var r=0;r<6;r++)
		{
			if((color[r][0]==8)||(color[r][0]==7))
			{
				if(r>=theTop1)
				{
					theTop1=r;
				}
			}
		}
		Renew1();
	}
}
function TheCol2()
{
	if((color[0][1]==8)||(color[0][1]==7))
	{
		for(var r=0;r<6;r++)
		{
			if((color[r][1]==8)||(color[r][1]==7))
			{
				if(r>=theTop2)
				{
					theTop2=r;
				}
			}
		}
		Renew2();
	}
}
function TheCol3()
{
	if((color[0][2]==8)||(color[0][2]==7))
	{
		for(var r=0;r<6;r++)
		{
			if((color[r][2]==8)||(color[r][2]==7))
			{
				if(r>=theTop3)
				{
					theTop3=r;
				}
			}
		}
		Renew3();
	}
}
function TheCol4()
{
	if((color[0][3]==8)||(color[0][3]==7))
	{
		for(var r=0;r<6;r++)
		{
			if((color[r][3]==8)||(color[r][3]==7))
			{
				if(r>=theTop4)
				{
					theTop4=r;
				}
			}
		}
		Renew4();
	}
}
function TheCol5()
{
	if((color[0][4]==8)||(color[0][4]==7))
	{
		for(var r=0;r<6;r++)
		{
			if((color[r][4]==8)||(color[r][4]==7))
			{
				if(r>=theTop5)
				{
					theTop5=r;
				}
			}
		}
		Renew5();
	}
}
function TheCol6()
{
	if((color[0][5]==8)||(color[0][5]==7))
	{
		for(var r=0;r<6;r++)
		{
			if((color[r][5]==8)||(color[r][5]==7))
			{
				if(r>=theTop6)
				{
					theTop6=r;
				}
			}
		}
		Renew6();
	}
}
function Renew1()
{
	var add1=Math.floor(1 + Math.random() * 4);
	color[theTop1][0]=add1;
	switch(color[theTop1][0])
	{
		case 1:
			document.getElementById(pic[0][0]).src="red.png";
			break;
		case 2:
			document.getElementById(pic[0][0]).src="green.png";
			break;
		case 3:
			document.getElementById(pic[0][0]).src="blue.png";
			break;
		case 4:
			document.getElementById(pic[0][0]).src="yellow.png";
			break;
	}
	setTimeout("willDown1();", 100);
}
function Renew2()
{
	var add2=Math.floor(1 + Math.random() * 4);
	color[theTop2][1]=add2;
	switch(color[theTop2][1])
	{
		case 1:
			document.getElementById(pic[0][1]).src="red.png";
			break;
		case 2:
			document.getElementById(pic[0][1]).src="green.png";
			break;
		case 3:
			document.getElementById(pic[0][1]).src="blue.png";
			break;
		case 4:
			document.getElementById(pic[0][1]).src="yellow.png";
			break;
	}
	setTimeout("willDown2();", 100);
}
function Renew3()
{
	var add3=Math.floor(1 + Math.random() * 4);
	color[theTop3][2]=add3;
	switch(color[theTop3][2])
	{
		case 1:
			document.getElementById(pic[0][2]).src="red.png";
			break;
		case 2:
			document.getElementById(pic[0][2]).src="green.png";
			break;
		case 3:
			document.getElementById(pic[0][2]).src="blue.png";
			break;
		case 4:
			document.getElementById(pic[0][2]).src="yellow.png";
			break;
	}
	setTimeout("willDown3();", 100);
}
function Renew4()
{
	var add4=Math.floor(1 + Math.random() * 4);
	color[theTop4][3]=add4;
	switch(color[theTop4][3])
	{
		case 1:
			document.getElementById(pic[0][3]).src="red.png";
			break;
		case 2:
			document.getElementById(pic[0][3]).src="green.png";
			break;
		case 3:
			document.getElementById(pic[0][3]).src="blue.png";
			break;
		case 4:
			document.getElementById(pic[0][3]).src="yellow.png";
			break;
	}
	setTimeout("willDown4();", 100);
}
function Renew5()
{
	var add5=Math.floor(1 + Math.random() * 4);
	color[theTop5][4]=add5;
	switch(color[theTop5][4])
	{
		case 1:
			document.getElementById(pic[0][4]).src="red.png";
			break;
		case 2:
			document.getElementById(pic[0][4]).src="green.png";
			break;
		case 3:
			document.getElementById(pic[0][4]).src="blue.png";
			break;
		case 4:
			document.getElementById(pic[0][4]).src="yellow.png";
			break;
	}
	setTimeout("willDown5();", 100);
}
function Renew6()
{
	var add6=Math.floor(1 + Math.random() * 4);
	color[theTop6][5]=add6;
	switch(color[theTop6][5])
	{
		case 1:
			document.getElementById(pic[0][5]).src="red.png";
			break;
		case 2:
			document.getElementById(pic[0][5]).src="green.png";
			break;
		case 3:
			document.getElementById(pic[0][5]).src="blue.png";
			break;
		case 4:
			document.getElementById(pic[0][5]).src="yellow.png";
			break;
	}
	setTimeout("willDown6();", 100);
}
function willDown1()
{
	var half=parseInt(theTop1/2);
	document.getElementById(pic[0][0]).src="empty.png";
	switch(color[theTop1][0])
	{
		case 1:
			document.getElementById(pic[half][0]).src="red.png";
			break;
		case 2:
			document.getElementById(pic[half][0]).src="green.png";
			break;
		case 3:
			document.getElementById(pic[half][0]).src="blue.png";
			break;
		case 4:
			document.getElementById(pic[half][0]).src="yellow.png";
			break;
	}
	setTimeout("newChange1();", 100);
}
function willDown2()
{
	var half=parseInt(theTop2/2);
	document.getElementById(pic[0][1]).src="empty.png";
	switch(color[theTop2][1])
	{
		case 1:
			document.getElementById(pic[half][1]).src="red.png";
			break;
		case 2:
			document.getElementById(pic[half][1]).src="green.png";
			break;
		case 3:
			document.getElementById(pic[half][1]).src="blue.png";
			break;
		case 4:
			document.getElementById(pic[half][1]).src="yellow.png";
			break;
	}
	setTimeout("newChange2();", 100);
}
function willDown3()
{
	var half=parseInt(theTop3/2);
	document.getElementById(pic[0][2]).src="empty.png";
	switch(color[theTop3][2])
	{
		case 1:
			document.getElementById(pic[half][2]).src="red.png";
			break;
		case 2:
			document.getElementById(pic[half][2]).src="green.png";
			break;
		case 3:
			document.getElementById(pic[half][2]).src="blue.png";
			break;
		case 4:
			document.getElementById(pic[half][2]).src="yellow.png";
			break;
	}
	setTimeout("newChange3();", 100);
}
function willDown4()
{
	var half=parseInt(theTop4/2);
	document.getElementById(pic[0][3]).src="empty.png";
	switch(color[theTop4][3])
	{
		case 1:
			document.getElementById(pic[half][3]).src="red.png";
			break;
		case 2:
			document.getElementById(pic[half][3]).src="green.png";
			break;
		case 3:
			document.getElementById(pic[half][3]).src="blue.png";
			break;
		case 4:
			document.getElementById(pic[half][3]).src="yellow.png";
			break;
	}
	setTimeout("newChange4();", 100);
}
function willDown5()
{
	var half=parseInt(theTop5/2);
	document.getElementById(pic[0][4]).src="empty.png";
	switch(color[theTop5][4])
	{
		case 1:
			document.getElementById(pic[half][4]).src="red.png";
			break;
		case 2:
			document.getElementById(pic[half][4]).src="green.png";
			break;
		case 3:
			document.getElementById(pic[half][4]).src="blue.png";
			break;
		case 4:
			document.getElementById(pic[half][4]).src="yellow.png";
			break;
	}
	setTimeout("newChange5();", 100);
}
function willDown6()
{
	var half=parseInt(theTop6/2);
	document.getElementById(pic[0][5]).src="empty.png";
	switch(color[theTop6][5])
	{
		case 1:
			document.getElementById(pic[half][5]).src="red.png";
			break;
		case 2:
			document.getElementById(pic[half][5]).src="green.png";
			break;
		case 3:
			document.getElementById(pic[half][5]).src="blue.png";
			break;
		case 4:
			document.getElementById(pic[half][5]).src="yellow.png";
			break;
	}
	setTimeout("newChange6();", 100);
}
function newChange1()
{
	var half=parseInt(theTop1/2);
	document.getElementById(pic[half][0]).src="empty.png";
	switch(color[theTop1][0])
	{
		case 1:
			document.getElementById(pic[theTop1][0]).src="red.png";
			break;
		case 2:
			document.getElementById(pic[theTop1][0]).src="green.png";
			break;
		case 3:
			document.getElementById(pic[theTop1][0]).src="blue.png";
			break;
		case 4:
			document.getElementById(pic[theTop1][0]).src="yellow.png";
			break;
	}
	document.getElementById("btnReplay").style.display="none";
	theTop1=0;
}
function newChange2()
{
	var half=parseInt(theTop2/2);
	document.getElementById(pic[half][1]).src="empty.png";
	switch(color[theTop2][1])
	{
		case 1:
			document.getElementById(pic[theTop2][1]).src="red.png";
			break;
		case 2:
			document.getElementById(pic[theTop2][1]).src="green.png";
			break;
		case 3:
			document.getElementById(pic[theTop2][1]).src="blue.png";
			break;
		case 4:
			document.getElementById(pic[theTop2][1]).src="yellow.png";
			break;
	}
	document.getElementById("btnReplay").style.display="none";
	theTop2=0;
}
function newChange3()
{
	var half=parseInt(theTop3/2);
	document.getElementById(pic[half][2]).src="empty.png";
	switch(color[theTop3][2])
	{
		case 1:
			document.getElementById(pic[theTop3][2]).src="red.png";
			break;
		case 2:
			document.getElementById(pic[theTop3][2]).src="green.png";
			break;
		case 3:
			document.getElementById(pic[theTop3][2]).src="blue.png";
			break;
		case 4:
			document.getElementById(pic[theTop3][2]).src="yellow.png";
			break;
	}
	document.getElementById("btnReplay").style.display="none";
	theTop3=0;
}
function newChange4()
{
	var half=parseInt(theTop4/2);
	document.getElementById(pic[half][3]).src="empty.png";
	switch(color[theTop4][3])
	{
		case 1:
			document.getElementById(pic[theTop4][3]).src="red.png";
			break;
		case 2:
			document.getElementById(pic[theTop4][3]).src="green.png";
			break;
		case 3:
			document.getElementById(pic[theTop4][3]).src="blue.png";
			break;
		case 4:
			document.getElementById(pic[theTop4][3]).src="yellow.png";
			break;
	}
	document.getElementById("btnReplay").style.display="none";
	theTop4=0;
}
function newChange5()
{
	var half=parseInt(theTop5/2);
	document.getElementById(pic[half][4]).src="empty.png";
	switch(color[theTop5][4])
	{
		case 1:
			document.getElementById(pic[theTop5][4]).src="red.png";
			break;
		case 2:
			document.getElementById(pic[theTop5][4]).src="green.png";
			break;
		case 3:
			document.getElementById(pic[theTop5][4]).src="blue.png";
			break;
		case 4:
			document.getElementById(pic[theTop5][4]).src="yellow.png";
			break;
	}
	document.getElementById("btnReplay").style.display="none";
	theTop5=0;
}
function newChange6()
{
	var half=parseInt(theTop6/2);
	document.getElementById(pic[half][5]).src="empty.png";
	switch(color[theTop6][5])
	{
		case 1:
			document.getElementById(pic[theTop6][5]).src="red.png";
			break;
		case 2:
			document.getElementById(pic[theTop6][5]).src="green.png";
			break;
		case 3:
			document.getElementById(pic[theTop6][5]).src="blue.png";
			break;
		case 4:
			document.getElementById(pic[theTop6][5]).src="yellow.png";
			break;
	}
	document.getElementById("btnReplay").style.display="none";
	theTop6=0;
}
var element=0;
var isSame = new Array(6);
for(var t=0;t<6;t++)
{
	isSame[t]=new Array(6);
}
var row=0;
var col=0;
function clkPic(obj)
{
	element=obj.id
	var strrow=element.substring(3,4);
	var strcol=element.substring(4,5);
	row=parseInt(strrow,10);
	col=parseInt(strcol,10);
	for(var o=0;o<6;o++)
	{
		for(var g=0;g<6;g++)
		{
			isSame[o][g]=false;
			if(color[o][g]==7)
			{
				color[o][g]=8;
			}
		}
	}
	
	isSame[row][col]=true;
	
	//Three to disppeared
	cnttop(row,col);
	cntleft(row,col);
	cntdown(row,col);
	cntright(row,col);
	var isThree=connect1+connect2+connect3+connect4;

	if(isThree>=2)
	{
		disppear();
	}
	//restart
	for(var o=0;o<6;o++)
	{
		for(var g=0;g<6;g++)
		{
			isSame[o][g]=false;
		}
	}
    connect1 = 0;
    connect2 = 0;
    connect3 = 0;
    connect4 = 0;
	isThree = 0;
    row = 0;
    col = 0;
}
var tempSame = new Array(6);
for(var h=0;h<6;h++)
{
	tempSame[h] = new Array(6);
}
var tempColor = new Array(6);
for(var f=0;f<6;f++)
{
	tempColor[f] = new Array(6);
}
function disppear()
{
	for(var y=0;y<6;y++)
	{
		for(var s=0;s<6;s++)
		{
			if(isSame[y][s]==true)
			{
				var idis=pic[y][s];
				//document.getElementById(idis).style.display="none";
				document.getElementById(idis).src="empty.png";
				//ToDrop
				dropt(y,s);
			}
		}
	}
	for(var b=0;b<6;b++)
	{
		for(var l=0;l<6;l++)
		{
			if(isSame[b][l]==true)
			{
				document.getElementById(pic[b][l]).src="empty.png";
				color[b][l]=8;//not any of the colors
			}
		}
	}
	for(var o=0;o<6;o++)
	{
		for(var g=0;g<6;g++)
		{
			isSame[o][g]=false;
		}
	}
	//restart
    connect1 = 0;
    connect2 = 0;
    connect3 = 0;
    connect4 = 0;
    row = 0;
    col = 0;
	//toThin :)
	thin();
	if(isFinal()==false)
	{
		document.getElementById("btnReplay").style.display="inline";
	}
	//alert("132");
}
var temp2S=new Array(6);
for(var i=0;i<6;i++)
{
	temp2S[i]=new Array(6);
}
var temp2C=new Array(6);
for(var j=0;j<6;j++)
{
	temp2C[j]=new Array(6);
}
function thin()
{
	//fix the col, and if row0~5 of color is 8 -> empty col, then combind.
	if(color[0][0]==8&&color[1][0]==8&&color[2][0]==8&&color[3][0]==8&&color[4][0]==8&&color[5][0]==8)
	{
		color[0][0]==7;
		color[1][0]==7;
		color[2][0]==7;
		color[3][0]==7;
		color[4][0]==7;
		color[5][0]==7;
		for(var i=0;i<6;i++)
		{
			for(var j=0;j<6;j++)
			{
				temp2S[i][j]=isSame[i][j];
				temp2C[i][j]=color[i][j];
			}
		}
		for(var t=0;t<6;t++)
		{
			for(var r=0;r<6;r++)
			{
				var postis=(r+1);
				if(postis<=5)
				{
					isSame[t][r]=temp2S[t][postis];
					color[t][r]=temp2C[t][postis];
				}
				else
				{
					//the last cols
					color[t][5]=7;
				}
			}
		}
		for(var k=0;k<6;k++)
		{
			for(var l=0;l<6;l++)
			{
				switch(color[k][l])
				{
					case 1:
						document.getElementById(pic[k][l]).src="red.png";
						break;
					case 2:
						document.getElementById(pic[k][l]).src="green.png";
						break;
					case 3:
						document.getElementById(pic[k][l]).src="blue.png";
						break;
					case 4:
						document.getElementById(pic[k][l]).src="yellow.png";
						break;
					case 7:
						document.getElementById(pic[k][l]).src="empty.png";
						break;
					case 8:
						document.getElementById(pic[k][l]).src="empty.png";
						break;
				}
			}
		}
		return thin();
	}
	if(color[0][1]==8&&color[1][1]==8&&color[2][1]==8&&color[3][1]==8&&color[4][1]==8&&color[5][1]==8)
	{
		color[0][1]==7;
		color[1][1]==7;
		color[2][1]==7;
		color[3][1]==7;
		color[4][1]==7;
		color[5][1]==7;
		for(var i=0;i<6;i++)
		{
			for(var j=0;j<6;j++)
			{
				temp2S[i][j]=isSame[i][j];
				temp2C[i][j]=color[i][j];
			}
		}
		for(var t=0;t<6;t++)
		{
			for(var r=1;r<6;r++)
			{
				var postis=(r+1);
				if(postis<=5)
				{
					isSame[t][r]=temp2S[t][postis];
					color[t][r]=temp2C[t][postis];
				}
				else
				{
					//the last cols
					color[t][5]=7;
				}
			}
		}
		for(var k=0;k<6;k++)
		{
			for(var l=0;l<6;l++)
			{
				switch(color[k][l])
				{
					case 1:
						document.getElementById(pic[k][l]).src="red.png";
						break;
					case 2:
						document.getElementById(pic[k][l]).src="green.png";
						break;
					case 3:
						document.getElementById(pic[k][l]).src="blue.png";
						break;
					case 4:
						document.getElementById(pic[k][l]).src="yellow.png";
						break;
					case 7:
						document.getElementById(pic[k][l]).src="empty.png";
						break;
					case 8:
						document.getElementById(pic[k][l]).src="empty.png";
						break;
				}
			}
		}
		return thin();
	}
	if(color[0][2]==8&&color[1][2]==8&&color[2][2]==8&&color[3][2]==8&&color[4][2]==8&&color[5][2]==8)
	{
		color[0][2]==7;
		color[1][2]==7;
		color[2][2]==7;
		color[3][2]==7;
		color[4][2]==7;
		color[5][2]==7;
		for(var i=0;i<6;i++)
		{
			for(var j=0;j<6;j++)
			{
				temp2S[i][j]=isSame[i][j];
				temp2C[i][j]=color[i][j];
			}
		}
		for(var t=0;t<6;t++)
		{
			for(var r=2;r<6;r++)
			{
				var postis=(r+1);
				if(postis<=5)
				{
					isSame[t][r]=temp2S[t][postis];
					color[t][r]=temp2C[t][postis];
				}
				else
				{
					//the last cols
					color[t][5]=7;
				}
			}
		}
		for(var k=0;k<6;k++)
		{
			for(var l=0;l<6;l++)
			{
				switch(color[k][l])
				{
					case 1:
						document.getElementById(pic[k][l]).src="red.png";
						break;
					case 2:
						document.getElementById(pic[k][l]).src="green.png";
						break;
					case 3:
						document.getElementById(pic[k][l]).src="blue.png";
						break;
					case 4:
						document.getElementById(pic[k][l]).src="yellow.png";
						break;
					case 7:
						document.getElementById(pic[k][l]).src="empty.png";
						break;
					case 8:
						document.getElementById(pic[k][l]).src="empty.png";
						break;
				}
			}
		}
		return thin();
	}
	if(color[0][3]==8&&color[1][3]==8&&color[2][3]==8&&color[3][3]==8&&color[4][3]==8&&color[5][3]==8)
	{
		color[0][3]==7;
		color[1][3]==7;
		color[2][3]==7;
		color[3][3]==7;
		color[4][3]==7;
		color[5][3]==7;
		for(var i=0;i<6;i++)
		{
			for(var j=0;j<6;j++)
			{
				temp2S[i][j]=isSame[i][j];
				temp2C[i][j]=color[i][j];
			}
		}
		for(var t=0;t<6;t++)
		{
			for(var r=3;r<6;r++)
			{
				var postis=(r+1);
				if(postis<=5)
				{
					isSame[t][r]=temp2S[t][postis];
					color[t][r]=temp2C[t][postis];
				}
				else
				{
					//the last cols
					color[t][5]=7;
				}
			}
		}
		for(var k=0;k<6;k++)
		{
			for(var l=0;l<6;l++)
			{
				switch(color[k][l])
				{
					case 1:
						document.getElementById(pic[k][l]).src="red.png";
						break;
					case 2:
						document.getElementById(pic[k][l]).src="green.png";
						break;
					case 3:
						document.getElementById(pic[k][l]).src="blue.png";
						break;
					case 4:
						document.getElementById(pic[k][l]).src="yellow.png";
						break;
					case 7:
						document.getElementById(pic[k][l]).src="empty.png";
						break;
					case 8:
						document.getElementById(pic[k][l]).src="empty.png";
						break;
				}
			}
		}
		return thin();
	}
	if(color[0][4]==8&&color[1][4]==8&&color[2][4]==8&&color[3][4]==8&&color[4][4]==8&&color[5][4]==8)
	{
		color[0][4]==7;
		color[1][4]==7;
		color[2][4]==7;
		color[3][4]==7;
		color[4][4]==7;
		color[5][4]==7;
		for(var i=0;i<6;i++)
		{
			for(var j=0;j<6;j++)
			{
				temp2S[i][j]=isSame[i][j];
				temp2C[i][j]=color[i][j];
			}
		}
		for(var t=0;t<6;t++)
		{
			for(var r=4;r<6;r++)
			{
				var postis=(r+1);
				if(postis<=5)
				{
					isSame[t][r]=temp2S[t][postis];
					color[t][r]=temp2C[t][postis];
				}
				else
				{
					//the last cols
					color[t][5]=7;
				}
			}
		}
		for(var k=0;k<6;k++)
		{
			for(var l=0;l<6;l++)
			{
				switch(color[k][l])
				{
					case 1:
						document.getElementById(pic[k][l]).src="red.png";
						break;
					case 2:
						document.getElementById(pic[k][l]).src="green.png";
						break;
					case 3:
						document.getElementById(pic[k][l]).src="blue.png";
						break;
					case 4:
						document.getElementById(pic[k][l]).src="yellow.png";
						break;
					case 7:
						document.getElementById(pic[k][l]).src="empty.png";
						break;
					case 8:
						document.getElementById(pic[k][l]).src="empty.png";
						break;
				}
			}
		}
		return thin();
	}
	if(color[0][5]==8&&color[1][5]==8&&color[2][5]==8&&color[3][5]==8&&color[4][5]==8&&color[5][5]==8)
	{
		color[0][5]==7;
		color[1][5]==7;
		color[2][5]==7;
		color[3][5]==7;
		color[4][5]==7;
		color[5][5]==7;
		for(var i=0;i<6;i++)
		{
			for(var j=0;j<6;j++)
			{
				temp2S[i][j]=isSame[i][j];
				temp2C[i][j]=color[i][j];
			}
		}
		for(var t=0;t<6;t++)
		{
			for(var r=5;r<6;r++)
			{
				var postis=(r+1);
				if(postis<=5)
				{
					isSame[t][r]=temp2S[t][postis];
					color[t][r]=temp2C[t][postis];
				}
				else
				{
					//the last cols
					color[t][5]=7;
				}
			}
		}
		for(var k=0;k<6;k++)
		{
			for(var l=0;l<6;l++)
			{
				switch(color[k][l])
				{
					case 1:
						document.getElementById(pic[k][l]).src="red.png";
						break;
					case 2:
						document.getElementById(pic[k][l]).src="green.png";
						break;
					case 3:
						document.getElementById(pic[k][l]).src="blue.png";
						break;
					case 4:
						document.getElementById(pic[k][l]).src="yellow.png";
						break;
					case 7:
						document.getElementById(pic[k][l]).src="empty.png";
						break;
					case 8:
						document.getElementById(pic[k][l]).src="empty.png";
						break;
				}
			}
		}
		return thin();
	}
}
function dropt(rows,cols)
{
	if(rows>=0)
	{
		var pres=(rows-1);
		if(pres>=0)
		{
			//test if the pre is False
			if(isSame[pres][cols]==false)
			{
				//change the pre and that be clicked
				//temp=a;
				//a=b;
				//b=temp;
				for(var d=0;d<6;d++)
				{
					for(var z=0;z<6;z++)
					{
						tempColor[d][z]=color[d][z];
						tempSame[d][z]=isSame[d][z];
					}
				}
				isSame[rows][cols]=isSame[pres][cols];
				isSame[pres][cols]=tempSame[rows][cols];
				color[rows][cols]=color[pres][cols];
				color[pres][cols]=tempColor[rows][cols];
				//Then show the result
				switch(color[rows][cols])
				{
					case 1:
						document.getElementById(pic[rows][cols]).src="red.png";
						break;
					case 2:
						document.getElementById(pic[rows][cols]).src="green.png";
						break;
					case 3:
						document.getElementById(pic[rows][cols]).src="blue.png";
						break;
					case 4:
						document.getElementById(pic[rows][cols]).src="yellow.png";
						break;
					case 8:
						document.getElementById(pic[rows][cols]).src="empty.png";
						break;
				}
			}
		}
		return dropt(pres,cols);
	}
}
var connect1=0;
function cnttop(rows,cols)
{
	if((color[rows][cols]!=8)&&(color[rows][cols]!=7))
	{
		var tops=(rows-1);
		if(tops>=0)
		{
			if(isSame[tops][cols]!=true)
			{
				if(color[tops][cols]==color[row][col])
				{
					isSame[tops][cols]=true;
					connect1++;
					cnttop(tops,cols);
					cntleft(tops,cols);
					cntright(tops,cols);
				}	
			}
		}
	}
	else
	{
		document.getElementById(pic[rows][cols]).src="empty.png";
	}
}
var connect2=0;
function cntleft(rows,cols)
{
	if((color[rows][cols]!=8)&&(color[rows][cols]!=7))
	{
		var lefts=(cols-1);
		if(lefts>=0)
		{
			if(isSame[rows][lefts]!=true)
			{
				if(color[rows][lefts]==color[row][col])
				{
					isSame[rows][lefts]=true;
					connect2++;
					cnttop(rows,lefts);
					cntleft(rows,lefts);
					cntdown(rows,lefts);
				}	
			}
		}
	}
	else
	{
		document.getElementById(pic[rows][cols]).src="empty.png";
	}
}
var connect3=0;
function cntdown(rows,cols)
{
	if((color[rows][cols]!=8)&&(color[rows][cols]!=7))
	{
		var downs=(rows+1);
		if(downs<=5)
		{
	
			if(isSame[downs][cols]!=true)
			{
				if(color[downs][cols]==color[row][col])
				{
					isSame[downs][cols]=true;
					connect3++;
					cntright(downs,cols);
					cntleft(downs,cols);
					cntdown(downs,cols);
				}
			}
		}
	}
	else
	{
		document.getElementById(pic[rows][cols]).src="empty.png";
	}
}
var connect4=0;
function cntright(rows,cols)
{
	if((color[rows][cols]!=8)&&(color[rows][cols]!=7))
	{
		var rights=(cols+1);
		if(rights<=5)
		{
			if(isSame[rows][rights]!=true)
			{
				if(color[rows][rights]==color[row][col])
				{
					isSame[rows][rights]=true;
					connect4++;
					cntright(rows,rights);
					cnttop(rows,rights);
					cntdown(rows,rights);
				}
			}
		}
	}
	else
	{
		document.getElementById(pic[rows][cols]).src="empty.png";
	}
}
var sv=new Array(6);
for(var i=0;i<6;i++)
{
	sv[i]=new Array(6);
}
function isFinal()
{
	//To record
	for(var s=0;s<6;s++)
	{
		for(var v=0;v<6;v++)
		{
			sv[s][v]=color[s][v];
		}
	}
	var anyConnect=findAny();
	//To find
	if(anyConnect==true)
	{
		return true;
	}
	else
	{
		return false;
	}
}
function findAny()
{
	for(var j=0;j<6;j++)
	{
		for(var k=0;k<4;k++)
			{
				if((sv[j][k]!=8)&&(sv[j][k]!=7))
				{
					var col1=k+1;
					var col2=k+2;
					
					if((sv[j][k]==sv[j][col1])&&(sv[j][col1]==sv[j][col2]))
					{
						return true;
					}
				}
			}
	}
	for(var j=0;j<4;j++)
	{
		for(var k=0;k<6;k++)
			{
				if((sv[j][k]!=8)&&(sv[j][k]!=7))
				{
					var row1=j+1;
					var row2=j+2;
					if((sv[j][k]==sv[row1][k])&&(sv[row1][k]==sv[row2][k]))
					{
						return true;
					}
				}
			}
	}
	for(var j=0;j<5;j++)
	{
		for(var k=0;k<5;k++)
			{
				if((sv[j][k]!=8)&&(sv[j][k]!=7))
				{
					var row1=j+1;
					var col1=k+1;
					
						if((sv[j][k]==sv[j][col1])&&(sv[j][col1]==sv[row1][k]))
						{
							return true;
						}
					
				}
			}
	}
	for(var j=0;j<5;j++)
	{
		for(var k=0;k<5;k++)
			{
				if((sv[j][k]!=8)&&(sv[j][k]!=7))
				{
					var row1=j+1;
					var col1=k+1;
					
						if((sv[j][k]==sv[row1][k])&&(sv[row1][k]==sv[row1][col1]))
						{
							return true;
						}
					
				}
			}
	}
	for(var j=0;j<5;j++)
	{
		for(var k=0;k<5;k++)
			{
				if((sv[j][k]!=8)&&(sv[j][k]!=7))
				{
					var row1=j+1;
					var col1=k+1;
					
						if((sv[j][k]==sv[j][col1])&&(sv[j][col1]==sv[row1][col1]))
						{
							return true;
						}
					
				}
			}
	}
	for(var j=0;j<5;j++)
	{
		for(var k=0;k<5;k++)
			{
				if((sv[j][k]!=8)&&(sv[j][k]!=7))
				{
					var row1=j+1;
					var col1=k+1;
					
						if((sv[j][col1]==sv[row1][k])&&(sv[row1][k]==sv[row1][col1]))
						{
							return true;
						}
					
				}
			}
	}
	return false;
}
function Replay()
{
	document.getElementById("btnReplay").style.display="none";
	location.reload();
}
</script>
<body onload="initial()">
<div align="center">
  <table width="480" border="0">
  <tr>
    <td><img src="blue.png" width="80" height="80" id="pic00" onclick="clkPic(this)"/></td>
    <td><img src="blue.png" width="80" height="80" id="pic01" onclick="clkPic(this)"/></td>
    <td><img src="blue.png" width="80" height="80" id="pic02" onclick="clkPic(this)"/></td>
    <td><img src="blue.png" width="80" height="80" id="pic03" onclick="clkPic(this)"/></td>
    <td><img src="blue.png" width="80" height="80" id="pic04" onclick="clkPic(this)"/></td>
    <td><img src="blue.png" width="80" height="80" id="pic05" onclick="clkPic(this)"/></td>
  </tr>
  <tr>
    <td><img src="blue.png" width="80" height="80" id="pic10" onclick="clkPic(this)"/></td>
    <td><img src="blue.png" width="80" height="80" id="pic11" onclick="clkPic(this)"/></td>
    <td><img src="blue.png" width="80" height="80" id="pic12" onclick="clkPic(this)"/></td>
    <td><img src="blue.png" width="80" height="80" id="pic13" onclick="clkPic(this)"/></td>
    <td><img src="blue.png" width="80" height="80" id="pic14" onclick="clkPic(this)"/></td>
    <td><img src="blue.png" width="80" height="80" id="pic15" onclick="clkPic(this)"/></td>
  </tr>
  <tr>
    <td><img src="blue.png" width="80" height="80" id="pic20" onclick="clkPic(this)"/></td>
    <td><img src="blue.png" width="80" height="80" id="pic21" onclick="clkPic(this)"/></td>
    <td><img src="blue.png" width="80" height="80" id="pic22" onclick="clkPic(this)"/></td>
    <td><img src="blue.png" width="80" height="80" id="pic23" onclick="clkPic(this)"/></td>
    <td><img src="blue.png" width="80" height="80" id="pic24" onclick="clkPic(this)"/></td>
    <td><img src="blue.png" width="80" height="80" id="pic25" onclick="clkPic(this)"/></td>
  </tr>
  <tr>
    <td><img src="blue.png" width="80" height="80" id="pic30" onclick="clkPic(this)"/></td>
    <td><img src="blue.png" width="80" height="80" id="pic31" onclick="clkPic(this)"/></td>
    <td><img src="blue.png" width="80" height="80" id="pic32" onclick="clkPic(this)"/></td>
    <td><img src="blue.png" width="80" height="80" id="pic33" onclick="clkPic(this)"/></td>
    <td><img src="blue.png" width="80" height="80" id="pic34" onclick="clkPic(this)"/></td>
    <td><img src="blue.png" width="80" height="80" id="pic35" onclick="clkPic(this)"/></td>
  </tr>
  <tr>
    <td><img src="blue.png" width="80" height="80" id="pic40" onclick="clkPic(this)"/></td>
    <td><img src="blue.png" width="80" height="80" id="pic41" onclick="clkPic(this)"/></td>
    <td><img src="blue.png" width="80" height="80" id="pic42" onclick="clkPic(this)"/></td>
    <td><img src="blue.png" width="80" height="80" id="pic43" onclick="clkPic(this)"/></td>
    <td><img src="blue.png" width="80" height="80" id="pic44" onclick="clkPic(this)"/></td>
    <td><img src="blue.png" width="80" height="80" id="pic45" onclick="clkPic(this)"/></td>
  </tr>
  <tr>
    <td><img src="blue.png" width="80" height="80" id="pic50" onclick="clkPic(this)"/></td>
    <td><img src="blue.png" width="80" height="80" id="pic51" onclick="clkPic(this)"/></td>
    <td><img src="blue.png" width="80" height="80" id="pic52" onclick="clkPic(this)"/></td>
    <td><img src="blue.png" width="80" height="80" id="pic53" onclick="clkPic(this)"/></td>
    <td><img src="blue.png" width="80" height="80" id="pic54" onclick="clkPic(this)"/></td>
    <td><img src="blue.png" width="80" height="80" id="pic55" onclick="clkPic(this)"/></td>
  </tr>
</table>
</div>
<div>
<input type="button" id="btnReplay" value="重玩" style="display: none;" onclick="Replay()"/>
</div>
</body>
</html>

 

程式到這裡已經差不多完成了。

要是想結合分數的部分,可以參考消消樂版本一。

 

這次的部分就是將原本IE7不能解讀的字元陣列修改,測試後用"相容檢測"也可以過關~

那麼動畫的部分就是這個:

setTimeout("你的方法();", 100);

這樣只會執行一次,所以如果你想要無限執行,就是自己呼叫自己了。

 

掉下來的動畫我只做兩個(一次掉一半而已),

其實做一個也可以(就是只顯示r,c的位置和theTop,c)。

 

然而為什麼要用六個方法呢?

因為SV只會用dive and conquer, 所以就先將第一列解決,接著讓其他列複製他的方法這樣Orz

 

也是某種小技巧啦!

 

呼~

明天就可以請姊姊驗收了XDDDD

 

至於測試網頁,我想等姊姊確定OK才放上來。

希望大家喜歡這個小遊戲喔~

雖然我還是不知道他的英文名字或正式名字是什麼XDDD

 

SV不太會技術性的東西,所以程式很亂很醜@@

如果是高手,一定可以用更好的方法寫的^^給大家做參考喔~

如果喜歡,可以把圖片換成你的親朋好友,

相信這是不錯的新年禮物呢XDDDDDDDDD

 

有發現bug或有意見歡迎留言或來信喔^^

感謝大家的支持~