jquery实现2048游戏

先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;
                }
            });
        })