摘要:消消樂 遊戲 javascrip版本 Part2
今天早上勉強還原了，
<!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);
}
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;
}
}
}
}
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[3];
var strcol=element[4];
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;
}
}
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();
}
else
{
connect1 = 0;
connect2 = 0;
connect3 = 0;
connect4 = 0;
}
//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;
row = 0;
col = 0;
}
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";
}
}
}
}
var connect1=0;
function cnttop(rows,cols)
{
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);
}
}
}
}
var connect2=0;
function cntleft(rows,cols)
{
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);
}
}
}
}
var connect3=0;
function cntdown(rows,cols)
{
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);
}
}
}
}
var connect4=0;
function cntright(rows,cols)
{
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);
}
}
}
}
</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>
</body>
</html>
記得要注意陣列（幾乘幾）大小，否則會出錯......
終於還原成功！
然後就是接續判斷點完以及圖片掉下來的部分Orz
以下是怕複製會複製到行號的code:
<!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);
}
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;
}
}
}
}
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[3];
var strcol=element[4];
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;
}
}
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();
}
else
{
connect1 = 0;
connect2 = 0;
connect3 = 0;
connect4 = 0;
}
//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;
row = 0;
col = 0;
}
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";
}
}
}
}
var connect1=0;
function cnttop(rows,cols)
{
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);
}
}
}
}
var connect2=0;
function cntleft(rows,cols)
{
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);
}
}
}
}
var connect3=0;
function cntdown(rows,cols)
{
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);
}
}
}
}
var connect4=0;
function cntright(rows,cols)
{
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);
}
}
}
}
</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>
</body>
</html>
只要將image改成你的圖片就能運作囉～（看是改名字或改程式）
後來發現，若真的全消掉，陣列會"瘦身"，
所以你也可以改成把圖片換成空的圖片（透明的）
這樣就不會讓陣列裡面的內容縮進去。
就變成這樣：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TTD</title>
<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);
}
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;
}
}
}
}
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[3];
var strcol=element[4];
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;
}
}
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();
}
else
{
connect1 = 0;
connect2 = 0;
connect3 = 0;
connect4 = 0;
}
//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;
row = 0;
col = 0;
}
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";
}
}
}
}
var connect1=0;
function cnttop(rows,cols)
{
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);
}
}
}
}
var connect2=0;
function cntleft(rows,cols)
{
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);
}
}
}
}
var connect3=0;
function cntdown(rows,cols)
{
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);
}
}
}
}
var connect4=0;
function cntright(rows,cols)
{
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);
}
}
}
}
</script>
<div align="center">
<table width="480" border="0">
<tbody><tr>
<td><img src="blue.png" id="pic00" onclick="clkPic(this)" height="80" width="80"></td>
<td><img src="blue.png" id="pic01" onclick="clkPic(this)" height="80" width="80"></td>
<td><img src="blue.png" id="pic02" onclick="clkPic(this)" height="80" width="80"></td>
<td><img src="blue.png" id="pic03" onclick="clkPic(this)" height="80" width="80"></td>
<td><img src="blue.png" id="pic04" onclick="clkPic(this)" height="80" width="80"></td>
<td><img src="blue.png" id="pic05" onclick="clkPic(this)" height="80" width="80"></td>
</tr>
<tr>
<td><img src="blue.png" id="pic10" onclick="clkPic(this)" height="80" width="80"></td>
<td><img src="blue.png" id="pic11" onclick="clkPic(this)" height="80" width="80"></td>
<td><img src="blue.png" id="pic12" onclick="clkPic(this)" height="80" width="80"></td>
<td><img src="blue.png" id="pic13" onclick="clkPic(this)" height="80" width="80"></td>
<td><img src="blue.png" id="pic14" onclick="clkPic(this)" height="80" width="80"></td>
<td><img src="blue.png" id="pic15" onclick="clkPic(this)" height="80" width="80"></td>
</tr>
<tr>
<td><img src="blue.png" id="pic20" onclick="clkPic(this)" height="80" width="80"></td>
<td><img src="blue.png" id="pic21" onclick="clkPic(this)" height="80" width="80"></td>
<td><img src="blue.png" id="pic22" onclick="clkPic(this)" height="80" width="80"></td>
<td><img src="blue.png" id="pic23" onclick="clkPic(this)" height="80" width="80"></td>
<td><img src="blue.png" id="pic24" onclick="clkPic(this)" height="80" width="80"></td>
<td><img src="blue.png" id="pic25" onclick="clkPic(this)" height="80" width="80"></td>
</tr>
<tr>
<td><img src="blue.png" id="pic30" onclick="clkPic(this)" height="80" width="80"></td>
<td><img src="blue.png" id="pic31" onclick="clkPic(this)" height="80" width="80"></td>
<td><img src="blue.png" id="pic32" onclick="clkPic(this)" height="80" width="80"></td>
<td><img src="blue.png" id="pic33" onclick="clkPic(this)" height="80" width="80"></td>
<td><img src="blue.png" id="pic34" onclick="clkPic(this)" height="80" width="80"></td>
<td><img src="blue.png" id="pic35" onclick="clkPic(this)" height="80" width="80"></td>
</tr>
<tr>
<td><img src="blue.png" id="pic40" onclick="clkPic(this)" height="80" width="80"></td>
<td><img src="blue.png" id="pic41" onclick="clkPic(this)" height="80" width="80"></td>
<td><img src="blue.png" id="pic42" onclick="clkPic(this)" height="80" width="80"></td>
<td><img src="blue.png" id="pic43" onclick="clkPic(this)" height="80" width="80"></td>
<td><img src="blue.png" id="pic44" onclick="clkPic(this)" height="80" width="80"></td>
<td><img src="blue.png" id="pic45" onclick="clkPic(this)" height="80" width="80"></td>
</tr>
<tr>
<td><img src="blue.png" id="pic50" onclick="clkPic(this)" height="80" width="80"></td>
<td><img src="blue.png" id="pic51" onclick="clkPic(this)" height="80" width="80"></td>
<td><img src="blue.png" id="pic52" onclick="clkPic(this)" height="80" width="80">
</td>
<td><img src="blue.png" id="pic53" onclick="clkPic(this)" height="80" width="80"></td>
<td><img src="blue.png" id="pic54" onclick="clkPic(this)" height="80" width="80"></td>
<td><img src="blue.png" id="pic55" onclick="clkPic(this)" height="80" width="80"></td>
</tr>
</tbody></table>
</div>
也就是只有改成src="empty.png"這樣～