微信小程序-贪吃蛇开发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 贪吃蛇绘制相关推荐

微信小程序开发登录界面mysql_微信小程序欢迎界面开发的实例详解
微信小程序欢迎界面市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面. 下面将会按照以下的顺序介绍: 布局的实现逻辑的实现样式的实现 1.布局的实现整个布局 ...
微信小程序image组件开发程序以及相关图片问题参考资料汇总
微信小程序image组件开发程序以及相关图片问题参考资料汇总,希望对大家小程序开发能有一定的参考和借鉴价值.以下汇总主要涉及到微信小程序image组件有关资源路径.缩放和剪裁模式等进行的探讨,无论是对 ...
angularjs全栈开发知乎_1-4【微信小程序全栈开发课程】原生小程序框架介绍
1.打开小程序目录打开微信开发者工具,我们上一节新建的项目,我圈出来的这个地方就是小程序的目录结构(如果你那里没有显示,可以点击左上方的编辑器来显示) 2.原生小程序框架介绍给大家画了一张图,重要 ...
微信小程序——账号及开发工具
1. 注册微信小程序账号点击我进入微信公众平台进入后点击立即注册注册成功且登录后进入小程序管理后台 2. 安装开发者工具点击进入开发文档进入安装开发工具(稳定版本) 一路默认下一步进行安装 ...
为啥我的页面模板的from提交不了数据_4-9【微信小程序全栈开发课程】意见反馈（四）--提交反馈信息
1.创建后端操作文件先在后端server/controllers文件夹中创建操作文件createopinion.js,用来将从前端页面提交的数据,插入到opinions表中,创建完之后,页面目录如下 ...
上拉加载更多后台数据_6-7【微信小程序全栈开发课程】记录页面（七）--分页加载记录数据...
现在是一次性加载所有的记录数据,数据多的时候,会加载比较慢,所以我们改成分页加载,一次最多加载15条数据每次拉倒底部都会自动加载下一页的数据,知道所有的数据加载完成 1.添加data变量编辑rec ...
eslint不报错 vue_2-2【微信小程序全栈开发课程】index页面搭建--ESlint格式错误
1.修改入口文件也就是src/pages/index/main.js文件 main.js是入口文件,通过main.js来加载index.vue文件.每个页面文件夹中都要有main.js文件 //加载 ...
3.2【微信小程序全栈开发课程】登录功能（一）--实现登录功能
在本地搭建好后端环境之后,我们来实现登录功能 1.安装SDK插件 SDK插件用来获取用户的openId SDK是server端(也就是后端)的插件,帮助我们很容易的获取openId.openId是微信 ...
微信小程序：云开发表情包制作源码
该款小程序是一个表情包制作内容毕竟丰富,另外自定义制作方面也是特别的自由支持自主上传图片,自定义文章,另外拥有多种素材模板以供选择这是一款云开发的小程序,但是安装还是挺简单的搭建教程: 首先使 ...
区分微信小程序版本（开发工具中、开发版、体验版、正式版）的方法？
平凡也就两个字: 懒和惰; 成功也就两个字: 苦和勤; 优秀也就两个字: 你和我. 跟着我从0学习JAVA.spring全家桶和linux运维等知识,带你从懵懂少年走向人生巅峰,迎娶白富美! 关注微信 ...

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

目录

一、初始化蛇

二、初始化食物

三、颜色区分

微信小程序-贪吃蛇开发8 贪吃蛇绘制相关推荐

最新文章

热门文章