羊了个羊微信小程序实现

小程序版

一、效果图

 第二关图标排列，槽位扩展，效果如下： 

二、实现手段:使用小程序自带组件

        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.imgsrcs