js

最新推荐文章于 2024-10-18 10:30:47 发布

milofo

最新推荐文章于 2024-10-18 10:30:47 发布

阅读量508

点赞数

分类专栏： js 文章标签： function div

js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的简单连连看游戏。通过动态创建元素和监听点击事件来实现游戏逻辑，包括匹配相同的图案并移除。文章详细展示了如何设置游戏布局、颜色配置及交互流程。

<!DOCTYPE html>
<html>
    <head>
        <title>js连连看</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="http://files.cnblogs.com/kuikui/jquery.js"></script>
        <style type="text/css">
            *{margin:0px;padding:0px;}
            #test{width:388px; height: 260px; margin: 30px auto 0px; overflow: hidden; position: relative; background-color: #F1F1F1;}
            #test span{display: block; position: absolute; width: 30px; height: 30px; }
        </style>
    </head>
    <body>
        <div id="test"></div>
        <script type="text/javascript">
            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;
                }
            }
        </script>
        <script type="text/javascript">
            $(function(){
                var arrColor = ["#FF00FF","#FFFF00","#00FFFF","#FF0000","#00FF00","#0000FF"];
                var myleft = 3;
                var mytop = 3;
                var arr = new Array();
                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;
                var marr = new Array();
                var first = "";
                var second ="";
                $.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");
                            }
                        }
                    });
                });
            });
        </script>
    </body>
</html>