日期:2014-05-16 浏览次数:21274 次
一、写在前面的话
最近在学习cocos2d-html5方面的知识,一直想从事游戏方面的工作,自己也找了好多资料。网上关于cocos2d-html5的教程真的不多,也只有自己摸索,慢慢看示例代码。由于本人没有mac,所以呢就用不了cocosbuild来制作动画相关的啦,不过今天又发现一个东西就是可以采用虚拟机来转mac系统,呵呵,明天继续试试。如果你也在学习或从事cocos2d-html5方面东西,希望大家都相互交流,共同进步啊。
二、橡皮筋制作
这部分的主要内容是制作橡皮筋,石头放在弹弓上,用手拉弹弓,让石头弹出去。
需要准备的资源有弹弓、石头、背景
最终效果图:
      
三、详细分解
1、制作背景(制作背景的代码过于简单,没什么多说的就直接上代码了)
//背景
var BackSprite = cc.Sprite.extend({
    ctor:function(){
        this._super();
        this.initWithFile(s_bg);
        this.setAnchorPoint(cc.p(0,0));
        this.setPosition(cc.p(0,0));
    }
});2、制作石头,这步比较复杂也是核心的一部分
1)首先必须把石头加载到场景中,位置设置在弹弓之间
             
2)事件的捕捉,当触发Touch事件的时候,判断当前位置是否在石头的矩形范围之类,当事件移动的时候,获取当前事件的
位置,并且设置石头的位置,此时有个核心的东西就是用画笔画出橡皮筋,从石头到弹弓两端点之间。
            
3)当事件END的时候,石头必须弹出去,给石头一个方向向量,计算石头当前位置和弹弓顶端中间点的角度。从而让石头射出去。
            
源代码:
//石头
var StoneSprite = cc.Sprite.extend({
    mainLayer:null,
    _isPullEnd:false,
    _isPulling:false,
    _velocity:null,
    _stonePoint:null,
    ctor:function(){
        this._super();
        //初始化
        this.initWithFile(s_stone);
        //设置事件
        cc.Director.getInstance().getTouchDispatcher().addTargetedDelegate(this,0,true);
        //初始向量
        this._velocity = cc.p(800,800);
        this.scheduleUpdate();
    },
    onTouchBegan:function(touch,event){
        if(!this.containsTouchLocation(touch)){
            this.mainLayer.reset();
            this._isPulling = false;
            this._isPullEnd = false;
            return false;
        }
        this._isPulling = true;
        this._isPullEnd = false;
        return true;
    },
    onTouchMoved:function(touch, event){
        var touchPoint = touch.getLocation();
        this.setPosition(touchPoint);
        this.mainLayer.drawLine();
    },
    onTouchEnded:function(){
        this._isPullEnd = true;
        var hitAngle = cc.pToAngle(cc.pSub(cc.p(this.mainLayer._slingshot.getPositionX(),
        FLOOR_HEIGHT+this