做一个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){ }中对你的角色进行控制

还不是很完善  慢慢更新