基于vue编写的2048小游戏

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

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

怎么破解技术难点
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倍然后又缩小回原始尺寸，这样给用户的感觉就是进行了合并，代码如下图所示。

3.3数字块移动，我们给数字块设置了如下数据结构{x:x, y:y, num:num, id:id, color:color}，其实数字块的位置就是x，y的值，数字块的移动就相当于改变其x，y的值，我就拿一个方向作为例子，其他方向类似，我们按下上箭头，那么处理逻辑是先从y=0这排开始，也就是y=1这排有能够和y=0这排合并的合并，能下移的下移，然后是y=2，y=3，可是我们在新增数字块的时候x，y值是随机一个不存在的数字块坐标，这也就意味着数字中的不是有序的，我们需要首先根据y来进行排序，用排完序的和y-1排的进行比较处理，也就是说为了避免数组越界，我们排序的时候要去掉y=0这一层的，当检测到y-1为空时我们让当前数字块前进一步，并且继续和下一排做比较，如果检测到y-1不为空时，就看看他们的数值是否相同，相同则让下一排成2，本身数字块消失（这里面有个小坑，有的数字块可能面临两次操作，所以我额外记录了一个属性，用来判断当前数字块是否已经被处理过），涉及到的代码逻辑如下。


3.4判断游戏是否成功，这个比较好实现，在每次移动的时候都去判断一次是不是有数字块的值达到了8192。
3.5判读游戏是否失败，这个也是循环整个数组，首先判读数组是不是已经有16块了，其次判读还存不存在相邻的两个数字块的数字相同，如果满足16块且没有相同数字块相邻则判断游戏失败，关键代码如下。

下篇博客需要完善的事项有
4.1游戏数字块的移动采用矩阵方式
4.2背景音乐的添加
4.3游戏算法的优化

项目源码