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

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

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

---

一、项目展示

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

二、核心代码

<!--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();
  }
})

最终效果如下：

文末

具体的介绍就到这里了
有兴趣的同学可以继续研究
代码放到下面链接里了

点击下载 小程序