許多小游戲里面都有涉及到抽獎環(huán)節(jié)稳捆,所以就可能會用到抽獎轉(zhuǎn)盤的制作疏旨,今天分享一個自己左轉(zhuǎn)盤的小小過程孵班。
1扰柠、準(zhǔn)備材料過程不多說眶熬,拼完界面之后大概是這樣的:
2即舌、給界面綁定腳本蛉腌,在腳本的properties里面綁定轉(zhuǎn)盤節(jié)點榜掌,不多說:
3溶锭、一般的宝恶,抽獎其實都是前面先假裝轉(zhuǎn)幾圈,之后轉(zhuǎn)向抽獎的結(jié)果就可以趴捅。我們先設(shè)定好各種所需要的變量:
onLoad () {
? ? //獎品份數(shù)
? ? this.awardNum = 8;
? ? //轉(zhuǎn)動時間
? ? this.rotateTime = 6.0;
},
4垫毙、寫轉(zhuǎn)盤轉(zhuǎn)動的方法以及一個小小的效果(轉(zhuǎn)到某區(qū)域,暫停之后轉(zhuǎn)到該區(qū)域中央)拱绑,不要忘記觸發(fā)抽獎和重置的條件(我這里是按鈕综芥,重置也可以設(shè)置為抽完獎自動重置等):
/**
* 點擊抽獎? ?
*/? ?
onClickLucky() {? ?
? ? console.log("開始抽獎");? ?
? ? let random_jiangli = Math.floor(Math.random() * this.awardNum);
? ? console.log("random_jiangli ======>抽獎結(jié)果= ", random_jiangli);
? ? //多旋轉(zhuǎn)的角度(最后轉(zhuǎn)向抽獎結(jié)果所需要轉(zhuǎn)的角度)
? ? this.rotationNum = (random_jiangli) * (360 / this.awardNum) + (360 / this.awardNum / 2);
? ? //左右的效果角度(效果所需)
? ? this.random_1 = Math.floor(Math.random() * 45 - 22.5);
? ? let action = this.DialRotateAction();
? ? this.ZhuanPan.runAction(action);
? ? let self = this;
? ? this.scheduleOnce(function () {
? ? ? ? let action_1 = cc.sequence(
? ? ? ? ? ? cc.rotateBy(0.2, 0),? ? //停頓一下
? ? ? ? ? ? cc.rotateBy(1.5, self.random_1 / -1),? //轉(zhuǎn)到指向的分區(qū)的中央
? ? ? ? ).easing(cc.easeInOut(3.0));
? ? ? ? self.ZhuanPan.runAction(action_1);
? ? }, this.rotateTime);
},
/**?
* 轉(zhuǎn)盤轉(zhuǎn)動方法
*/
DialRotateAction: function () {
? ? let self = this;? ? ?
? ? //假定的假裝轉(zhuǎn)的圈數(shù)?
? ? let circleNum = 5;? ?
? ? let action = cc.rotateBy(
? ? ? ? ? ? ? ? ? ? self.rotateTime, 360 * circleNum + self.rotationNum + self.random_1
? ? ? ? ? ? ? ? ? ? ).easing(cc.easeInOut(3.0));? ? ?
? ? return action;?
},
/**
* 重置轉(zhuǎn)盤方法
*/
onClickRefreshRotate(){
? ? console.log("重置轉(zhuǎn)盤");
? ? if(this.ZhuanPan.rotation != 0){? ?
? ? ? ? this.ZhuanPan.rotation = 0;?
? ? }?
},
5、效果如下(簡易gif圖猎拨,有些卡):
下一篇為大家展示跑馬燈式的抽獎膀藐。
如有問題,歡迎指正红省,共同學(xué)習(xí)额各,謝謝。