如何實(shí)現(xiàn)在微信小程序的一個(gè)幸運(yùn)轉(zhuǎn)盤(pán)小游戲

這篇文章給大家分享的是有關(guān)如何實(shí)現(xiàn)在微信小程序的一個(gè)幸運(yùn)轉(zhuǎn)盤(pán)小游戲的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

具體需要掌握知識(shí)點(diǎn)有：

• css 的 position、transform、transition、overflow

• javascript基本隨機(jī)算法

• wxs語(yǔ)法

• 小程序內(nèi)置動(dòng)畫(huà)api

效果圖

小程序

開(kāi)發(fā)思路

開(kāi)發(fā)思路有三部分，第一部分是用css繪制轉(zhuǎn)盤(pán)背景，第二部分是利用 wxs 語(yǔ)法實(shí)現(xiàn)響應(yīng)式樣式 ，第三部分是小程序內(nèi)置動(dòng)畫(huà)api實(shí)現(xiàn)轉(zhuǎn)盤(pán)的轉(zhuǎn)動(dòng)以及通過(guò)js轉(zhuǎn)動(dòng)隨機(jī)性的實(shí)現(xiàn)。

本人主要介紹編寫(xiě)思路，下面就開(kāi)始我的講解。

如何畫(huà)一個(gè)三角形

一開(kāi)始，要寫(xiě)一個(gè)基礎(chǔ)的 wxml 框架。

<view class="turntable">
  <view class="wrapper">
    <view class="item" >
	  <view class="item-inner">
		<text>10分</text>
	  </view>
	</view>
  </view>
</view>復(fù)制代碼

我畫(huà)了兩個(gè)大小相同的長(zhǎng)方形，長(zhǎng)和寬分別是300rpx和600rpx,利用 position css屬性，讓兩個(gè)長(zhǎng)方形合并在一起。

.turntable {
  display: block;
  width: 100%;
  height: 600rpx;
}
.turntable .wrapper{
  position: relative;
  transform-origin: center;
  width: 100%;
  height: 600rpx;
}

合并之后我需要將兩個(gè)長(zhǎng)方體分離出來(lái)，把紅色長(zhǎng)方體變成半圓形，藍(lán)色長(zhǎng)方體順時(shí)擺動(dòng)60度，紅色長(zhǎng)方體逆時(shí)擺動(dòng)30度，為什么要這樣轉(zhuǎn)，因?yàn)樗{(lán)色本來(lái)隨紅色逆時(shí)擺動(dòng)30度，而一個(gè)三角形內(nèi)角為60度，為了形成這60度的夾角，我需要紅色擺完之后再將藍(lán)色順時(shí)移動(dòng)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;
}

接下來(lái)關(guān)鍵一步在 item 處增加  overflow: hidden 屬性，一個(gè)三角形就出來(lái)了，并調(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);
}

一個(gè)三角形畫(huà)出來(lái)后，將6個(gè)同等大小的三角形并讓他們可以拼接在一起組合成一個(gè)圓盤(pán)，只需各自修改三角的旋轉(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);
}

實(shí)現(xiàn)響應(yīng)式樣式

為了更好的適應(yīng)不同業(yè)務(wù)需求，我把轉(zhuǎn)盤(pán)的樣式變成響應(yīng)式，就可以輕松根據(jù)用外部傳入的 prize 數(shù)據(jù)的長(zhǎng)度來(lái)設(shè)置不同的樣式，我把這一步的判斷，放在 wxs 模塊那里。

<wxs module="computed">
	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
	}
</wxs>

動(dòng)畫(huà)系統(tǒng)和中獎(jiǎng)系統(tǒng)

通過(guò)設(shè)定好的中獎(jiǎng)率，以一個(gè)圓為360度來(lái)計(jì)算，得出一個(gè)0-360的中獎(jiǎng)范圍，將隨機(jī)得來(lái)的數(shù)判斷屬于哪個(gè)區(qū)間值，用區(qū)間值 reward 來(lái)決定圓盤(pán)所需轉(zhuǎn)動(dòng)的角度。思路大概就是這樣，下面開(kāi)始講解主要的思路。

圓盤(pán)要轉(zhuǎn)的角度 = reward * 一個(gè)圓分成6塊的平均值  + 3 * 360復(fù)制代碼

首先要設(shè)置好6個(gè)獎(jiǎng)品區(qū)的中獎(jiǎng)率winning，該中獎(jiǎng)率要相加起來(lái)為1，把初始化的數(shù)據(jù)組合成一個(gè)6位數(shù)的數(shù)組從組件外傳入進(jìn)組件內(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
      }
    ],

以一個(gè)圓為360度來(lái)計(jì)算出0-360的中獎(jiǎng)取值范圍。

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
    },

生成一個(gè)隨機(jī)整數(shù)，當(dāng)然這數(shù)要在0-360，不然超出360或小于0是沒(méi)有意義的。

let random = Math.round(Math.random() * 360)復(fù)制代碼

獲得隨機(jī)數(shù)之后，判斷在哪個(gè)獎(jiǎng)品范圍內(nèi)并把在對(duì)應(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
       }
     }
}

把點(diǎn)擊開(kāi)始的主函數(shù)放在onPoint()內(nèi)，函數(shù)開(kāi)始時(shí)需判斷是否仍有抽獎(jiǎng)機(jī)會(huì)以及防止在執(zhí)行動(dòng)畫(huà)又點(diǎn)擊函數(shù)執(zhí)行動(dòng)畫(huà)，經(jīng)過(guò)計(jì)算得來(lái)所需的角度通過(guò)微信小程序的動(dòng)畫(huà)api animation 來(lái)讓圓盤(pán)實(shí)現(xiàn)轉(zhuǎn)動(dòng)，動(dòng)畫(huà)結(jié)束后把中獎(jiǎng)信息通過(guò)自定義組件觸發(fā)事件來(lái)讓組件外監(jiān)聽(tīng)到。

onPoint() {
      // 平均值
      const averageRotate = 360 / this.properties.prize.length
      // 是否有抽獎(jiǎng)機(jī)會(huì)
      if (this.properties.chance === 0) {
        this.triggerEvent('none')
        return
      }
      // 防止轉(zhuǎn)動(dòng)時(shí)點(diǎn)擊開(kāi)始按鈕
      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ā)送自己的抽獎(jiǎng)信息
          this.triggerEvent('onResult', this.properties.prize[this.data.reward])
        }.bind(this))
      }
    },

最后別忘了在每次執(zhí)行動(dòng)畫(huà)前，都要先執(zhí)行動(dòng)畫(huà)重置動(dòng)作，才能保證動(dòng)畫(huà)下次轉(zhuǎn)到正確的角度。當(dāng)然我把其放在一個(gè)函數(shù)里面，以便組件外也可以使用該函數(shù)。

onClear(){
   this.clearAnimation('.wrapper')
}

感謝各位的閱讀！關(guān)于“如何實(shí)現(xiàn)在微信小程序的一個(gè)幸運(yùn)轉(zhuǎn)盤(pán)小游戲”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！