目录

• 一、项目展示
• 二、核心代码
• 三、效果图

一、项目展示

摇色子是一款简易的游戏类小程序

用户可以投出1-9个色子

二、核心代码

dice.wxml

<!--pages/dice/dice.wxml-->
<import src="dice/dice-template.wxml" />
<view id="header">
  <view class="btn" catchtap="reduceDice">
    <image src="/images/btn-left.png"></image>
  </view>
  <text id="dice-count">{{diceCount}}</text>
  <view class="btn" catchtap="addDice">
    <image src="/images/btn-right.png"></image>
  </view>
</view>
<view id="dice-zone">
  <block wx:for="{{dicesData}}">
    <template is="dice-template" data="{{...item}}" />
  </block>
</view>
<view id="btn-roll-container" catchtap="onRollTap">
  <text id="btn-roll" >摇</text>
</view>

dice.js

// pages/dice/dices.js
Page({
  data: {
    diceCount:,
    dicesData:[]
  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
    this.dotsData = {: "5",
: "28",
: "357",
: "1379",
: "13579",
: "134679"
    };
    this.timer = null;
    this.animation = wx.createAnimation({
      duration:,
      timingFunction: 'linear',
    });
  },
  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    // 页面显示
  },

  // 产生色子点数
  createDotData: function () {
    var num = Math.ceil(Math.random() *);
    var diceData = this.dotsData[num];
    var dotsHidden = {};
    for (var i =; i <= 9; i++) {
      if (diceData.indexOf(i) > -) {
        dotsHidden[i] = "black";
      } else {
        dotsHidden[i] = "white";
      }
    };
    return dotsHidden;
  },

  // 产生色子动画
  createAnim: function (left, top) {
    // 色子移入屏幕
    this.animation.top(top + "rpx").left(left + "rpx").rotate(Math.random()*).step({ duration: 1000, timingFunction: "ease-out" });
    return this.animation.export();
  },

  // 产生色子移动终点位置
  createDicesPos: function () {
    var dicesPos = [];
    // 色子位置判断
    function judgePos(l, t) {
      for (var j =; j < dicesPos.length; j++) {
        // 判断新产生的色子位置是否与之前产生的色子位置重叠
        if ((dicesPos[j].left- < l && l < dicesPos[j].left + 146) && (dicesPos[j].top-146 < t && t < dicesPos[j].top + 146)) {
          return false;
        }
      }
      return true;
    }
    for (var i =; i < this.data.diceCount; i++) {
      var posData = {},
          left =,
          top =;
      do {
        // 随机产生色子的可能位置
        left = Math.round(Math.random() *); // 0~600,根据色子区域和色子的大小计算得出
        top = Math.round(Math.random() *); // 0~550,根据色子区域和色子的大小计算得出
      } while (!judgePos(left,top));
      posData.left = left;
      posData.top = top;
      dicesPos.push(posData);
    }
    return dicesPos;
  },

  // 设置色子数据
  setDicesData: function (diceCount) {
    var dicesData = [];

    // 色子动画数据
    var dicesPos = this.createDicesPos(); // 所有色子的位置数据
    for (var i =; i < diceCount; i++) {
      var diceData = {};
      diceData.anim = this.createAnim(dicesPos[i].left, dicesPos[i].top);
      diceData.dots = this.createDotData();
      dicesData.push(diceData);
    }
    this.setData({ dicesData: dicesData });
    
  },

  // 摇色子
  onRollTap: function () {
    // 设置色子移出动画
    var newData = this.data.dicesData;
    if(newData.length < this.data.diceCount){
      for(var i =; i < this.data.diceCount;i++){
        var data = {};
        newData.push(data);
      }
    }
    for (var i =; i < newData.length; i++) {
      this.animation.left("-rpx").top("123rpx").rotate(-180).step();
      newData[i].anim = this.animation.export();
      this.setData({ dicesData: newData });
    }
    
    var that = this;
    this.timer = setTimeout(function(){
      // 色子改变点数并移入屏幕
      that.setDicesData(that.data.diceCount);
    },)
    
  },

  // 减少色子数量
  reduceDice: function () {
    if (this.data.diceCount >) {
      this.setData({
        diceCount: this.data.diceCount -
      })
    }
  },

  // 增加色子数量
  addDice: function () {
    if (this.data.diceCount <) {
      this.setData({
        diceCount: this.data.diceCount +
      })
    }
  }
})

三、效果图

具体的效果展示如下