js-基础-简易版2048小游戏

js实现
//编程思想:
//使用面向对象的编程方式
//不要使用全局变量和全局函数
//创建一个对象，这个对象记录了游戏里面所有的属性和方法

var game = {
    data : [],        //创建一个存放游戏数组的数据
    score : 0,        //定义游戏的初始分数
    gamerunning : 1,  //如果游戏处于运行状态 给予一个标识1
    gameover : 0,     //如果游戏处于结束状态 给予一个标识0
    status : 1,       //自己定义一个数据用于去判断游戏处于的状态
    start : function(){ //定义游戏开始方法
//      开始之前要做的事情
//      game.data = [    
//          [0,0,0,0],
//          [0,0,0,0],
//          [0,0,0,0],
//          [0,0,0,0]
//      ];
        game.data = [];  //开始的时候初始化游戏的数据
        game.score = 0;  //开始的时候初始化游戏的分数
        game.status = game.gamerunning; //开始的时候初始化游戏的状态
        for(var r = 0 ;r < 4;r++){      //生成4行
            game.data[r] = [];
            for(var c = 0 ;c < 4 ;c ++){  //生成4列
                game.data[r][c] = 0;
            }
        }
        game.randomNum();   //开始的时候随机生成两个随机数,调用两次
        game.randomNum();
        game.dataView();
    },
    randomNum : function(){ //生成随机数的方法,并且放到数组中去,只能是在数据为0的位置
        for(;;){ //无限循环，直到找到为0的位置为止
            var n = Math.floor(Math.random()*4);  //随机n行
            var m = Math.floor(Math.random()*4);  //随机n列
            if(game.data[n][m] == 0){
                var num = Math.random()>0.5?2:4  //随机生成一个随机数2或者4
                game.data[n][m] = num;           //把第n行第m列赋值为num(2或者4)
                break;
            }   
        }
    },
    dataView : function(){   //把数据里面的数据放到页面中间去
        for(var r = 0 ; r < 4 ;r++){
            for(var c = 0; c < 4 ; c++){
                var li = document.getElementById("c" + r +c);
                if(game.data[r][c] != 0){  //如果数组中的数据不为0 就放到页面对应的位置
                    li.innerHTML = game.data[r][c];
                    li.className = "n" + game.data[r][c]//给其增加一个类 ，用于改变其对应的样式
                }
                else{
                    li.innerHTML = "";
                    li.className = "";
                }
            }
        }
        //找到从score进行赋值
        var score = document.getElementById("score1");
        score.innerHTML = game.score;
        var tryagain = document.getElementById("try")
        tryagain.onclick = function(){  
            game.start();
        }
        if(game.status == game.gameover){
            document.getElementById("div3").style.display = "block";
            document.getElementById("score2").innerHTML = game.score;
        }
        else{
            document.getElementById("div3").style.display= "none";
        }
    },

    /*判断游戏是否结束*/
   /*结束标志1.数组中 是否还存在0数据  2. 数组中左右是否有相同   3.数组中上下是否有相同*/
   isGameover : function(){
         for(var r = 0;r < 4 ; r++){
            for(var c = 0 ;c < 4 ; c++){
                if(game.data[r][c] == 0){
                    return false;
                }
                if(r < 3){
                    if(game.data[r][c] == game.data[r+1][c]){
                        return false;
                    }
                }
                if(c < 3){
                    if(game.data[r][c] == game.data[r][c+1]){
                        return false;
                    }
                }
            }
         }
         return true;
   },



   moveLeft : function(){  //想左边移动的方法 逻辑比较移动之前和移动之后的数据
         var before = game.data.toString();//引用类型不可以比较 所以转化为字符串进行比较，调用toString方法转化为字符串
         for(var r = 0 ; r < 4 ;r++){
            game.moveLeftinRow(r);
         }

         var after = game.data.toString();
         if(before != after){
            game.randomNum();
            if(game.isGameover()){
                game.status = game.gameover;
            }
            game.dataView();
         }

   } ,

   moveLeftinRow : function(r){
        for(var c = 0 ; c < 3 ;c++){   //只需要循环到第三个数据
            var nextc = game.getnextinRow(r,c);
            if(nextc != -1){
                if(game.data[r][c] == 0){//如果当前位置为0
                    game.data[r][c] = game.data[r][nextc]
                    game.data[r][nextc] = 0;
                    c--;//让索引留在原地 
                }
                else if(game.data[r][c] == game.data[r][nextc]){//如果当前位置和找到的位置数据相等
                    game.data[r][c] *= 2;
                    game.score += game.data[r][c];
                    game.data[r][nextc] = 0;
                }

            }
            else{
                break;//没有找到，直接退出循环 
            }
        }
   },
   getnextinRow : function(r,c){
        for(var i = c+1 ; i < 4;i++){
            if(game.data[r][i] != 0){
                return i;//如果找到一个不为0的数据  返回索引
            }
        }
        return -1;//如果没有找到 返回一个标识符 用于判断
   },

   moveRight : function(){
         var before = game.data.toString();//引用类型不可以比较 所以转化为支字符串进行比较
         for(var r = 0 ; r < 4 ;r++){
            game.moveRightinRow(r);
         }

         var after = game.data.toString();
         if(before != after){
            game.randomNum();
            if(game.isGameover()){
                game.status = game.gameover;
            }
            game.dataView();
         }

   } ,

   moveRightinRow : function(r){
        for(var c = 3 ; c >-1  ;c--){
            var nextc = game.getRightinRow(r,c);
            if(nextc != -1){
                if(game.data[r][c] == 0){
                    game.data[r][c] = game.data[r][nextc]
                    game.data[r][nextc] = 0;
                    c++;
                }
                else if(game.data[r][c] == game.data[r][nextc]){
                    game.data[r][c] *= 2;
                    game.score += game.data[r][c];
                    game.data[r][nextc] = 0;
                }

            }
            else{
                break;
            }
        }
   },
   getRightinRow : function(r,c){
        for(var i = c-1 ; i > -1;i--){
            if(game.data[r][i] != 0){
                return i;
            }
        }
        return -1;
   },


    moveTop : function(){
         var before = game.data.toString();//引用类型不可以比较 所以转化为支字符串进行比较
         for(var c = 0 ; c < 4 ;c++){
            game.moveTopinRow(c);
         }

         var after = game.data.toString();
         if(before != after){
            game.randomNum();
            if(game.isGameover()){
                game.status = game.gameover;
            }
            game.dataView();
         }

   } ,

   moveTopinRow : function(c){
        for(var r = 0 ; r< 3 ;r++){
            var nextr = game.getTopinRow(r,c);
            if(nextr != -1){
                if(game.data[r][c] == 0){
                    game.data[r][c] = game.data[nextr][c]
                    game.data[nextr][c] = 0;
                    r--
                }
                else if(game.data[r][c] == game.data[nextr][c]){
                    game.data[r][c] *= 2;
                    game.score += game.data[r][c];
                    game.data[nextr][c] = 0;
                }

            }
            else{
                break;
            }
        }
   },
   getTopinRow : function(r,c){
        for(var i = r+1 ; i < 4;i++){
            if(game.data[i][c] != 0){
                return i;
            }
        }
        return -1;
   },


   moveBottom : function(){
         var before = game.data.toString();//引用类型不可以比较 所以转化为支字符串进行比较
         for(var c = 0 ; c <4 ;c++){
            game.moveBottominRow(c);
         }

         var after = game.data.toString();
         if(before != after){
            game.randomNum();
            if(game.isGameover()){
                game.status = game.gameover;
            }
            game.dataView();
         }

   } ,

   moveBottominRow : function(c){
        for(var r = 3 ; r > -1 ;r--){
            var nextr = game.getBottominRow(r,c);
            if(nextr != -1){
                if(game.data[r][c] == 0){
                    game.data[r][c] = game.data[nextr][c]
                    game.data[nextr][c] = 0;
                    r++
                }
                else if(game.data[r][c] == game.data[nextr][c]){
                    game.data[r][c] *= 2;
                    game.score += game.data[r][c];
                    game.data[nextr][c] = 0;
                }

            }
            else{
                break;
            }
        }
   },
   getBottominRow : function(r,c){
        for(var i = r-1 ; i > -1;i--){
            if(game.data[i][c] != 0){
                return i;
            }
        }
        return -1;
   }






}
game.start();
//console.log(typeof(game.data))
document.onkeydown = function(event){
    var event = event || window.event
    if(event.keyCode == 37){
        game.moveLeft()
    }
    if(event.keyCode == 38){
        game.moveTop()
    }
    if(event.keyCode == 39){
        game.moveRight()
    }
    if(event.keyCode == 40){
        game.moveBottom()
    }
}

html+css
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
          *{
            margin: 0;
            padding: 0;
           }
           #div1{
            width: 480px;
            margin: 50px auto 20px;
            font-size: 50px;
           }
           #score1{
            font-size:36px;
            color: pink;
            line-height: 50px;
           }
            #score2{
            font-size:36px;
            line-height: 50px;
           }
           #div2 ul{
            list-style: none;
            width: 480px;
            height: 480px;
            background-color: pink;
            margin: 0 auto;
            border-radius:10px ;
           }
           li{
            float: left;
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
            margin:16px 0 0 16px ;
            border-radius:8px ;
            font-size: 50px;
            text-align: center;
            line-height:100px;
            font-weight:bold ;
           }
           #div3{
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            background-color:antiquewhite;
            opacity: 0.9;
            display: none;
            color: #F65E3B;
            font-weight:bold ;
           }
           #div4{
            width: 480px;
            margin: 300px auto;
            text-align: center;
           }
           #div4 p{
            font-size:50px;
           }
            .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}
        </style>
    </head>
    <body>
        <div id = "div1">score : <span id = "score1">0</span></div>
        <div id="div2">
            <ul>
                <li id = "c00"></li>
                <li id = "c01"></li>
                <li id = "c02"></li>
                <li id = "c03"></li>
                <li id = "c10"></li>
                <li id = "c11"></li>
                <li id = "c12"></li>
                <li id = "c13"></li>
                <li id = "c20"></li>
                <li id = "c21"></li>
                <li id = "c22"></li>
                <li id = "c23"></li>
                <li id = "c30"></li>
                <li id = "c31"></li>
                <li id = "c32"></li>
                <li id = "c33"></li>
            </ul>
        </div>
        <div id = "div3">
            <div id = "div4">
                <p> GAME OVER!!! </p>
                <p> score : <span id = "score2"></span></p>
                <p id = "try"> TRY AGAIN</p>
            </div>
        </div>
        <script src="js/js.js" type="text/javascript"></script>
    </body>
</html>