微信小程序 - 仿南湖微科普小程序游戏环节

最近看到南湖微科普小程序游戏环节感觉还可以，于是模仿了下

<view class='current' animation="{{animation}}">
  {{current.title}}
</view>
<view class='caozuo'>
  <text bindtap="type1btn">可回收</text>
  <text bindtap="type2btn">有害垃圾</text>
  <text bindtap="type3btn">其他</text>
</view>
<view class='score'>分数：{{score}}</view>

　　

.current{ width:100px;height:100px;border-radius:5px; margin:20px auto;text-align:center;line-height:100px;color:#fff;background:red; }
.caozuo{display: flex;justify-content:space-between;margin-top: 15px;font-size:14px;text-align: center;}
.caozuo text{text-align: center;flex:1;}
.score{ text-align:center;margin-top:20px;font-size:14px;color:red; }

　　

Page({
  data: {
    current:{},
    score:0,
    arr:[
      {
        id:1,
        title:"手机壳",
        type:"1"
      },
      {
        id:2,
        title: "枯枝",
        type: "3"
      },
      {
        id:3,
        title: "纸盒",
        type: "1"
      },
      {
        id:4,
        title: "涂改溢瓶",
        type:"2"
      },
      {
        id:5,
        title: "药水瓶",
        type: "2"
      },
      {
        id: 6,
        title: "电视机",
        type: "1"
      },
      {
        id: 7,
        title: "菜叶",
        type: "3"
      }
    ]
  },
  onReady: function () {
    this.animation = wx.createAnimation()
  },
  onLoad: function (options) {
    // type:1可回收  2 有害垃圾  3 其他垃圾
    // 不能重复
    var that = this;
    that.newdata();
  },

  newdata(current,arr){
    //每次操作过后数组更新一次
    var that = this;
    var current = that.data.current;
    var arr = that.data.arr;

    var currentIndex = Math.floor(Math.random() * arr.length)
    var newarr = arr.filter(function (currentvalue, index, array) {
      return index != currentIndex
    })

    if (arr.length === 0 ){
      wx.showToast({
        title: '恭喜闯关成功',
      })
      return
    }

    that.setData({
      current: arr[currentIndex],
      arr: newarr
    })

  },
  scoreAdd() {
    //分数添加
    var that = this;
    var score = that.data.score;
    score += 2;
    that.setData({
      score: score
    })
  },
  scoreReduce() {
    //分数减去
    var that = this;
    var score = that.data.score;
    score -= 1;
    that.setData({
      score: score
    })
  },
  select(type){
    //区分点击按钮
    var that = this;
    var current = that.data.current;
    var arr = that.data.arr;
    if (arr.length != 0) {
      if (current.type === type) {
        that.scale()
        that.newdata();
        that.scoreAdd()
      } else {
        that._toast()
        that.scoreReduce()
      }
    } else {
      wx.showToast({
        title: '恭喜闯关成功',
      })
    }
  },
  type1btn() {
    //可回收
    var that = this;
    that.select("1")
  },
  type2btn() {
    //有害垃圾
    var that = this;
    that.select("2")
  },
  type3btn() {
    //其他垃圾
    var that = this;
    that.select("3")
  },
  _toast(){
    wx.showToast({
      title: '不对应',
    })
  },
  scale: function () {
    this.animation.scale(0.6).step()
    this.animation.scale(1).step()
    this.setData({ animation: this.animation.export() })
  }
})