微信小程序-贪吃蛇开发8 贪吃蛇绘制

本系列是作者自学实践过程的记录
本文是贪吃蛇和食物绘制
有问题欢迎讨论

一、初始化蛇

这里我们使用二维数组来表示对应的二维坐标，和初始化操场一样，在data中定义Array，snake[]和food[]
然后定义初始化函数并在onLoad函数加载时就调用此函数
根据上一篇文章，我们使用全0表示地图，1表示小蛇的身体，2表示食物，所以我们只需要在蛇身体所在的区域，将ground赋值为1那么便可以在逻辑上生成小蛇了。

  // 初始化蛇,蛇的初始化长度为3，宽度为1
  initSnake:function(len){
    for(var i=0;i<len;i++){
      // 起初蛇只占一行
      this.data.ground[0][i] = 1
      // 保存小蛇的身体坐标
      this.data.ground.push([0,i])
    }
    console.log(this.data.ground)
  },

显示效果：

二、初始化食物

和创建小蛇一样，将地图ground坐标设置成2则表示此地图块为食物，这里我们要用到随机函数Math.random()，这里生成的是0-1之间的数，我们只需要乘以行数和列数就可以生成一个随机的坐标进行使用。
注意点：

1. 随机分布
2. 不能与蛇身体的坐标重合

  // 初始化食物
  initFood:function(){
    // 生成随机的坐标
    var x = Math.floor(Math.random()* this.data.rows)
    var y = Math.floor(Math.random()* this.data.cols)
    var ground = this.data.ground
    var snake = this.data.snake
    ground[x][y] = 2

    for(var i=0;i<snake.length;i++){
      // 取出蛇身体坐标的所有行坐标
      var node = snake[i][1]

      if(x == 0 && y == node){ // 坐标重复
        initFood()
        return
      }
      else{   // 坐标不重复
        // 食物只有一个，所以不用push，使用赋值函数
        this.setData({
          ground: ground,
          food: [x,y]
        })
      }
    }
  },

显示效果：

三、颜色区分

CSS：

/* 
  蛇身体所在块样式
*/
.block_1{
  background: blue;
}
/* 
  食物所在块样式
*/
.block_2{
  background: yellow;
}

WXML：

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

这里要注意使用item进行数据绑定，这里的item结果是ground里的数据，为0、1、2，block_0没有定义所以不生效，block_1定义是蛇的身体所以显示蓝色，block_2定义是食物所以是黄色。
class中写两个值，后一个如果有定义的话则会覆盖第一个渲染的效果。

效果图：