微信小程序項(xiàng)目實(shí)例——投骰子
項(xiàng)目代碼見(jiàn)文字底部，點(diǎn)贊關(guān)注有驚喜
一、項(xiàng)目展示
投骰子是一款工具類(lèi)小程序
用戶(hù)可以點(diǎn)擊按鈕投出自身的骰子點(diǎn)數(shù)
二、核心代碼
<!--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">點(diǎn)擊重投</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();
}
})
最終效果如下：
文末
具體的介紹就到這里了
有興趣的同學(xué)可以繼續(xù)研究
代碼放到下面鏈接里了
點(diǎn)擊下載 小程序文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-728240.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-728240.html
到了這里，關(guān)于微信小程序項(xiàng)目實(shí)例——投骰子的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
