js连连看

js连连看

 

js连连看
首先见证奇迹的时刻---效果图如下：

实现主要分为三个部分：
一、创建元素块
二、随机分布元素块
三、事件绑定

一、创建元素块
生成span的元素标签，并将标签添加到父容器中，设置其left、top和background属性。

/*
  *  creSpan 创建元素标签
  *  n 指当前个数
  *  mpId 指父容器
  *  mleft 指其left属性值
  *  mtop 指其top属性值
  *  bgcolor 指其背景色属性值
*/
   function creSpan(n,mpId,mleft,mtop,bgcolor){
      var mSpan = document.createElement("span");  
      var pId = mpId[0];
      pId.appendChild(mSpan);
      with(mSpan.style){
           left = mleft+"px";
           top = mtop+"px";
           background =bgcolor; 
       }
  }

二、随机分布元素块

为了方便理解，将其过程以趣味题的形式描述出来。

==========================================================
有96个方块，每排放12块，一共放8排，现在有六个颜色的油漆桶，每个油漆桶的颜色不同，

现在让这六种颜色随机涂抹这96个方块，有一点要求是每种涂色方块的总数是偶数  。

==========================================================
思路：

96块和6种颜色      
96 - 6 =90 让前90块颜色随机出现，并记录每种颜色出现的总和
后6块一块一块校正，根据当前颜色的总和，如果为奇数，让其继续加一，偶数时为方块涂抹给后面将要出现的颜色值

                var arrColor = ["#FF00FF","#FFFF00","#00FFFF","#FF0000","#00FF00","#0000FF"];   //颜色值
                var myleft = 3;   // 初始的left值
                var mytop = 3;   // 初始的top值
                var arr = new Array();   // 将每一个span对象存放在二维数组中
                var test =  $("#test");   // 父容器
                var arrtmp =[0,0,0,0,0,0];  // 颜色计数器
                var tmpcolor =arrColor[0];  // 当前颜色

                for(var j=0;j<8;j++){
                    arr[j] = new Array();
                    if(j===7){
                        for(var i=0;i<12;i++){
                            if(i!==0){
                                myleft+=32;
                            }
                            if(i===6){
                                if(arrtmp[0]%2===0){
                                    arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop,arrColor[1]);
                                    arrtmp[1]++;
                                }
                                else{
                                    arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop,arrColor[0]);
                                    arrtmp[0]++;
                                }
                            }
                            else if(i===7){
                                if(arrtmp[1]%2===0){
                                    arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop,arrColor[2]);
                                    arrtmp[2]++;
                                }
                                else{
                                    arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop,arrColor[1]);
                                    arrtmp[1]++;
                                }
                            }
                            else if(i===8){
                                if(arrtmp[2]%2===0){
                                    arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop,arrColor[3]);
                                    arrtmp[3]++;
                                }
                                else{
                                    arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop,arrColor[2]);
                                    arrtmp[2]++;
                                }
                            }
                            else if(i===9){
                                if(arrtmp[3]%2==0){
                                    arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop,arrColor[4]);
                                    arrtmp[4]++;
                                }
                                else{
                                    arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop,arrColor[3]);
                                    arrtmp[3]++;
                                }
                            }
                            else if(i===10){
                                if(arrtmp[4]%2===0){
                                    arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop,arrColor[5]);
                                    arrtmp[5]++;
                                }
                                else{
                                    arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop,arrColor[4]);
                                    arrtmp[4]++;
                                }
                            }
                            else if(i===11){
                                if(arrtmp[5]%2===0){
                            
                                }
                                else{
                                    arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop,arrColor[5]);
                                    arrtmp[5]++;
                                }
                            }
                            else{
                                tmpcolor=arrColor[parseInt(Math.random()*arrColor.length)];
                                if(tmpcolor===arrColor[0]){
                                    arrtmp[0]++;     
                                }
                                else if(tmpcolor===arrColor[1]){
                                    arrtmp[1]++;  
                                }
                                else if(tmpcolor===arrColor[2]){
                                    arrtmp[2]++;  
                                }
                                else if(tmpcolor===arrColor[3]){
                                    arrtmp[3]++;  
                                }
                                else if(tmpcolor===arrColor[4]){
                                    arrtmp[4]++;  
                                }
                                else if(tmpcolor===arrColor[5]){
                                    arrtmp[5]++;  
                                }
                                arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop,tmpcolor);
                            }
                        }
                    }
                    else{
                        for(var i=0;i<12;i++){
                            if(i!==0){
                                myleft+=32;
                            }
                            
                            tmpcolor=arrColor[parseInt(Math.random()*arrColor.length)];
                            
                            if(tmpcolor===arrColor[0]){
                                arrtmp[0]++;     
                            }
                            else if(tmpcolor===arrColor[1]){
                                arrtmp[1]++;  
                            }
                            else if(tmpcolor===arrColor[2]){
                                arrtmp[2]++;  
                            }
                            else if(tmpcolor===arrColor[3]){
                                arrtmp[3]++;  
                            }
                            else if(tmpcolor===arrColor[4]){
                                arrtmp[4]++;  
                            }
                            else if(tmpcolor===arrColor[5]){
                                arrtmp[5]++;  
                            }
                            arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop,tmpcolor);
                        }
                    }
                  
                    mytop+=32;
                    myleft=3;
                }

三、事件绑定
相同颜色时，颜色块消失。
不同颜色块不消失。
两次点击同一个颜色块时，不消失。

                var iclick = 0;  // 记录状态组click点击的次数 
                var marr = new Array();  // 存储颜色值
                var first = "";  // 记录每次状态组中的第一个span的当前数
                var second ="";  // 记录每次状态组中的第一个span的当前数
                $.each($("#test span"),function(k,v){
                    $(this).click(function(){
                        if(iclick===0){
                            $(this).addClass("del");
                            marr[0]=$(this).css("backgroundColor");
                            first=k;
                        }
                        if(iclick===1){
                            $(this).addClass("del");
                            marr[1]=$(this).css("backgroundColor");
                            second=k;
                        }
                        iclick++;
                        if(iclick>=2){
                            iclick=0;
                            if(first!=second){
                                if( marr[0]===marr[1]){
                                    $("#test").find(".del").detach();                     
                                }
                                else{
                                    $("#test span").removeClass("del");
                                }
                            }
                            else{
                                $("#test span").removeClass("del");
                            }
                        }
                    });
                });

演示实例：

运行代码

 

分类: javascript