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

还不是很完善  慢慢更新