前端仿写2048小游戏

首先来看一下这个效果图

在游戏开始之前，通过页面可以就看见这是一个4行4列的，先用生成一个二维数组，并且将二维数组的值均为0，然后调用生成随机数的函数

for (var r = 0; r < 4; r++) { //遍历行，在每一行添加一个数组，
            this.arr[r] = []; //在行上创建一个新数组
            for (var c = 0; c < 4; c++) { //遍历列,形成二维数组（4行4列）
                this.arr[r][c] = 0;
            }
        }

调用随机生成数的函数

然后在页面生成两个随机数，

gamerandom: function() {
     for (;;) { //生产死循环，直到生成跳出循环
         //生成行和列的两个随机数
         var r = Math.floor(Math.random() * 4);
         var c = Math.floor(Math.random() * 4);
         if (this.arr[r][c] == 0) { //如果在r行c列的数组为0时，
             var num = Math.random() > 0.5 ? 2 : 4; //随机生成一个2或者4 的数字 
             this.arr[r][c] = num; //进行赋值，赋值成功后就跳出死循环
             break;
         }
     }
 }

判断随机数的位置，是否可以生成随机数

//判断每一个数字的值是否为0，
if (this.arr[r][c] == 0) { //如果有空的位置就用“  ”（空字符串显示） 
     div.innerHTML = "";
     div.className = "ceil"; //显示div的状态为 ceil的样式
 } else {
     div.innerHTML = this.arr[r][c]; //表示有数字时 
     div.className = 'ceil n' + this.arr[r][c]; //就显示ceil  和 n2，n4……的样式
 }

判断游戏结束的状态

isgameover: function() { //遍历行和列
        for (var r = 0; r < 4; r++) {
            for (var c = 0; c < 4; c++) {
                //判断页面含有空格时返回false（游戏继续）
                if (this.arr[r][c] == 0) {
                    return false;
                }
                //在每一行有前后两个相等的，证明还可以相加，返回false。游戏继续
                if (c < 3) {
                    if (this.arr[r][c] == this.arr[r][c + 1])
                        return false;
                }
                //在每一列有前后两个相等的，证明还可以相加，返回false。游戏继续
                if (r < 3) {
                    if (this.arr[r][c] == this.arr[r + 1][c])
                        return false
                }
            }
        }
        return true; //否则 就结束游戏
    }

然后就是写玩游戏时的上、下、左、右移动（只写左移动的，其他的就类似，改变行列，左右即可）
先判断一次移动的前后的变化

if (before != after) {
   //当前后两个数不等时，生成一个随机数

    this.gamerandom();
    if (this.isgameover()) {
        this.status = this.gameover;
    }
    this.arrview();
}

for (var i = c + 1; i < 4; i++) {
            if (this.arr[r][i] != 0) {
                return i;
            }
        }
        return -1;

if (nextc != -1) {
   if (this.arr[r][c] == 0) {
        this.arr[r][c] = this.arr[r][nextc];
        this.arr[r][nextc] = 0;
        c--;
    } else if (this.arr[r][c] == this.arr[r][nextc]) {
        this.arr[r][c] *= 2;
        this.arr[r][nextc] = 0;
        this.score += this.arr[r][c];
    }
	} else {
	    break;
	}
}

最后写键盘的操作（箭头的顺序是左、上、右，下，相应的keyCode码是37、38、39、40）

//每一个相对应的箭头上调用对应的函数
switch (event.keyCode) {
    case 37: //左移动
        Game.moveleft();
        break;
    case 38: //上移动
        Game.moveUp();
        break;
    case 39: //右移动
        Game.moveRight();
        break;
    case 40: //下移动
        Game.moveDown();
        break;
}

一个简洁版的2048游戏就算完成（以上有问题可留言）