一、写在前面的话

最近在学习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.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()(size.height+20)

||this.getPositionY()

this.setPosition(this.mainLayer._stonePoint);

this._isPullEnd = false;

this._isPulling = false;

}

}

});

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

下载