微信小程序-贪吃蛇开发7 游戏设计+条件渲染+列表渲染

本系列是作者自学实践过程的记录
本文是微信小程序的游戏设计思路
有问题欢迎讨论

一、地图设计

在此贪吃蛇游戏中，我们的坐标原点是地图左上角，x轴向右延伸，y轴向下延伸，这与我们数学中常用的笛卡尔坐标系不同，在设计游戏时需要注意。

二、蛇滑动距离计算

在上一篇文章中，我们已经对触摸进行了开始与移动定义，获取蛇滑动距离就是手指移动距离，可以使用tapstart中的初始坐标与tapmove中的终止坐标进行计算，获得移动的距离。

2.1 触摸结束事件

同样，先在标签内添加组件：

• < view class=“control” bindtouchstart=“tapstart”
  bindtouchmove=“tapmove” bindtouchend=“tapend”>

然后在js内定义tapend函数：

  // 手指触摸结束函数
  tapend:function(e){
    // 获取滑动距离，当手指划出屏幕不再赋值
    var distance_x = (this.data.end_x > 0)?  this.data.start_x : 0
    var distance_y = (this.data.end_y > 0)?  this.data.start_y : 0
    
    console.log("触摸结束")
  }

2.2 蛇滑动方向判断

我们已经知道了初始坐标和结束坐标，然后就可以计算出手指滑动后，应该是怎样的滑动。

  // 手指触摸结束函数
  tapend:function(e){
    // 获取滑动距离，当手指划出屏幕不再赋值
    var distance_x = (this.data.end_x > 0)?  this.data.end_x - this.data.start_x : 0
    var distance_y = (this.data.end_y > 0)?  this.data.end_y - this.data.start_y : 0
    
    // 判断滑动方向
    // 向右滑动
    if(Math.abs(distance_x) > Math.abs(distance_y) && distance_x > 0){
      console.log("向右滑动")
    }
    else if(Math.abs(distance_x) > Math.abs(distance_y) && distance_x < 0){
      console.log("向左滑动")
    }
    else if(Math.abs(distance_x) < Math.abs(distance_y) && distance_y < 0){
      console.log("向上滑动")
    }
    else if(Math.abs(distance_x) < Math.abs(distance_y) && distance_y > 0){
      console.log("向下滑动")
    }
    else{
      console.log("点击但未滑动")
    }
    console.log("触摸结束")
  }

效果如图：

三、渲染

3.1 条件渲染

通过给定一定的条件，来判断当前标签是否需要渲染。

格式：

• <view wx : if{{布尔变量}}> view标签< /view>
• <view wx : elif{{布尔变量}}> view标签< /view>
• <view wx : else{{布尔变量}}> view标签< /view>
• 这里条件使用数据绑定将变量值给定，false为不渲染，即在页面不显示，true则进行渲染显示

3.2 列表渲染

列表渲染和条件渲染一样，都是对渲染进行设置，列表渲染就是对一个列表进行渲染，可以更方便显示同系列的标签样式。
格式：

• <view wx : for{{Array变量}}> {{item}}< /view>
• 相当于python中的 for item in array，然后每一个item渲染一次
• 当数组元素是json数据时，使用下面形式：
• <view wx : for{{Array变量}}> {{item.属性}}< /view>
• 同时，我们还可以使用wx:for-item和wx:for-index自定义循环变量名称和下标，防止在多重for循环中变量名称重复，例如二重for循环用 i 和 j 进行循环

四、初始化地图

在这里我们可以先简单化问题，不要考虑画图和界面的问题，仅仅从游戏的角度出发：

1. 用一个二维数组表示游戏界面，然后初始化全部为0，这样就形成一块地图，
2. 然后蛇的身体所在区域为1，食物所在区域为2，这样一个初始化的demo就完整形成
3. 我们只需要在这个基础上，进行碰撞检测，蛇方向移动等判断问题就可以实现这样的游戏了

简单初始化地图：

  /**
   * 页面的初始数据
   */
  data: {
    score: 0, // 当前得分
    maxscore: 100, // 历史最高分
    start_x: 0, // 触摸开始横坐标
    start_y: 0, // 触摸开始纵坐标
    end_x: 0, // 触摸结束横坐标
    end_y:0, // 触摸结束纵坐标

    ground:[], // 存储操场的每个方块
    rows:28,
    cols:22
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 加载完成时调用初始化操场的函数
    this.initGround(this.data.rows,this.data.cols)
  },

  // 初始化操场
  initGround:function(rows,cols){
    for(var i=0;i<rows;i++){
      // 将ground变成二维数组
      var array = []
      this.data.ground.push(array)
      
      for(var j=0;j<cols;j++){
        this.data.ground[i].push(0)
      }
    }
  },

这样，一个简单的操场就形成了。

使用列表渲染初始化地图

  <view class="ground">
    <view class="rows" wx:for="{{ground}}" wx:for-item="cols">
      <view class="blocks" wx:for="{{cols}}"></view>
    </view>
  </view>

这里要用到wx:for-item区分循环变量。