<!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了。
运行截图
得分: |