微信小程序-贪吃蛇开发11 贪吃蛇的移动

本系列是作者自学实践过程的记录
本文是关于贪吃蛇的移动
有问题欢迎讨论

一、整体设计

在触摸结束的函数中，我们通过滑动距离判断出当前手指滑动的方向，我们需要用这个方向来改变小蛇。
这里使用模块化设计，把各个方法分别设计然后进行统一调用。
如图所示：

接着我们只需要分块设计上下左右的移动函数即可。

二、部分设计

这里我们以向左的移动为例。
假设蛇身体为len，向左移动时，除了蛇头以外的len-1个身体不断向前移动，即类似于插入排序中，后面的元素一直后移。
蛇头单独重新赋值，向左移动时，只需要使y坐标减一，x坐标不变即可。
代码如下：

  // 向左移动
  changeLeft:function(){
    // 初始化变量
    var snake = this.data.snake;
    var len = snake.length;
    var snakeHEAD = snake[len-1];
    var snakeTAIL = snake[0];
    var ground = this.data.ground;

    // 碰撞到食物
    ground[snakeTAIL[0]][snakeTAIL[1]] = 0;
    // 更新身体
    for(var i=0;i<len-1;i++)
      snake[i] = snake[i+1]

    // 更新蛇头坐标，这里因为向左，所以蛇头x坐标不变，y坐标减一向左移动
    var x = snake[len-1][0]
    var y = snake[len-1][1] - 1
    snake[len-1] = [x,y]

    // 将蛇尾添加到蛇身体中
    this.check_Game(snakeTAIL)

    // 地图上蛇身所在区域重新绘制
    for(var i=1;i<len;i++)
      ground[snake[i][0]][snake[i][1]] = 1
    
    this.setData({
      ground:ground,
      snake:snake
    })

    return true;
  },

三、效果展示