js之2048小游戏

1. 它由一个4x4的小方格组成，在游戏一开始的时候会在随机位置随机生成一个2或者4；
2. 通过键盘的上下左右四个方向键来控制数字的移动；
3. 当移动的时候判断相应的方向有无相同的数字或者0；若为相同的数字则叠加，将叠加的和作为分数计算进总分；若为0，则与其换位；
4. 当页面被铺满时，且每个数字都无法叠加，那么叛定为游戏结束，显示一个结束界面，界面内容有当前分数以及重新开始。

以上是游戏的基本流程，下面进行操作：
首先把布局做好,效果图大致如下图：

现在上代码，大致的html部分如下：

 <p class="score">SCORE:<span class="score01">0</span></p>
    <div class="big">
   <!--第一行-->
        <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 class="gameover">
        <p>
            GAME OVER!<br>
            SCORE:<span class="score02">0</span><br>
            <a href="script:;" onclick="show()">重新开始</a>
        </p>
    </div>
    <p class="p"><a href="#" onclick="show()">开始游戏</a></p>

css部分我就不详细展示了，我只展示我的对应数字的时候小方格的背景色部分：

.n2{
    background-color: #eee3da;
}
.n4{
    background-color: #ede0c8;
}
.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;
}
.n2048{
    background-color: #a510eb;
}
.n4096{
    background-color: #7a0ce0;
}
.n8192{
    background-color: #f5089a;
}

下面就是最重要的，能够让它动起来，也就是点击左键就往左移动，点击右键往右移动，下面就是我的js实现部分（以左键为例）：

var game = {
    data: [],
    //分数
    score: 0,
    //游戏状态
    status: 0,
    //开始游戏
    start: function () {
        this.data = [
            [0, 0, 0, 0],
            [0, 0, 0, 0],
            [0, 0, 0, 0],
            [0, 0, 0, 0]
        ];
        this.score = 0;
        this.status = 1;
        //调用随机数（游戏开始时随机生成2或4）
        this.randomNum();
        this.randomNum();
        //更新视图
        this.view();
    },
    //随机数的方法
    randomNum: function () {
        for (; ;) {
            var c = Math.floor(Math.random() * 4);
            var r = 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;
            }
        }
    },
    //更新视图
    view: function () {
        for (var r = 0; r < 4; r++) {
            for (var c = 0; c < 4; c++) {
                var div = document.getElementById("c" + r + c);
                //判断，如果不为0，这个格子就显示这个数字，为0 不显示
                if (this.data[r][c] != 0) {
                    div.innerHTML = this.data[r][c];
                    div.className = "cell n" + this.data[r][c];
                } else {
                    div.innerHTML = " ";
                    div.className = "cell";
                }
            }
        }
        document.getElementsByClassName("score01")[0].innerHTML = this.score;
        //监测游戏状态，不为0就代表游戏结束
        if (this.status == 0) {
            document.getElementsByClassName("score02")[0].innerHTML = this.score;
            document.getElementsByClassName("gameover")[0].style.display = 'block';
        } else {
            document.getElementsByClassName("gameover")[0].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 false;
                    }
                }
            }    
        }
        return true;
    },
    //左移动
    moveLeft: function () {
        var before = String(this.data);//移动之前
        for (var r = 0; r < 4; r++) {
            for (var c = 0; c < 3; c++) {
                var nextc = this.getNextInRow(r, c);
                if (nextc != -1) {
                    if (this.data[r][c] == 0) {
                        this.data[r][c] = this.data[r][nextc];
                        this.data[r][nextc] = 0;
                        c--;
                    } else if (this.data[r][c] == this.data[r][nextc]) {
                        this.data[r][c] *= 2;
                        this.score += this.data[r][c];
                        this.data[r][nextc] = 0;
                    }
                }
            }
        }
        var after = String(this.data);//移动之后
        if (before != after) {
            this.randomNum();
            if (this.isgameover()) {
                this.status = 0;
            }
            this.view();
        }
    },
    getNextInRow: function (r, c) {
        for (var i = c + 1; i < 4; i++) {
            if (this.data[r][i] != 0) {
                return i;
            }
        }
        return -1;
    },

只要把上面的左移动弄明白了基本就OK了，其他三个方向类似，这只是我的思路，欢迎广大博友提出建议，当然有更简单的方法也可以分享分享。