這篇文章給大家分享的是有關(guān)如何實現(xiàn)在微信小程序的一個幸運轉(zhuǎn)盤小游戲的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
成都創(chuàng)新互聯(lián)公司服務(wù)項目包括綏棱網(wǎng)站建設(shè)、
綏棱網(wǎng)站制作、綏棱網(wǎng)頁制作以及綏棱網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，
綏棱網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到綏棱省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
具體需要掌握知識點有：
效果圖
小程序
開發(fā)思路
開發(fā)思路有三部分，第一部分是用css繪制轉(zhuǎn)盤背景，第二部分是利用wxs 語法實現(xiàn)響應(yīng)式樣式 ，第三部分是小程序內(nèi)置動畫api實現(xiàn)轉(zhuǎn)盤的轉(zhuǎn)動以及通過js轉(zhuǎn)動隨機性的實現(xiàn)。
本人主要介紹編寫思路，下面就開始我的講解。
如何畫一個三角形
一開始，要寫一個基礎(chǔ)的wxml 框架。
10分
復(fù)制代碼
我畫了兩個大小相同的長方形，長和寬分別是300rpx和600rpx,利用 position css屬性，讓兩個長方形合并在一起。
.turntable {
display: block;
width: 100%;
height: 600rpx;
}
.turntable .wrapper{
position: relative;
transform-origin: center;
width: 100%;
height: 600rpx;
}
合并之后我需要將兩個長方體分離出來，把紅色長方體變成半圓形，藍色長方體順時擺動60度，紅色長方體逆時擺動30度，為什么要這樣轉(zhuǎn)，因為藍色本來隨紅色逆時擺動30度，而一個三角形內(nèi)角為60度，為了形成這60度的夾角，我需要紅色擺完之后再將藍色順時移動60度，也就這樣形成60度夾角。
.turntable .wrapper .item {
position: absolute;
left: 50%;
width: 300rpx;
height: 600rpx;
border-radius: 0px 300rpx 300rpx 0;
transform-origin: left center;
transform: rotate(-30deg);
}
.turntable .wrapper .item .item-inner {
text-align: center;
width: 300rpx;
height: 600rpx;
transform: translateX(-300rpx) rotate(60deg);
transform-origin: right center;
border-radius: 300rpx 0 0 300rpx;
font-size: 32rpx;
}
接下來關(guān)鍵一步在item 處增加 overflow: hidden 屬性，一個三角形就出來了，并調(diào)整字體的位置。
.turntable .wrapper .item {
position: absolute;
left: 50%;
width: 300rpx;
height: 600rpx;
border-radius: 0px 300rpx 300rpx 0;
overflow: hidden;
transform-origin: left center;
}
.turntable .wrapper .item .item-inner text {
display: block;
transform-origin: center;
transform: translateY(100rpx) translateX(43rpx) rotate(-30deg);
}
一個三角形畫出來后，將6個同等大小的三角形并讓他們可以拼接在一起組合成一個圓盤，只需各自修改三角的旋轉(zhuǎn)角度即可。
.turntable .wrapper .item:nth-child(1) {
transform: rotate(-30deg);
}
.turntable .wrapper .item:nth-child(2) {
transform: rotate(-90deg);
}
.turntable .wrapper .item:nth-child(3) {
transform: rotate(-150deg);
}
.turntable .wrapper .item:nth-child(4) {
transform: rotate(-210deg);
}
.turntable .wrapper .item:nth-child(5) {
transform: rotate(-270deg);
}
.turntable .wrapper .item:nth-child(6) {
transform: rotate(-330deg);
}實現(xiàn)響應(yīng)式樣式
為了更好的適應(yīng)不同業(yè)務(wù)需求，我把轉(zhuǎn)盤的樣式變成響應(yīng)式，就可以輕松根據(jù)用外部傳入的 prize 數(shù)據(jù)的長度來設(shè)置不同的樣式，我把這一步的判斷，放在wxs 模塊那里。
var rotate = function (index, length) {
var inital = - (360 / length / 2)
var averageRotate = 360 / length
var deg = inital - averageRotate * index
return 'transform: rotate(' + deg + 'deg);'
}
var inner = function (length) {
var averageRotate = 360 / length
return 'transform: translateX(-300rpx) rotate(' + averageRotate + 'deg);'
}
var text = function (length) {
var distance = 0
var rotate = 0
switch (length) {
case 6:
distance = 43
rotate = 30
break
case 8:
distance = 72
rotate = 30
break
case 4:
distance = -20
rotate = 40
break
}
return 'transform: translateY(100rpx) translateX(' + distance + 'rpx) rotate(-45deg);'
}
module.exports = {
rotate: rotate,
inner: inner,
text: text
}
動畫系統(tǒng)和中獎系統(tǒng)
通過設(shè)定好的中獎率，以一個圓為360度來計算，得出一個0-360的中獎范圍，將隨機得來的數(shù)判斷屬于哪個區(qū)間值，用區(qū)間值 reward 來決定圓盤所需轉(zhuǎn)動的角度。思路大概就是這樣，下面開始講解主要的思路。
圓盤要轉(zhuǎn)的角度 = reward * 一個圓分成6塊的平均值 + 3 * 360復(fù)制代碼
首先要設(shè)置好6個獎品區(qū)的中獎率winning，該中獎率要相加起來為1，把初始化的數(shù)據(jù)組合成一個6位數(shù)的數(shù)組從組件外傳入進組件內(nèi)。
prize: [{
'name': '1分',
'winnning': 0.2,
'count': 1
},
{
'name': '謝謝參與',
'winnning': 0.5,
'count': 0
}, {
'name': '5分',
'winnning': 0.05,
'count': 5
}, {
'name': '7分',
'winnning': 0.05,
'count': 7
},
{
'name': '3分',
'winnning': 0.1,
'count': 3
},
{
'name': '4分',
'winnning': 0.1,
'count': 4
}
],以一個圓為360度來計算出0-360的中獎取值范圍。
getRange(winning) {
let temp = []
winning.forEach((item, index) => {
if (index === 0) {
temp.push(item['winnning'] * 360)
} else {
temp.push(parseInt(temp.slice(-1)) + item['winnning'] * 360)
}
})
return temp
},生成一個隨機整數(shù)，當(dāng)然這數(shù)要在0-360，不然超出360或小于0是沒有意義的。
let random = Math.round(Math.random() * 360)復(fù)制代碼
獲得隨機數(shù)之后，判斷在哪個獎品范圍內(nèi)并把在對應(yīng)的區(qū)間值賦予響應(yīng)數(shù)reward內(nèi)。
for (let i in winningRange) {
let currentwinning = winningRange[i] // 當(dāng)前取值
if (random < currentwinning) {
this.setData({
reward: i
})
break
} else {
if (i == 0) {
continue
}
if (random >= winningRange[i - 1] && random <= currentwinning) {
this.setData({
reward: i
})
break
}
}
}把點擊開始的主函數(shù)放在onPoint()內(nèi)，函數(shù)開始時需判斷是否仍有抽獎機會以及防止在執(zhí)行動畫又點擊函數(shù)執(zhí)行動畫，經(jīng)過計算得來所需的角度通過微信小程序的動畫api animation 來讓圓盤實現(xiàn)轉(zhuǎn)動，動畫結(jié)束后把中獎信息通過自定義組件觸發(fā)事件來讓組件外監(jiān)聽到。
onPoint() {
// 平均值
const averageRotate = 360 / this.properties.prize.length
// 是否有抽獎機會
if (this.properties.chance === 0) {
this.triggerEvent('none')
return
}
// 防止轉(zhuǎn)動時點擊開始按鈕
if (!this.data.onRotation) {
this.setData({
onRotation: true
})
this.getReward()
let deg = this.data.reward * averageRotate + 3 * 360 // 至少3圈以上
this.animate('.wrapper', [{
rotate: 0,
ease: 'ease-in-out'
},
{
rotate: deg,
ease: 'ease-in-out'
}
], 5000, function () {
this.setData({
onRotation: false
})
// 發(fā)送自己的抽獎信息
this.triggerEvent('onResult', this.properties.prize[this.data.reward])
}.bind(this))
}
},最后別忘了在每次執(zhí)行動畫前，都要先執(zhí)行動畫重置動作，才能保證動畫下次轉(zhuǎn)到正確的角度。當(dāng)然我把其放在一個函數(shù)里面，以便組件外也可以使用該函數(shù)。
onClear(){
this.clearAnimation('.wrapper')
}感謝各位的閱讀！關(guān)于“如何實現(xiàn)在微信小程序的一個幸運轉(zhuǎn)盤小游戲”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
文章標題：如何實現(xiàn)在微信小程序的一個幸運轉(zhuǎn)盤小游戲-創(chuàng)新互聯(lián)
當(dāng)前鏈接：
http://weahome.cn/article/ceiocc.html
重慶分公司
重慶分公司
