<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script style="text/javascript">
var t; //先声明一维
var div;
var k1=0;//记录点击动物上方和改动物相同的个数
var k2=0;//记录点击动物下方和改动物相同的个数
var k3=0;//记录点击动物左方和改动物相同的个数
var k4=0;//记录点击动物右方和改动物相同的个数
var a=new Array(4);
var b=new Array(4);
var c=new Array(4);
var i1=0;
var j1=0;
var t1=0;
var k=false;//记录点击每次都保证查找了上下左右
var d=document.getElementsByTagName('img');
var time=0,time1;
function Startgame(){
fun1();
for(var j=0;j<12;j++)
for(var i=0;i<18;i++)
{
t=true;
div=document.createElement("div");
div.style.position="absolute";
div.style.width="60px";
div.style.height="60px";
div.style.background=getRandomPicture();
div.style.top=((j%12)*60+20)+"px";
div.style.left = ((i%18)*60+20)+"px";
div.style.border= "0px solid #ddd";
div.style.borderRadius="6px";
div.setAttribute('onclick','getMousePos(event,div)');
div.id=""+(j*18+i+1);
document.body.appendChild(div);
}
}
function getMousePos(event){
t=false;
var i;
var j;
var e = event || window.event;
var j=parseInt((e.clientY-20)/60);
var i=parseInt((e.clientX-20)/60);
isDisappear(j,i);
}
function isDisappear(j,i){
var div=document.getElementById(""+(j*18+i+1));
FindUp(j,i,div);
//FindDown(j,i,div);
//FindLeft(j,i,div);
//FindRight(j,i,div);
}
function FindUp(j,i,div){
var div1=document.getElementById(""+((j-1)*18+i+1));
if(div1!=null&&div1.style.background==div.style.background)
{
++k1;
isDisappear(j-1,i);
}
else if(k1!=0)
{
for(var t=1;t<=k1+1;t++)
{
document.body.removeChild(document.getElementById(""+((j++)*18+i+1)));
clik();
}
k1=0;
}
}
function FindDown(j,i,div){
var div1=document.getElementById(""+((j+1)*18+i+1));
if(div1!=null&&div1.style.background==div.style.background)
{
++k2;
isDisappear(j+1,i);
console.log(k2);
}
else if(k2!=0)
{
for(var t1=1;t1<=k2+1;t1++)
{
document.body.removeChild(document.getElementById(""+((j--)*18+i+1)));
clik();
}
k2=0;
}
}
function FindLeft(j,i,div){
var div1=document.getElementById(""+(j*18+i));
if(div1!=null&&div1.style.background==div.style.background)
{
++k3;
isDisappear(j,i-1);
console.log(k3);
}
else if(k3!=0){
for(var t2=1;t2<=k3+1;t2++)
{
document.body.removeChild(document.getElementById(""+(j*18+(i++)+1)));
clik();
}
k3=0;
}
}
function FindRight(j,i,div){
var div1=document.getElementById(""+(j*18+i+1+1));
if(div1!=null&&div1.style.background==div.style.background)
{
++k4;
isDisappear(j,i+1);
console.log(k4);
}
else if(k4!=0){
for(var t3=1;t3<=k4+1;t3++)
{
document.body.removeChild(document.getElementById(""+(j*18+(i--)+1)));
clik();
}
k4=0;
}
}
function getRandomPicture()
{
var cArray = ['0','1','2','3','4','5'];
var cIndex = Math.round(Math.random()*5);
var src='url("img/filehelper_14844657'+cArray[cIndex]+'.jpg")';
return src;
}
function setnumber(n){
if(n<10)
return '0'+'0'+n;
else if(n>=10&&n<=99)
return '0'+n;
else
return ''+n;
}
function clik(){
time=setnumber(time);
for(var i=0;i<d.length;i++){
d[i].src='img/'+time.charAt(i)+'.png';
}
time++;
}
function fun1(){
clik();
};
</script>
</head>
<body style="100%;height:100%;background: gray;position: absolute;">
<button style="left: 1130px; 100px;height: 50px;position: absolute" onclick="Startgame()">游戏开始</button>
<div style="left: 1130px; 200px;height: 100px;top: 100px;position: absolute;font-size: 30px;">
<table>
<tr>
<td>得分：</td>
<td><img src="img/0.png"></td>
<td><img src="img/0.png"></td>
<td><img src="img/0.png"></td>
</tr>
</table>
</div>
</body>
</html>
单一从某个方向可以消除，但是用递归全部找到同色时消除就出现bug了。
运行截图
| 得分： |  |
|
|