做一个cocos2d-html5的虚拟摇杆

做了个简易的joystick 分享下~






先上代码

/**
* Created by L on 14-2-4.
*/
var CH5Joystick = cc.Layer.extend({
_winSize:null,
_pCenter:null,
_dock:null,
_joystick:null,
_delegate:null,
_power:null,
_direction:null,
_angle:null,
_Actived:null,//摇杆被激活 用户正在使用摇杆
_texture_dock_actived:null,
_texture_dock_normal:null,
ctor:function(){
this._super();
},
init:function () {
if (this._super()){

this._Actived=false;
this._winSize=cc.Director.getInstance().getWinSize();

this._pCenter = cc.p(this._winSize.width / 2,this._winSize.height / 2);
this._texture_dock_actived=cc.TextureCache.getInstance().addImage(s_dock_actived);
this._texture_dock_normal=cc.TextureCache.getInstance().addImage(s_dock_normal);

//添加背景
this.addDock();
//添加球
this.addBall();

this.schedule(this.updateJoystick);
}
return true;
},

updateJoystick:function(dt){
if(this._delegate&&this._Actived==true&&this._delegate.armature)
{
var newPos=cc.pAdd(this._delegate.armature.getPosition(),this._direction);
//var winSize=this._delegate._winSize;
var objSize=this._delegate.armature.getContentSize();
//设定屏幕边界
if((newPos.x+(objSize.width/2))>=this._winSize.width||(newPos.x-(objSize.width/2))<=0)
{
return;
}
if((newPos.y+(objSize.height/2))>=this._winSize.height||(newPos.y-(objSize.height/2))<=0)
{
return;
}
this._delegate.armature.setPosition(cc.pAdd(this._delegate.armature.getPosition(),this._direction));
}
},
addDock:function(){
this._dock=cc.Sprite.create(s_dock_normal);
this._dock.setPosition(cc.p(this._dock.getContentSize().width/2+5,this._dock.getContentSize().height/2));
this.addChild(this._dock);
},
addBall:function(){
this._joystick=cc.Sprite.create(s_joystick);
this._joystick.setPosition(cc.p(this._dock.getPosition().x,this._dock.getPosition().y));
this.addChild(this._joystick,1);
},
onEnter:function(){
this._super();
cc.registerTargetedDelegate(0, true, this);
},
onExit:function(){
cc.unregisterTouchDelegate(this);
},
touchInAllowRadius:function(touch){
//判断touch是否在允许范围内
if(cc.rectContainsPoint(this._dock.getBoundingBox(),touch))
{
//如果在范围内 返回true
cc.log("touch在范围内");
return true;
}
else
{
//不在 则返回 false
cc.log("touch不在范围内");
return false;
}
},
resertBallPosition:function(){
this._joystick.setPosition(cc.p(this._dock.getPosition().x,this._dock.getPosition().y));
},
calculate_angle_power_direction:function(pos){
this._angle=180+Math.atan2(this._dock.getPosition().y-this._joystick.getPosition().y,this._dock.getPosition().x-this._joystick.getPosition().x)/(3.14159/180);

//力度计算 返回摇杆目标点至摇杆远点的距离 0-64
this._power=Math.sqrt(Math.pow((this._joystick.getPosition().x-this._dock.getPosition().x),2)+Math.pow((this._joystick.getPosition().y-this._dock.getPosition().y),2));

this._direction=cc.p(Math.cos(this._angle*(3.14159/180)),Math.sin(this._angle*(3.14159/180)));

//  cc.log(pos.x,pos.y);
// cc.log("angle:"+angle,"power:"+power+"direction:"+direction.x +direction.y);
},
onTouchBegan:function (touch, event){
// 点击点的范围判断
var curPoint = touch.getLocation();

this._dock.setTexture(this._texture_dock_actived);
if(this._delegate)
{
this._Actived=true;
this._delegate.actionJoystickStart(this._angle,this._power,this._direction);
}
if(this.touchInAllowRadius(curPoint)==true)
{
this._joystick.setPosition(curPoint);
this.calculate_angle_power_direction(curPoint);
}
return true;
},
onTouchMoved:function (touch, event){
var curPoint = touch.getLocation();
if(this._delegate)
{
this._Actived=true;
this._delegate.actionJoystickStart(this._angle,this._power,this._direction);
}
if(this.touchInAllowRadius(curPoint)==true)
{
this._joystick.setPosition(curPoint);
this.calculate_angle_power_direction(curPoint);
}

},
onTouchEnded:function (touch, event){
this.resertBallPosition();
this._dock.setTexture(this._texture_dock_normal);
if(this._delegate)
{
this._Actived=false;
this._delegate.actionJoystickEnd(this._angle,this._power,this._direction);
}

}

});

CH5Joystick.create= function(){
var joypad = new CH5Joystick();
if (joypad && joypad.init()){
return joypad;
}
return null;
};

使用方法：

this._joystick=CH5Joystick.create();

this._joystick._delegate=this;

this.addChild(this._joystick);

actionJoystickStart:function(angle,power,direction){//your code}

actionJoystickEnd:function(angle,power,direction){//your code}

在CH5Joystick.js的updateJoystick:function(dt){ }中对你的角色进行控制

还不是很完善  慢慢更新