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

本系列是作者自学实践过程的记录

本文是贪吃蛇和食物绘制

有问题欢迎讨论

目录

一、初始化蛇

这里我们使用二维数组来表示对应的二维坐标，和初始化操场一样，在data中定义Array，snake[]和food[]

然后定义初始化函数并在onLoad函数加载时就调用此函数

根据上一篇文章，我们使用全0表示地图，1表示小蛇的身体，2表示食物，所以我们只需要在蛇身体所在的区域，将ground赋值为1那么便可以在逻辑上生成小蛇了。

// 初始化蛇,蛇的初始化长度为3，宽度为1initSnake: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之间的数，我们只需要乘以行数和列数就可以生成一个随机的坐标进行使用。

注意点：

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

// 初始化食物initFood:function(){// 生成随机的坐标var x = Math.floor(Math.random()* this.data.rows)var y = Math.floor(Math.random()* this.data.cols)var ground = this.data.groundvar snake = this.data.snakeground[x][y] = 2for(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中写两个值，后一个如果有定义的话则会覆盖第一个渲染的效果。

效果图：

如果觉得《微信小程序-贪吃蛇开发8 贪吃蛇绘制》对你有帮助，请点赞、收藏，并留下你的观点哦！