Cocos Creator 组件式开发,刚开始学习,使用js语言,写个轮盘抽奖测试。
github链接
查看效果
cc.Class({
extends: cc.Component,
properties: {
spinBtn: {
default: null, // The default value will be used only when the component attachin // to a node for the first time
type:cc.Button, // optional, default is typeof default
visible: true, // optional, default is true
displayName: 'SpinBtn', // optional
},
wheelSp:{
default:null,
type:cc.Sprite
},
maxSpeed:{
default:3,
type:cc.Float,
max:10,
min:2,
},
duration:{
default:3,
type:cc.Float,
max:5,
min:1,
tooltip:"减速前旋转时间"
},
acc:{
default:0.1,
type:cc.Float,
max:0.2,
min:0.01,
tooltip:"加速度"
},
targetID:{
default:0,
type:cc.Integer,
max:17,
min:0,
tooltip:"指定结束时的齿轮"
},
springback:{
default:true,
tooltip:"旋转结束是否回弹"
},
effectAudio:{
default:null,
url:cc.AudioClip
}
},
// use this for initialization
onLoad: function () {
cc.log("....onload");
this.wheelState = 0;
this.curSpeed = 0;
this.spinTime = 0; //减速前旋转时间
this.gearNum = 18;
this.defaultAngle = 360/18/2; //修正默认角度
this.gearAngle = 360/this.gearNum; //每个齿轮的角度
this.wheelSp.node.rotation = this.defaultAngle;
this.finalAngle = 0; //最终结果指定的角度
this.effectFlag = 0; //用于音效播放
if(!cc.sys.isBrowser)
{
cc.loader.loadRes('Sound/game_turntable', function(err,res){if(err){cc.log('...err:'+err);}});
}
this.spinBtn.node.on(cc.Node.EventType.TOUCH_END,function(event)
{
cc.log("begin spin");
if(this.wheelState !== 0)
{
return;
}
this.decAngle = 2*360; // 减速旋转两圈
this.wheelState = 1;
this.curSpeed = 0;
this.spinTime = 0;
// var act = cc.rotateTo(10, 360*10);
// this.wheelSp.node.runAction(act.easing(cc.easeSineInOut()));
}.bind(this));
},
start:function()
{
// cc.log('....start');
},
caculateFinalAngle:function(targetID)
{
this.finalAngle = 360-this.targetID*this.gearAngle + this.defaultAngle;
if(this.springback)
{
this.finalAngle += this.gearAngle;
}
},
editBoxDidBegin:function(edit)
{
},
editBoxDidChanged:function(text)
{
},
editBoxDidEndEditing:function(edit)
{
var res = parseInt(edit.string);
if(isNaN(res))
{
if(cc.sys.isBrowser)
{
alert('please input a number!');
}else cc.log(".....invalid input");
this.targetID = Math.round(Math.random()*(this.gearNum-1));
return;
}
this.targetID = res;
},
// called every frame, uncomment this function to activate update callback
update: function (dt) {
if(this.wheelState === 0)
{
return;
}
// cc.log('......update');
// cc.log('......state=%d',this.wheelState);
this.effectFlag += this.curSpeed;
if(!cc.sys.isBrowser && this.effectFlag >= this.gearAngle)
{
if(this.audioID)
{
// cc.audioEngine.pauseEffect(this.audioID);
}
// this.audioID = cc.audioEngine.playEffect(this.effectAudio,false);
this.audioID = cc.audioEngine.playEffect(cc.url.raw('resources/Sound/game_turntable.mp3'));
this.effectFlag = 0;
}
if(this.wheelState == 1)
{
// cc.log('....加速,speed:' + this.curSpeed);
this.spinTime += dt;
this.wheelSp.node.rotation = this.wheelSp.node.rotation + this.curSpeed;
if(this.curSpeed <= this.maxSpeed)
{
this.curSpeed += this.acc;
}
else
{
if(this.spinTime<this.duration)
{
return;
}
// cc.log('....开始减速');
//设置目标角度
this.finalAngle = 360-this.targetID*this.gearAngle + this.defaultAngle;
this.maxSpeed = this.curSpeed;
if(this.springback)
{
this.finalAngle += this.gearAngle;
}
this.wheelSp.node.rotation = this.finalAngle;
this.wheelState = 2;
}
}
else if(this.wheelState == 2)
{
// cc.log('......减速');
var curRo = this.wheelSp.node.rotation; //应该等于finalAngle
var hadRo = curRo - this.finalAngle;
this.curSpeed = this.maxSpeed*((this.decAngle-hadRo)/this.decAngle) + 0.2;
this.wheelSp.node.rotation = curRo + this.curSpeed;
if((this.decAngle-hadRo)<=0)
{
// cc.log('....停止');
this.wheelState = 0;
this.wheelSp.node.rotation = this.finalAngle;
if(this.springback)
{
//倒转一个齿轮
var act = new cc.rotateBy(0.5, -this.gearAngle);
var seq = cc.sequence(new cc.delayTime(0.3),act,cc.callFunc(this.showRes, this));
this.wheelSp.node.runAction(seq);
}
else
{
this.showRes();
}
}
}
},
showRes:function()
{
var Config = require("Config");
if(cc.sys.isBrowser)
{
alert('You have got ' + Config.gearInfo[this.targetID]);
}
else cc.log(Config.gearInfo[this.targetID]);
}
});