2048网页版小游戏

主要实现的功能：

1.初始化的时候随机生成两个为2的格子。注意两个格子别生成到一个格子上去了。     

2.方块的移动和合并。方块移动的动画。 根据移动后的值。改变方块的颜色。注意操作的顺序。   颜色主要是添加和移除 2到2048所代表的颜色的class。 位置也添加和移除对应位置所代表的类。  动画则是用css3的过渡。0.2s。

3.判断某个方向上不能移动，不能出现新的格子。

4.随机在空白处出现下一块。 

5.判输。 需要满足条件 1.没有空格子。2.横方向上没有相邻且相等的方块。3.纵方向上没有相邻且相等的方块。  任何一项不满足都没输。 

6.判赢。 某个格子的值达到2048。

7.分数。任意两个格子合并的时候，分数增加合并之后方块的值。

8.包裹div的大小任意设置，方块中的数字始终垂直居中。

9.核心算法是判断每个格子移动到什么位置。应不应该合并。

   我这里使用的方法是，循环到每一个格子。  然后这个格子的值，依次去跟它移动方向上的下一位做比较。下一位是空，可以继续跟下一位比较，直到比较到下一位不是空且跟当前比较值相等或不相等或遇到比较的边界（之前有合并的值对应的格子或移动方向上最后一格），判断是移动并合并还是只移动，最终的移动方位。 

如果触发向左移动

　　遍历所有非空元素

　　　　如果当前元素在第一个位置

          不动

　　　　如果当前元素不在第一个位置

　　　　　　如果当前元素左侧是空元素   

              向左移动

　　　　　　如果当前元素左侧是非空元素   

　　　　　　　　如果左侧元素和当前元素的内容不同   

                  不动

　　　　　　　　如果左侧元素和当前元素的内容相同   

                  向左合并

如果触发向右移动

　　遍历所有非空元素

　　　　如果当前元素在最后一个位置   

          不动

　　　　如果当前元素不在最后一个位置

　　　　　　如果当前元素右侧是空元素 

              向右移动

　　　　　　如果当前元素右侧是非空元素   

　　　　　　　　如果右侧元素和当前元素的内容不同   

                  不动

　　　　　　　　如果右侧元素和当前元素的内容相同   

                  向右合并

获取所有元素

获取所有非空元素

如果所有元素的个数 == 所有非空元素的个数

循环遍历所有非空元素

上面元素存在 && (当前元素的内容 == 上面元素的内容)  return

下面元素存在 && (当前元素的内容 == 下面元素的内容)  return

左边元素存在 && (当前元素的内容 == 左边元素的内容)  return

右边元素存在 && (当前元素的内容 == 右边元素的内容)  return 　 

以上条件都不满足，Game Over!

我的github地址 有源代码