单对象编程实现2048小游戏！

2048小Demo

1、题目

在百度搜索引擎搜索2048，我们可以在线玩2048 Game - Play 2048 GameOnline，同学都说很好玩，我就花了点时间简单的写了下，样式很简易！

2、思路

（1）、首先我们要对这个游戏有一个简单的了解，2048是按下上下左右将相同且相邻数字相同的数字相加，然后在随机位置随机生成一个新的数字，将每一列或者每一行的数字移动到最边缘，碰到相邻的相同数字就相加，没有碰到相同的数字就移动，每次移动后在页面中重新生成一个新的数字，当页面的数字都充满格子游戏就结束了；
（2）、其次在分析完逻辑后，我们写这个游戏需要分为四个阶段：游戏状态，创建二维数组生成所需要的数字，渲染页面，设置页面的移动逻辑更新视图；
（3）、分模块儿写每个过程的逻辑，游戏状态需要在写每个功能时设置游戏状态保证功能的不紊乱；
游戏开始：需要生成2个数字，随机位置的随机数字2或者4,生成2的概率要比4的概率大；
游戏进行：先移动，有相邻相同数字就相加，没有则移动，有空位置就要随机生成一个数字；
游戏结束：判断上下左右数字可以相加吗？能相加就能空出位置继续游戏，不能相加且没有空位置游戏就结束了；
（4）、创建数组：存放游戏数据，生成随机行和随机列确定随机数的位置，判断页面上是否还有空位置，若有则生成数字，若没有则不生成数字游戏也就结束了；

（5）、渲染页面:将所生成的数字渲染至页面中，更新视图，更新数据，更新样；
（6）、移动逻辑：
左移：抽出单独一行遍历数据，判断每个位置的是否有数字，若有数字相同相邻则相加，不同则继续交换位置；若没有则与其他有数字的位置交换位置，达到移动的目的，最左边不需要移动；
右移：抽出单独一行遍历数据，判断每个位置的是否有数字，若有数字相同相邻则相加，不同则继续交换位置；若没有则与其他有数字的位置交换位置，达到移动的目的，最右边不需要移动；
上移：抽出单独一列遍历数据，判断每个位置的是否有数字，若有数字相同相邻则相加，不同则继续交换位置；若没有则与其他有数字的位置交换位置，达到移动的目的，最上边不需要移动；
下移：抽出单独一列遍历数据，判断每个位置的是否有数字，若有数字相同相邻则相加，不同则继续交换位置；若没有则与其他有数字的位置交换位置，达到移动的目的，最下边不需要移动；

3、效果展示图

4、写法

1.游戏开始（准备状态）

（1）、设置得分属性；
（2）、设置游戏状态；
（3）、设置游戏结束；
（4）、设置游戏运行；
（5）、设置数组存放游戏数据；

2.存储数据（数组）

（1）、定义一个二维数组，初始化数据为空的值；
（2）、封装一个函数，随机生成行和列；
（3）、判断该位置是否有数据，若没有则添加一个随机数

3.游戏结束（状态）

（1）、封装一个函数，用来判断游戏结束的状态；
（2）、判断页面是否有空数据，若有则游戏还没结束，反之则结束；
（3）、判断上下相邻数据是否可以相加，若可以则游戏还没结束，反之则结束；
（4）、判断左右数据是否可以相加，若可以则游戏没有结束，反之则结束；
（5）、若三者条件都满足则游戏结束，游戏状态变为结束状态；

4、移动逻辑（以左移为例）

（1）、单独拎出一行进行判断，若该行有需要移动的数据则将其移动到最左端位置，若没有数据则不移动直接跳出循环；
（2）、将有该行中有数据的与没有数据的依次交换位置直到最左端为止；
（3）、相邻数据若相同则相加，同时分数增加，若相邻位置数字不相同则继续交换直到最左端位置；
（4）、判断游戏状态，若都不能移动了或者没有空位置则表明游戏结束啦；
（5）、渲染数据在页面上，更新视图和数据；

5、参考代码

Css部分：

*{
    margin: 0px;
    padding: 0px;
}
body{
    background-color: #FAF8EF;
}
.top{
    width: 100%;
    height: 100px;
    /* border: 1px solid red; */
    position: relative;
}
.top .top_center{
    width: 500px;
    height: 100%;
    /* border: 1px solid black; */
    position: absolute;
    left: 30%;
}
.top_center .shu{
    width: 180px;
    height: 50px;
    /* border:1px solid blue; */
    color: #776E65;
    font-size: 65px;
    text-align: center;
    line-height: 50px;
    float: left;
    margin-top: 23px;
}
.top_center  .word1{
    width: 65px;
    height: 60px;
    background-color: #BBADA0;
    float: right;
    margin-top: 20px;
}
.word1 .word_one{
    width: 100%;
    height: 50%;
    /* background-color: blue; */
    text-align: center;
    line-height: 30px;
    color: white;
}
.word1 .word_two{
    /* background-color: yellow; */
    text-align: center;
    line-height: 30px;
    color: white;
    font-size: 20px;
}
.top_center  .word2{
    width: 65px;
    height: 60px;
    background-color: #BBADA0;
    float: right;
    margin-top: 20px;
    margin-right: 10px;
}
.word2 .word_three{
    width: 100%;
    height: 50%;
    /* background-color: blue; */
    text-align: center;
    line-height: 30px;
    color: white;
}
.word2 .word_four{
    /* background-color: yellow; */
    text-align: center;
    line-height: 30px;
    color: white;
    font-size: 20px;
}
.mid{
    width: 100%;
    height: 100px;
    /* border: 1px solid blueviolet; */
    position: relative;
}
.mid .mid_center{
    width: 500px;
    height: 100%;
    /* border: 1px solid black; */
    position: absolute;
    left: 30%;
}
.mid_center .mid_center_left{
    width: 70%;
    height: 100%;
    /* background-color: brown; */
    float: left;
}
.mid_center_left .word_cu{
    width: 100%;
    height: 25px;
    /* border: 1px solid black; */
    color: #8F7A66;;
    font-size: 18px;
}
.mid_center_left .word_xi{
    width: 100%;
    height: 25px;
    /* border: 1px solid yellow; */
    margin-top:10px;
}
.mid_center .mid_center_right{
    width:30%;
    height: 100%;
    /* background-color: yellow; */
    float: right;
}
.mid_center_right .word_five{
    width: 100%;
    height: 60px;
    /* border: 1px solid black; */
    background-color: #8F7A66;
    text-align: center;
    line-height: 60px;
    font-size: 20px;
    color: white;
}
.bot{
    width: 100%;
    height: 500px;
    /* border: 1px solid red; */
}
.bot .bot_ul{
    width: 496px;
    height: 500px;
    background-color: #BBADA0;
    position: absolute;
    left: 30%;
}
.bot_ul li{
    list-style: none;
    width: 100px;
    height: 100px;
    background-color: #CDC1B4;
    float: left;
    text-align: center;
    line-height: 100px;
    font-size: 60px;
    margin-top: 20px;
    margin-left: 20px;
}
.n2{background-color:#eee3da;color:#776e65}
.n4{background-color:#ede0c8;color:#776e65}
.n8{background-color:#f2b179}
.n16{background-color:#f59563}
.n32{background-color:#f67c5f}
.n64{background-color:#f65e3b}
.n128{background-color:#edcf72}
.n256{background-color:#edcc61}
.n512{background-color:#9c0}
.n1024{background-color:#33b5e5;font-size:40px}
.n2048{background-color:#09c;font-size:40px}
.n4096{background-color:#a6c;font-size:40px}
.n8192{background-color:#93c;font-size:40px}

.gameover{
    display: none;
    position: absolute;
    top:0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-color: rgba(55, 55, 55, 0.5);
}
.gameover>p{
    width: 300px;
    height: 200px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -150px;
    text-align: center;
    line-height: 65px;
    border-radius: 10px;
    border: 1px solid;
}
.gameover>p>a{
    padding: 10px;
    color: #fff;
    background-color: #9f8d77;
    border-radius: 6px;
    text-decoration: none;
}

Html部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入外部css样式 -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- 引入外部JS样式 -->
    <script src="../js/index.js"></script>
</head>
<body>
    <!-- //头部 -->
    <div class="top">
        <div class="top_left"></div>
        <div class="top_center">
        <div class="shu">2048</div>
        <div class="word1">
            <div class="word_one">SCORE</div>
            <div class="word_two" id="score01">0</div>
            
        </div>
        <div class="word2">
            <div class="word_three">SCORE</div>
            <div class="word_four">0</div>
        </div>
        </div>
        <div class="top_right"></div>
    </div>
    <!-- 中部 -->
    <div class="mid">
        <div class="mid_center">
            <div class="mid_center_left">
                <div class="word_cu">
                    Play 2048 Game Online
                </div>
                <div class="word_xi">
                    Join the numbers and get to the 2048 tile!
                </div>
            </div>
            <div class="mid_center_right">
                <div class="word_five">
                    New Game
                </div>
            </div>
        </div>
    </div>
    <!-- 尾部 -->
    <div class="bot">
       <ul class="bot_ul">
           <li class="cell" id="c00"></li>
           <li class="cell" id="c01"></li>
           <li class="cell" id="c02"></li>
           <li class="cell" id="c03"></li>

           <li class="cell" id="c10"></li>
           <li class="cell" id="c11"></li>
           <li class="cell" id="c12"></li>
           <li class="cell" id="c13"></li>

           <li class="cell" id="c20"></li>
           <li class="cell" id="c21"></li>
           <li class="cell" id="c22"></li>
           <li class="cell" id="c23"></li>

           <li class="cell" id="c30"></li>
           <li class="cell" id="c31"></li>
           <li class="cell" id="c32"></li>
           <li class="cell" id="c33"></li>
       </ul>
    </div>
    <div class="gameover" id="gameover">
        <p>
            GAME OVER!<br/>
            SCORE:<span id="score02">0</span><br/>
            <a href="">TRY AGAIN</a>
        </p>
    </div>
</body>
</html>

Js部分：

window.onload=function(){
    var game={
        score:0,//添加一个得分属性
        status:1,//添加一个游戏状态
        gameover:0,//添加一个结束状态
        gamerunnig:1,//添加一个游戏运行状态
        data:[],//添加一个数组，用于存储游戏数据的
        start:function(){
            // 创建一个二维数组
            for(var r=0;r<4;r++){
                this.data[r]=[];
                for(var c=0;c<4;c++){
                    this.data[r][c]=0;
                }
            }
            console.log(this.data);
            this.randomNum()
            this.randomNum()
            this.dataView()
        },
        randomNum:function(){
        for(;;){
           var r=Math.floor(Math.random()*4)//随机生成行
           var c=Math.floor(Math.random()*4)//随机生成列
        // 判断位置上是否有数据
        if(this.data[r][c]==0){//当该位置没有数据
            var num=Math.random()>0.3?2:4;
            this.data[r][c]=num;
            break;
        }
        }
        },
        //视图更新 分数，样式，数据
        dataView:function(){
            for(var r=0;r<4;r++){
                for(var c=0;c<4;c++){
                    // 获取所有li的ID名
                    var li_all=document.getElementById("c"+r+c)
                    
                    // 判断是否有空位置，若有则添加文本节点值并且改变其样式
                    if(this.data[r][c]!=0){
                        li_all.innerHTML=this.data[r][c];
                        li_all.className="cell n"+this.data[r][c];
                    }else{//数组中的值为0，数据不能显示至页面中
                        li_all.innerHTML=""
                        li_all.className="cell"

                    }
                }
            }
            document.getElementById("score01").innerHTML=this.score;
            //判断状态
            if(this.status==this.gameover){
                document.getElementById("score02").innerHTML=this.score;
                document.getElementById("gameover").style.display="block"

            }else{
                document.getElementById("gameover").style.display="none"
            }

        },
        isGameover:function(){
            for(var r=0;r<4;r++){
                for(var c=0;c<4;c++){
                    if(this.data[r][c]==0){
                    //说明有空位置游戏没有结束
                    return false;
                    }
                    if(c<3){
                        if(this.data[r][c]==this.data[r][c+1]){
                            //说明左右相邻数据相等可以相加，游戏并没有结束
                            return false;
                        }
                    }
                    if(r<3){
                        if(this.data[r][c]==this.data[r+1][c]){
                            //说明上下相邻数据相等，则可以进行相加，游戏没有结束
                        }
                    }
                }
            }
            return true;//游戏结束
        },
        moveLeft:function(){
            var before=String(this.data)
            for(var r=0;r<4;r++){
                this.moveLeftRow(r)
            }
            var after=String(this.data)
            if(before!=after){
                this.randomNum()
                if(this.isGameover()){
                    this.status=this.gameover
                }
                this.dataView()
            }
        },
        moveLeftRow:function(r){//单独抽出一行进行写逻辑
            for(var c=0;c<3;c++){//最左边不需要移动，所以遍历三次
                //找出r行c列后面不为0的数据的位置保存至nextc中
                var nextr=this.getNextinRow(r,c);
                if(nextr!=-1){
                    //这一行中有需要移动的数据
                    if(this.data[r][c]==0){
                        //一定是把所有的需要移动的数据移动到位置上去
                        this.data[r][c]=this.data[r][nextr]
                        this.data[r][nextr]=0;
                        c--;
                        //c留在原地继续左移
                    }else if(this.data[r][c]==this.data[r][nextr]){
                        this.data[r][c]*=2;
                        this.score+=this.data[r][c];
                        this.data[r][nextr]=0;
                    }
                    }else{

                        //这一行中没有需要移动的数据
                        break;
                    }
                }
            },
            getNextinRow:function(r,c){
                for(var i=c+1;i<4;i++){
            //如果数据不为0，表示找到了，返回i,对应的是当前数据的列下标
                if(this.data[r][i]!=0){
                    return i;
                }
                }
                return-1;//如果当前行找不到不为0的数据则返回-1标识
            },





            moveRight:function(){
                var before=String(this.data)
                for(var r=0;r<4;r++){
                    this.moveRightRow(r)
                }
                var after=String(this.data)
                if(before!=after){
                    this.randomNum()
                    if(this.isGameover()){
                        this.status=this.gameover
                    }
                    this.dataView()
                }
            },
            moveRightRow:function(r){//单独抽出一行进行写逻辑
                for(var c=3;c>0;c--){//最左边不需要移动，所以遍历三次
                    //找出r行c列后面不为0的数据的位置保存至nextc中
                    var nextr=this.getPreinRow(r,c);
                    if(nextr!=-1){
                        //这一行中有需要移动的数据
                        if(this.data[r][c]==0){
                            //一定是把所有的需要移动的数据移动到位置上去
                            this.data[r][c]=this.data[r][nextr]
                            this.data[r][nextr]=0;
                            c++;
                            //c留在原地继续右移
                        }else if(this.data[r][c]==this.data[r][nextr]){
                            this.data[r][c]*=2;
                            this.score+=this.data[r][c];
                            this.data[r][nextr]=0;
                        }
                        }else{
    
                            //这一行中没有需要移动的数据
                            break;
                        }
                    }
                },
                getPreinRow:function(r,c){
                    for(var i=c-1;i>-1;i--){
                //如果数据不为0，表示找到了，返回i,对应的是当前数据的列下标
                    if(this.data[r][i]!=0){
                        return i;
                    }
                    }
                    return-1;//如果当前行找不到不为0的数据则返回-1标识
                },



                moveTop:function(){
                    var before=String(this.data)
                    for(var c=0;c<4;c++){
                        this.moveTopRow(c)
                    }
                    var after=String(this.data)
                    if(before!=after){
                        this.randomNum()
                        if(this.isGameover()){
                            this.status=this.gameover
                        }
                        this.dataView()
                    }
                },
                moveTopRow:function(c){//单独抽出一行进行写逻辑
                    for(var r=0;r<3;r++){//最上边不需要移动，所以遍历三次
                        //找出r行c列后面不为0的数据的位置保存至nextc中
                        var nextr=this.getNext1inRow(r,c);
                        if(nextr!=-1){
                            //这一行中有需要移动的数据
                            if(this.data[r][c]==0){
                                //一定是把所有的需要移动的数据移动到位置上去
                                this.data[r][c]=this.data[nextr][c]
                                this.data[nextr][c]=0;
                                r--;
                                //r留在原地继续上移
                            }else if(this.data[r][c]==this.data[nextr][c]){
                                this.data[r][c]*=2;
                                this.score+=this.data[r][c];
                                this.data[nextr][c]=0;
                            }
                            }else{
        
                                //这一行中没有需要移动的数据
                                break;
                            }
                        }
                    },
                    getNext1inRow:function(r,c){
                        for(var i=r+1;i<4;i++){
                    //如果数据不为0，表示找到了，返回i,对应的是当前数据的行下标
                        if(this.data[i][c]!=0){
                            return i;
                        }
                        }
                        return-1;//如果当前列找不到不为0的数据则返回-1标识
                    },


                    moveBot:function(){
                        var before=String(this.data)
                        for(var c=0;c<4;c++){
                            this.moveBotRow(c)
                        }
                        var after=String(this.data)
                        if(before!=after){
                            this.randomNum()
                            if(this.isGameover()){
                                this.status=this.gameover
                            }
                            this.dataView()
                        }
                    },
                    moveBotRow:function(c){//单独抽出一列进行写逻辑
                        for(var r=3;r>0;r--){//最左边不需要移动，所以遍历三次
                            //找出r行c列后面不为0的数据的位置保存至nextr中
                            var nextr=this.getNext2inRow(r,c);
                            if(nextr!=-1){
                                //这一行中有需要移动的数据
                                if(this.data[r][c]==0){
                                    //一定是把所有的需要移动的数据移动到位置上去
                                    this.data[r][c]=this.data[nextr][c]
                                    this.data[nextr][c]=0;
                                    r++;
                                    //r留在原地继续下移
                                }else if(this.data[r][c]==this.data[nextr][c]){
                                    this.data[r][c]*=2;
                                    this.score+=this.data[r][c];
                                    this.data[nextr][c]=0;
                                }
                                }else{
            
                                    //这一列中没有需要移动的数据
                                    break;
                                }
                            }
                        },
                        getNext2inRow:function(r,c){
                            for(var i=r-1;i>-1;i--){
                        //如果数据不为0，表示找到了，返回i,对应的是当前数据的行下标
                            if(this.data[i][c]!=0){
                                return i;
                            }
                            }
                            return-1;//如果当前列找不到不为0的数据则返回-1标识
                        },
            
        
    


    }//总对象
    game.start();
    game.dataView();
    document.onkeydown=function(event){
        if(event.keyCode==37){
            game.moveLeft()
        }
        if(event.keyCode==39){
            game.moveRight()
        }
        if(event.keyCode==38){
            game.moveTop()
        }
        if(event.keyCode==40){
            game.moveBot()
        }
    }
    

}//加载页面

6、总结

2048实战小demo，可以将面向对象编程的过程又更近了一步，展示了我们的综合能力，既对页面dom元素的进行了操作，又实现了一些简单的逻辑，同时还综合了键盘事件，所以我们要多写写类似于这样的小demo来提升自己的能力。