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"); } } }); });
演示实例：
