微信小程序项目实例——投骰子-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序项目实例——投骰子。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信小程序项目实例——投骰子

项目代码见文字底部，点赞关注有惊喜

一、项目展示

投骰子是一款工具类小程序
用户可以点击按钮投出自身的骰子点数

roll点小程序,微信小程序项目实例,微信小程序,小程序,android,前端,ios

二、核心代码

<!--dice.wxml-->
<view class="container dice-list">
  <span animation="{{diceAnimation}}" class="dice dice-{{dice}}" title="Dice 1"></span>
</view>

<view class="foot">
  <button class="btn" bindtap="flash">点击重投</button>
</view>

<!--dice.js-->
var util = require('../../utils/util.js')
Page({
  data: {
    dice: 1,
    diceAnimation: {}
  },
  onLoad: function () {
    this.diceRollTimer = setTimeout(this.rollDice, this.rollDelay);
    this.diceRollCount = 10;
    this.diceRollTimer = null;
    this.rollDelay = 200;
    this.nums = [];
    var animation = wx.createAnimation({
      transformOrigin: "50% 50%",
      timingFunction: "ease-in-out"
    });
    animation.opacity(0.1).rotate(1).scale(0.1, 0.1).step({
      duration: 10
    });
    this.setData({
      diceAnimation: animation.export()
    });
    setTimeout(function () {
      animation.opacity(1).rotate(90 * 15).scale(1, 1).step({
        duration: 2500
      });
      this.setData({
        diceAnimation: animation.export()
      });
    }.bind(this), 100);
  },
  rollDice: function () {
    if (this.diceRollCount-- < 0) {
      clearTimeout(this.diceRollTimer);
      console.log(this.nums);
    } else {
      this.nums[this.data.dice] = this.data.dice;
      this.setData(
        { 'dice': Math.ceil((this.data.dice + Math.ceil(Math.random() * 5)) % 6) + 1 });
      setTimeout(this.rollDice, this.rollDelay);
    }
  },

  flash(){
    this.onLoad();
  }
})

最终效果如下：

roll点小程序,微信小程序项目实例,微信小程序,小程序,android,前端,ios