基于vue编写的2048小游戏

1. 具体干了件什么事情
   要实现如图所示的小游戏。
   规则是有16个格子，初始时会有两个格子上安放了两个数字，每次可以选择上下左右其中一个方向去滑动，每滑动一次，所有的数字方块都会往滑动的方向靠拢外，系统也会在空白的地方随即出现一个数字方块，相同数字的方块在靠拢，相撞时会相加。不断的叠加最终拼凑出8192这个数字就算成功。如果没有了空白的地方，也没有了相同的数字可以靠拢，相撞就游戏失败。

2. 技术难点。
   2.1如图的展示，需要做到有滑动效果，相消的效果，
   2.2移动原理，还有判断数组相消，游戏结束，游戏胜利

3. 怎么破解技术难点
   3.1滑动效果可是使用css的样式transform: translate(x,y);这个样式具有移动效果，我们可以把所以的数字块都定位到数字盘的最左上角，为了方便，我们把这个点称之为坐标原点（0，0），那么图中数字块64所在的坐标就为（3，3），由于我们使用的数字盘，和数字块都是矩形规则的，这里我先用的是写死的宽高从（0，0）–>(3，3)体现到样式上的距离就是（3*120px，3*120px）,我定位这个数字块用的是transform: translate(3*120px，3*120px);由于我使用的是vue所以就更方便了，我只要准备好数据，这些重复性的工作就交个vue了，我使用了一个数组来装这个16个数字块，使用<span>标签来包裹每一个数字块，通过遍历数组来完成定位代码如下。
   
   3.2数字相消的效果可以使用es6的animate函数，我们其实只是做了个数字块在两毫秒内放大1.3倍然后又缩小回原始尺