网页版2048

网页版的2048非常简单，用到的技术只要略懂html，css，javascript和jquery就ok了。

游戏源码，我的github链接：https://github.com/wozien/demo/tree/master/2048

在线演示:wozien.com/2048

游戏界面：

游戏细节问题：
游戏主要操作是在一个二位数组上board[][]，每个元素表示当前方格的数字，0表示没有数字。每次移动后，根据数组重新渲染格子。

1.格子是怎么移动的？
首先格子分为两种，一种是不会动的背景单元格grid-cell，一种是会动的数字格子number-cell。格子是相对于格子面板进行绝对定位的，根据格子的坐标x和y就能求出对应的top和left值。移动利用jquery中animate函数。

2.键盘的方向键的监听器？

$(document).keydown(function(event){

    switch(event.keyCode) {
        case 37: // left
            event.preventDefault();
            if(moveLeft()){
                setTimeout("generateOneNumber()",210);
                setTimeout("isgameover()",300);
            }
            break;
        case 38: //up

            break;
        case 39: //right

            break;
        case 40: // down

            break;
        default:
            break;
    }
});

3.如何判断是否能某个方向移动？
以向左移动为例子，我们只看第2列到第4列。如果满足下面2个条件之一，就能向左移动。
左边的数字为0，或者左边的数字和自己相等。
下面代码为判断能否向左移动，其他方向类似：

function canMoveLeft(board){

    for(var i=0;i<4;i++){
        for(var j=1;j<4;j++){
            if(board[i][j]!=0){
                if(board[i][j-1]==0 || board[i][j-1]==board[i][j])
                    return true;
            }
        }
    }
    return false;
}

4.向一个方向移动具体怎么操作数组board
我们仍然以向左移动为例子，同样我们只看第2列到第4列。对于在这个范围的一个可移动的格子，也就是数字不为0的格子，遍历它左边的所有格子。对于左边的格子，如果存在下面2种可以移动的情况：

• 落脚点为空(我们称移动后的位置为落脚点)，而且和待移动的位置之间没有其他数字格子。
• 落脚点的数字与移动数字相同，而且和待移动的位置之间没有其他数字格子。

5.移动端的触摸滑动怎么实现？
移动的触摸时间利用touchstart和touchend事件，分别表示触摸滑动的开始和触摸滑动的结束。因为对应的事件对象中有touches属性，表示开始触摸点的点坐标数组，由于存在多点触摸，所以取数组一个元素，具体如下：

gridobj.addEventListener('touchstart',function(event){
    startx = event.touches[0].pageX;
    starty = event.touches[0].pageY;
});

结束触摸点的坐标：

gridobj.addEventListener('touchend',function(event){
    endx = event.changedTouches[0].pageX;
    endy = event.changedTouches[0].pageY;
}

所以利用endy-starty的绝对值和startx-endx的绝对值之间的大小关系可以判断当前的滑动是在x方向还是在y方向移动，通过endy-starty的正负判断在y方向的正负滑动，记住移动端的y正方向是向下的。同样x方向也是这样判断。判断出方向后操作对应pc端的回调函数就行了。

其实搞懂其中一个方向的移动操作和细节处理,其他方向都能很快写出来的.祝各位成功写出自己的2048!!