写了一个网页2048小游戏，玩了不少时间，感觉效果不错。

我觉得在实现上，有两个关键点：

第一是游戏在数据计算层面的实现，也就是操二维数组，将 2 2 2 2 变成 0 0 4 4。我的实现思路是先变成 0 4 0 4，然后再将非 0 的数字移到一边，变成 0 0 4 4。

第二点是动画数据的收集。如果想让游戏具有可玩性，就必须考虑手感，也就是视觉回馈，那么增加动画是必须的。我觉得实现游戏动画，比单纯在数据层面实现游戏要难不少。

动画采用 jQuery，那么要实现动画，就必须知道所有要移动方块的起始坐标和结束位置。刚开始走了弯路，琢磨着在操作数据的时候顺带收集坐标，但搞了一会发现，似乎过于复杂，感觉不靠谱。然后尝试着采用另一种思路，也就是将移动后的数据与移动前的数据进行比对计算，然后收集坐标。

比如 2 2 2 2 (old) 移动完后是 0 0 4 4 (new)，那么从右至左，开始遍历 0 0 4 4。先拿出 4，然后同样顺序遍历 2 2 2 2，如果 4 是 2 的两倍，则收集 old 和 new 的坐标，标记一下，等收集到另一个 2 的坐标，就开始移动到倒数第二 4（从右至左），接着操作。第二个 4 在遍历时，忽略右边的 2 2，因为第一个4已经收集了。遇到不为 2 倍数的数字，如果 new 和 old 的索引不相同，则同样收集，因为这个时候已经发生移动。

如何判断游戏结束？不能以所有方块是否占满为基准，因为方块占满后玩家仍然可以操作，能合成新的方块。这个时候，用动画数据来判断就很好，因为如果程序收集不到动画数据，则说明整所有方块都不能动。当然，每次移动，只需要收集一个方下的动画，而判断结束，则四个方向都要收集。

游戏地址：2048

在 figma 上配色，颜色选的好纠结。

合成第一个2048。。😂

4096！差一点再加一个2048。。