渣渣用JavaScript开发的消消乐，由于没有按照正规消消乐形式生成，是随机产生图形，所以存在一个算法bug，具体看下面，高手想到可以告诉我 

<!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="width:100%;height:100%;background: gray;position: absolute;">    
        
            <button style="left: 1130px;width: 100px;height: 50px;position: absolute"  onclick="Startgame()">游戏开始</button>
            <div style="left: 1130px;width: 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了。

运行截图

 

得分：
posted @ 2017-01-18 13:58  p微笑玲jx绝影  阅读(327)  评论(0)  编辑  收藏  举报