jquery实现2048游戏

来源：互联网发布：mac os 磁盘工具恢复编辑：程序博客网时间：2024/05/22 13:09

先html简单布局

<span id="score">得分：</span><button id="start">游戏开始</button><div class="main">    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div></div>

再简单设置样式

*{            margin: 0;            padding: 0;        }        .main{            width:500px;            height: 500px;            border:1px solid black;        }        #start{            margin-left: 450px;        }        .main div{            width:100px;            height:100px;            margin: 10px;            float:left;            border:1px solid black;            text-align: center;        }        .bg2,.bg4{background:#ccc;font-size:80px;}        .bg8{background: #fb6b2b;font-size:80px;}        .bg16{background: #fb6368;font-size:80px;}        .bg32{background: #b6fbb1;font-size:80px;}        .bg64{background: #5dfbe0;font-size:80px;}        .bg128{background: #65b6fb;font-size:60px;}        .bg256{background: #554efb;font-size:60px;}        .bg512{background: #fb1036;font-size:60px;}        .bg1024{background: #fb2fad;font-size:40px;}        .bg2048{background: #f4fb1b;font-size:40px;}

最后看一下jquery实现过程

 var initRC=[[0,1,2,3],[4,5,6,7],[8,9,10,11],[12,13,14,15]];        $(function (){            function getEmptyDiv(){                var divs=[];                $(".main div").each(function (index , elem){                    if(elem.innerText==""){                        divs.push(elem);                    }                });                return divs;            }            function addClassAll(){                $(".main div").each(function (index ,elem){                    var num=elem.innerText;                    $(elem).removeClass().addClass("bg"+num);                });            }            $("#start").click(function (){                $(".main div").empty();                //divs.empty();                //随机出现数字//                2  或 4//                放在16个div中的其中两里//                先做一个随机数字放一个div中                //同一个格子，不能出现两次随机数//                 随机数只能出现在空白的div中                getRandomNum();                getRandomNum();                addClassAll();            });            function getRandomNum(){                var EmptyDivs=getEmptyDiv();                if(EmptyDivs.length==0){                    alert("不能再继续随机数");                }                var ranNum=Math.random()>0.4?"2":"4";                var divRanNum=parseInt(Math.random()*EmptyDivs.length);                EmptyDivs[divRanNum].innerHTML=ranNum;            }            function rowUpMove(row1,row2){                var divs=$(".main div");                for(var i=0;i<4;i++){                    var div1=  divs[initRC[row1][i]];                    var div2=  divs[initRC[row2][i]];                    if(div2.innerText==""){                    }else if(div1.innerText==""){                        div1.innerText=div2.innerText;                        div2.innerText="";                    }else if(div1.innerText==div2.innerText){                        div1.innerText=div1.innerText*2;                        div2.innerText="";                    }                }            }            function colLeftMove(col1,col2){                var divs=$(".main div");                for(var i=0;i<4;i++){                    if(divs[initRC[i][col2]].innerText==""){                    }else if(divs[initRC[i][col1]].innerText==""){                        divs[initRC[i][col1]].innerText=divs[initRC[i][col2]].innerText;                        divs[initRC[i][col2]].innerText="";                    }else if(divs[initRC[i][col1]].innerText==divs[initRC[i][col2]].innerText){                        divs[initRC[i][col1]].innerText=divs[initRC[i][col1]].innerText*2;                        divs[initRC[i][col2]].innerText="";                    }                }            }            $(window).keyup(function (e){                switch(e.keyCode){                    case 37:                        //左                        for(var i=0;i<3;i++){                            colLeftMove(0,1);                            colLeftMove(1,2);                            colLeftMove(2,3);                        }                        getRandomNum();                        addClassAll();                        break;                    case 38:                        //上                        for(var i=0;i<3;i++) {                            rowUpMove(0, 1);                            rowUpMove(1, 2);                            rowUpMove(2, 3);                        }                        getRandomNum();                        addClassAll();                        break;                    case 40:                        //下                        for(var i=0;i<3;i++) {                            rowUpMove(3, 2);                            rowUpMove(2, 1);                            rowUpMove(1, 0);                        }                        getRandomNum();                        addClassAll();                        break;                    case 39:                        //右                        for(var i=0;i<3;i++){                            colLeftMove(3,2);                            colLeftMove(2,1);                            colLeftMove(1,0);                        }                        getRandomNum();                        addClassAll();                        break;                }            });        })

阅读全文

0 0