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
作者： Leo_wl
出处： http://HdhCmsTestcnblogs测试数据/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did48458