小程序版
一、效果图
第二关图标排列,槽位扩展,效果如下:
二、实现手段:使用小程序自带组件
1. 使用系统组件:
view :控制布局,图标位置
image :显示一个图片
animation: 控制一个图片移动的动画
2.这里不未使用canvas进行绘图
三、数据结构
1.图片的参数:x,y坐标,图片路径,是否隐藏等等。
定义两个列表,长度相同,元素一一对象,分别记录图片的地址imgsrcs[i]和图片坐标
grid[i];并在关卡初始化时根据一定的规则生成每一个元素。
// 关键代码
Page({ // 兔兔成语接龙
data: {
imgsrcs: [], // wxml绑定显示的图片路径:
grid: [ // 图片坐标数组
{x:0,y:0,hide:false}
],
},
...
// 第一关 分5组, 每组3个
initPicAndGrid_Lv1() {
let windowWidth = wx.getSystemInfoSync().windowWidth;
this.data.