8.24 初学js，尝试完成2048小游戏

最新推荐文章于 2020-07-22 19:49:13 发布

_澈_

最新推荐文章于 2020-07-22 19:49:13 发布

阅读量120

点赞数

文章标签： js初级小游戏

本文链接：https://blog.csdn.net/weixin_43057580/article/details/82024510

版权

html部分
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>2048</title>
        <link rel="stylesheet" type="text/css" href="css/i2048.css"/>
        <link rel="shortcut icon" href="favicon.ico"  />
    </head>
    <body>
        <p class="score01"> score:<span id="score01">0</span></p>
        <div id="box_all">
            <!--这是第一行-->
            <div class="cell" id="c00"></div>
            <div class="cell" id="c01"></div>
            <div class="cell" id="c02"></div>
            <div class="cell" id="c03"></div>
            <!--这是第二行-->
            <div class="cell" id="c10"></div>
            <div class="cell" id="c11"></div>
            <div class="cell" id="c12"></div>
            <div class="cell" id="c13"></div>
            <!--这是第三行-->
            <div class="cell" id="c20"></div>
            <div class="cell" id="c21"></div>
            <div class="cell" id="c22"></div>
            <div class="cell" id="c23"></div>
            <!--这是第四行-->
            <div class="cell" id="c30"></div>
            <div class="cell" id="c31"></div>
            <div class="cell" id="c32"></div>
            <div class="cell" id="c33"></div>   
        </div>
        <div id="gameover" class="gameover">
            <p>
                <!--GAMEOVER-->GAME OVER!!!  <br />
                SCORE:<span id="score02">0</span>  <br />
                <a href="" >TRY AGAIN!!!</a>
            </p>
        </div>

        <script type="text/javascript" src="js/i2048.js"></script>
    </body>
</html>

css部分
*{
    margin: 0px;
    padding: 0px;
    font-family: arial;
}
.score01{
    width: 480px;
    margin: 100px auto 20px;
    font-size: 50px;
    font-weight: bold;
    text-align: center;
    line-height: 50px;
}
.score01 #score01{
    color: #f00;
}
#box_all{
    width: 480px;
    height: 480px;
    background-color: #bbada0;
    border-radius: 10px;
    margin:0 auto;
}
.cell{
    width: 100px;
    height: 100px;
    background-color: #ccc0b3;
    border-radius: 5px;
    margin: 16px 0 0 16px;
    text-align: center;
    line-height: 100px;
    float: left;
    font-size: 50px;
    font-weight: bold;  
}
.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{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(200,200,200,0.4);
    display: none;
}
#gameover p{
    width: 480px;
    height: 200px;
    border: 5px solid #000;
    border-radius: 20px;
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    line-height: 66px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -245px;
    margin-top: -100px;
    background-color: deepskyblue;
}
#gameover a{
    background-color: #9f8d77;
    color: #FFF;
    padding: 10px;
    border-radius: 5px;
}

js部分

//使用面向对象的编程方式
//不要使用全局变量和全局函数

//创建一个对象，这个对象记录了游戏里面所有的属性和方法
var game = {
    data : [],   //创建了一个存放游戏数据的数组
    score : 0,    //定义游戏的分数
    gamerunning:1,   //游戏如果处于运行中，给个标识
    gameover :0,     //游戏如果结束，给个标识
    status : 1,      //自己定义一个状态，时刻的去跟游戏的状态进行比较，判断游戏是否结束
    start : function(){    //游戏开始的方法
//      开始之前要做的事情
//      game.data = [     //1
//          [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++){    //2
            game.data[r] = [];
            for(var c = 0;c < 4;c++){
                game.data[r][c] = 0
            }
        }
        game.randomNum();     //游戏开始的时候有两个随机数，就调用两次
        game.randomNum();
//      game.data = [     //1
//          [2,0,0,0],
//          [0,0,0,2048],
//          [0,0,8,0],
//          [0,0,0,16]
//      ];
        game.dataView()
    },
    randomNum : function(){   //生成随机数的方法
//      生成随机数，在2或者4。想办法放到数组中去，并且只能在0的位置替换
        for(;;){   //无限循环，直到找到为0的位置为止
            var r = Math.floor(Math.random() * 4);  //随机生成了一个行
            var c = Math.floor(Math.random() * 4);  //随机生成了一个列
            if(game.data[r][c] == 0){   //只有当位置为0的时候才能生成
                var num = Math.random() > 0.5?2:4;  //生成2或者4
                game.data[r][c] = num;   //为数组赋值
                break;    //退出循环
            }
        }
//      while(true){
//          
//      }
    },
    dataView:function(){   //把数组里面的数据显示到页面中
        for(var r = 0;r<4;r++){
            for(var c = 0;c<4;c++){
                var div = document.getElementById("c" + r + c);  //找到对应的单元格
                if(game.data[r][c] != 0){  //如果不为0
                    div.innerHTML = game.data[r][c];
                    div.className = "cell n" + game.data[r][c];   //更改class
                }else{
                    div.innerHTML = "";
                    div.className = "cell";
                }
            }
        }

//      找到分数的id进行赋值
        document.getElementById("score01").innerHTML = game.score;

        if(game.status == game.gameover){
            document.getElementById("score02").innerHTML = game.score;
            document.getElementById("gameover").style.display = "block";
        }else{
            document.getElementById("gameover").style.display = "none";
        }
    },

    isgameover : function(){   //判断游戏是否结束
        // 1.数组里面如果还有0
        // 2.如果左右还有相同的
        // 3.如果上下还有相同的
        for(var r = 0;r < 4;r++){
            for(var c = 0;c < 4;c++){
                if(game.data[r][c] == 0){
                    return false;    //表示游戏没有结束
                }
                if(c < 3){    //不需要比较最后一个
                    if(game.data[r][c] == game.data[r][c+1]){
                        return false
                    }
                }
                if(r < 3){
                    if(game.data[r][c] == game.data[r+1][c]){
                        return false
                    }
                }
            }
        }
        return true;   //游戏结束为true
    },

//左移的方法
    moveLeft : function(){   
        // 引用类型不能进行比较，原始类型可以
        // game.data.toString()
        // "0,0,0,0,0,0,0,2,0,2,0,0,0,0,0,0"
        // String(game.data)
        // "0,0,0,0,0,0,0,2,0,2,0,0,0,0,0,0"

        // 移动之前
        var before = game.data.toString();
        // 处理移动的逻辑
        // 只需要处理好一行的逻辑，剩下的直接遍历
        for(var r = 0;r < 4;r++){
            // 只处理第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;       //把找到的位置改变成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;     //如果在后面找到了,直接返回索引
            }
        }
        // 如果没有找到
        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 >= 0 ; c--){
            var beforec = game.getRightInRow(r,c);
            if(beforec != -1){
                if(game.data[r][c] == 0){
                    game.data[r][c] = game.data[r][beforec];
                    game.data[r][beforec] = 0 ;
                    c++;
                }else if(game.data[r][c] == game.data[r][beforec]){
                    game.data[r][c] += game.data[r][beforec];
                    game.score += game.data[r][c];
                    game.data[r][beforec] = 0;
                }
            }else{
                break;
            }
        }

    },
    getRightInRow : function(r,c){
        for(var i = c - 1;i >= 0;i--){
            if(game.data[r][i] != 0){
                return i;     //如果在后面找到了,直接返回索引
            }
        }
        // 如果没有找到
        return -1;    //如果没有找到，就返回一个标识符
    },

//上移的方法

    moveOn : function (){  
        //移动之前
        var before = game.data.toString();

        for(var c = 0;c < 4; c++){
            game.moveOnInRow(c);

        }
        //移动之后
        var after = game.data.toString();
        if(before != after){
            game.randomNum();
            if(game.isgameover()){
                game.status = game.gameover;
            }
            game.dataView()
        }
    },

    moveOnInRow : function(c){
        for(var r = 0; r < 3 ; r++){
            var nextr = game.getOnInRow(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;
            }
        }       
    },

    getOnInRow : function(r,c){
        for(var i = r + 1;i < 4;i++){
            if(game.data[i][c] != 0){
                return i;     //如果在后面找到了,直接返回索引
            }
        }
        // 如果没有找到
        return -1;    //如果没有找到，就返回一个标识符
    },

//下移的方法

moveDown : function (){  
        //移动之前
        var before = game.data.toString();

        for(var c = 0;c < 4; c++){
            game.moveDownInRow(c);

        }
        //移动之后
        var after = game.data.toString();
        if(before != after){
            game.randomNum();
            if(game.isgameover()){
                game.status = game.gameover;
            }
            game.dataView()
        }
    },

moveDownInRow : function(c){
        for(var r = 3; r >= 0 ; r--){
            var beforer = game.getDownInRow(r,c);
            if(beforer != -1){
                if(game.data[r][c] == 0){
                    game.data[r][c] = game.data[beforer][c];
                    game.data[beforer][c] = 0 ;
                    r++;
                }else if(game.data[r][c] == game.data[beforer][c]){
                    game.data[r][c] += game.data[beforer][c];
                    game.score += game.data[r][c];
                    game.data[beforer][c] = 0;
                }
            }else{
                break;
            }
        }       
    },

    getDownInRow : function(r,c){
        for(var i = r - 1;i >= 0;i--){
            if(game.data[i][c] != 0){
                return i;     //如果在后面找到了,直接返回索引
            }
        }
        // 如果没有找到
        return -1;    //如果没有找到，就返回一个标识符
    },  
}

game.start()
// console.log(game.data)

document.onkeydown = function(event){
    var event = event || window.event;
    if(event.keyCode == 37){
        game.moveLeft()
    }
    if(event.keyCode == 39){
        game.moveRight()
    }
    if(event.keyCode == 38){
        game.moveOn()
    }
    if(event.keyCode == 40){
        game.moveDown()
    }
}