首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

coco2d-html5打造弹弓射鸟第一部分-橡皮筋

2013-10-08 
coco2d-html5制作弹弓射鸟第一部分---橡皮筋一、写在前面的话最近在学习cocos2d-html5方面的知识,一直想从

coco2d-html5制作弹弓射鸟第一部分---橡皮筋

一、写在前面的话     

        最近在学习cocos2d-html5方面的知识,一直想从事游戏方面的工作,自己也找了好多资料。网上关于cocos2d-html5的教程真的不多,也只有自己摸索,慢慢看示例代码。由于本人没有mac,所以呢就用不了cocosbuild来制作动画相关的啦,不过今天又发现一个东西就是可以采用虚拟机来转mac系统,呵呵,明天继续试试。如果你也在学习或从事cocos2d-html5方面东西,希望大家都相互交流,共同进步啊。


二、橡皮筋制作

      这部分的主要内容是制作橡皮筋,石头放在弹弓上,用手拉弹弓,让石头弹出去。

      需要准备的资源有弹弓、石头、背景

      最终效果图:

      coco2d-html5打造弹弓射鸟第一部分-橡皮筋


三、详细分解

     1、制作背景(制作背景的代码过于简单,没什么多说的就直接上代码了)

            2)事件的捕捉,当触发Touch事件的时候,判断当前位置是否在石头的矩形范围之类,当事件移动的时候,获取当前事件的

位置,并且设置石头的位置,此时有个核心的东西就是用画笔画出橡皮筋,从石头到弹弓两端点之间。

            coco2d-html5打造弹弓射鸟第一部分-橡皮筋

            3)当事件END的时候,石头必须弹出去,给石头一个方向向量,计算石头当前位置和弹弓顶端中间点的角度。从而让石头射出去。

            coco2d-html5打造弹弓射鸟第一部分-橡皮筋

            源代码:

//石头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.mainLayer._slingshot.getPositionY()),this.getPosition()));        var scalarVelocity = cc.pLength(this._velocity);        this._velocity = cc.pMult(cc.pForAngle(hitAngle),scalarVelocity);        this.mainLayer.clearDrawLine();    },    containsTouchLocation:function(touch){        //获取触摸点的位置        var touchPoint = touch.getLocation();        //获取当前对象的宽度        var contentSize = this.getContentSize();        //定义拖拽的区域        var myRect = cc.rect(0,0,contentSize.width,contentSize.height);        myRect.origin.x += this.getPosition().x - this.getContentSize().width/2;        myRect.origin.y += this.getPosition().y - this.getContentSize().height/2;        return cc.rectContainsPoint(myRect,touchPoint);    },    update:function(dt){        if(this._isPullEnd&&this._isPulling){            this.setPosition(cc.pAdd(this.getPosition(),cc.pMult(this._velocity,dt)));            this.check();        }    },    check:function(){        //判断是否飞出了整个区域以外,如果是则重设石头        var size = cc.Director.getInstance().getWinSize();        if(this.getPositionX()>(size.width+20)||           this.getPositionX()<-20||this.getPositionY()>(size.height+20)           ||this.getPositionY()<-20){            this.setPosition(this.mainLayer._stonePoint);            this._isPullEnd = false;            this._isPulling = false;        }    }});

最后:可能做得不是很好,但后面会慢慢完善,也会发到网上供大家参考,源码下载地址:下载

1楼suannai03144小时前
您的文章已被推荐到博客首页和个人页侧边栏推荐文章,感谢您的分享。

热点排行