微信小程序2048小游戏（下）

随机生成数据

1. 记录为空的格子
   打开grid.js文件，在prototype下添加如下代码：
   usefulCell() { // 记录为空的格子
   var cells = [];
   for(var i = 0; i <this.size; i++)
   for(var j = 0; j <this.size; j++) {
   if(this.grid[i][j] == “”) { // 若可用则记录坐标
   cells.push({
   x: i,
   y: j
   });
   }
   }
   return cells;
   }
2. 随机选择可填充格子
   打开grid.js文件，在prototype下添加如下代码：
   selectCell() { // 从可填充格子中随机选一个
   var cells = this.usefulCell();
   if(cells.length) {
   return cells[Math.floor(Math.random()*cells.length)];
   }
   }
3. 判断是否还有可用格子
   打开grid.js文件，在prototype下添加如下代码：
   cellEmpty() { // 可用格子是否为空，为空返回true
   return !this.usefulCell().length;
   }
4. 添加初始数据
   4.1 定义随机生成数据变量。
   打开main.js文件，在Main方法下this.init();上面添加如下代码：
   this.startData = 2; // 初始填充2个数据
   4.2 填充随机数据。
   打开main.js文件，在prototype下添加如下代码：
   if(!this.board.cellEmpty()) {
   var value = Math.random() <0.9 ? 2 :4;
   var cell = this.board.selectCell();
   cell.val = value;
   this.update(cell);
   }
   },
   update(cell) { // 更新数据
   this.board.grid[cell.x][cell.y] = cell.vsetDataRandom() { // 随机填充
   for(var i = 0; i <this.startData; i++) {
   this.addRandomData();
   }
   },
   addRandomData() { //填充数据
   al;
   }
   4.3 调用添加数据方法。
   在init方法下添加如下代码：
   this.setDataRandom(); // 随机填充
   this.startData = 1;

滑动合成算法

1. 页面加载完毕随机用数字2或4填充两个单元格。
2. 判断用户滑动方向。
   使用touchStart事件函数获取起始位置touchStartX、touchStartY，touchMove获取终点位置touchEndX、touchEndY。
3. 根据滑动方向（假设向右滑动）移动表格以及相同项合并。
   将2048的棋盘生成44的二维数组list，为空的空格用0表示。
   // 比如棋盘数据如下
   var grid = [
   [2, 2, 0, 0],
   [0, 0, 0, 0],
   [0, 8, 4, 0],
   [0, 0, 0, 0]
   ];
   根据滑动方向生成44二维数组。
   解释：
   ① 向右滑动，那就是需要把左边的相同项合并到右边。如果顺序执行，操作就得从最后一位开始计算，倒退着完成合并。所以我们这边第一步先将数组自右往左重新排列生成一个数组，方便我们顺序执行。这样，我们只需要顺序把相同两项合并到前一项，将后一项置0就可以了。
   var list = [
   [0, 0, 2, 2], // 注意是0022不是2200，因为向右滑动所以从右边push入数组
   [0, 0, 0, 0],
   [0, 4, 8, 0],
   [0, 0, 0, 0]
   ];
   ② 向左滑动
   var list = [
   [2, 2, 0, 0], //因为向左滑动所以从左边push入数组
   [0, 0, 0, 0],
   [0, 8, 4, 0],
   [0, 0, 0, 0]
   ];
   ③ 向下滑动，那就是需要把上边的相同项合并到下边。所以我们这边第一步先将数组自下往上重新排列生成一个数组，方便我们按顺序执行。
   var list = [
   [0, 0, 0, 2], //因为向下滑动所以从下边push入数组
   [0, 8, 0, 2],
   [0, 4, 0, 0],
   [0, 0, 0, 0]
   ];
   ④ 向上滑动
   var list = [
   [2, 0, 0, 0], //因为向下滑动所以从上边push入数组
   [2, 0, 8, 0],
   [0, 0, 4, 0],
   [0, 0, 0, 0]
   ];
   将list的每一个小数组中的数字提到前面，0放到末尾。
   解释：合并相同项的时候，无视中间为0的情况，将有数字的项按顺序挪到数组前面，0放到数组末尾。
   list2 = [
   [2, 2, 0, 0],
   [0, 0, 0, 0],
   [4, 8, 0, 0],
   [0, 0, 0, 0]
   ];
   将相同值的单元格加起来，并将后面的一个单元格值变为0。
   list2 = [
   [4, 0, 0, 0],
   [0, 0, 0, 0],
   [4, 8, 0, 0],
   [0, 0, 0, 0]
   ];
   将合并之后的list再做一次数字靠边操作（将list的每一个小数组中的数字提到前面，0放到末尾）。
   解释：这样就可以把所有的数据都在一个方向上，避免出现合并以后，当中有空格的情况
   将list2回退为list并渲染数据到棋盘视图。
   解释：完成以上所有操作是在list以倒叙形式情况下进行的。所以需要将倒叙的list在以正序的方法排列出来。
   list = [
   [0, 0, 0, 4],
   [0, 0, 0, 0],
   [0, 0, 8, 4],
   [0, 0, 0, 0]
   ];
   一次操作就完成了。
4. 重复步骤1。
5. 判断游戏是否结束。
   判断标准：4*4单元格填满且任意一个单元格上下左右没有相同值的单元格。
6. 根据游戏结果给出相应提示。

任务3.4 游戏实现

1. 获取滑动方向
   打开game.js文件，通过滑动事件监听