COCOS-HTML5-3.9版本学习（三）box2d物理引擎的测试

我也是刚学习这两种引擎的JS写法，具体我先给大家说下box2dLayer的结构把：

var box2dLayer = cc.Layer.extend({
world: null,
allowSleep: true, //允许睡眠
onEnter: function() {
this._super();
},
init: function() {
},
initBox2d: function(size) {
this.scheduleUpdate();
},
addBallInWorld: function(p) {

},
update: function(dt) {

}
});

关于里面的两个参数，world 就是我们将要建造的物理世界，allowSleep，你当允许暂停把；

下来我们先看initBox2d的实现：

initBox2d: function(size) {
var b2Vec2 = Box2D.Common.Math.b2Vec2,
b2BodyDef = Box2D.Dynamics.b2BodyDef,
b2Body = Box2D.Dynamics.b2Body,
b2FixtureDef = Box2D.Dynamics.b2FixtureDef,
b2World = Box2D.Dynamics.b2World,
b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape,
b2CircleShape = Box2D.Collision.Shapes.b2CircleShape;
var g = new b2Vec2(0, -10); //重力系数
this.world = new b2World(g, this.allowSleep);
this.world.SetContinuousPhysics(true); //允许物理现象
var fixDef = new b2FixtureDef();
fixDef.density = 1.0; //密度
fixDef.friction = 0.8; //摩擦
fixDef.restitution = 1; //弹性

var bodyDef = new b2BodyDef(); //创建刚体定义数据对象
bodyDef.type = b2Body.b2_staticBody; //为静态刚体, 即不受碰撞影响
fixDef.shape = new b2PolygonShape(); //多边形
fixDef.shape.SetAsBox(20, 2); //设置为矩形
bodyDef.position.Set(10, size.height / PTM_RATIO);
this.world.CreateBody(bodyDef).CreateFixture(fixDef); //世界创建刚体, 刚体创建设备, 设备拥有形状
//bottom
bodyDef.position.Set(10, -1.8);
this.world.CreateBody(bodyDef).CreateFixture(fixDef);
fixDef.shape.SetAsBox(2, 14);
// left
bodyDef.position.Set(-1.8, 13);
this.world.CreateBody(bodyDef).CreateFixture(fixDef);
// right
bodyDef.position.Set(26.8, 13);
this.world.CreateBody(bodyDef).CreateFixture(fixDef);

this.scheduleUpdate();
},

一大堆的定义，其实也没啥就是定义了我们界面的4个边框可以碰撞，直接复制粘贴把；

然后就是给我们自己的物理模型添加物理属性：

addBallInWorld: function(p) {
var sprite = this.getChildByTag(TAG_SPRITE_MANAGER); //根据标记得到小球
sprite.setPosition(p);
var b2BodyDef = Box2D.Dynamics.b2BodyDef,
b2Body = Box2D.Dynamics.b2Body,
b2FixtureDef = Box2D.Dynamics.b2FixtureDef,
b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape;

var bodyDef = new b2BodyDef();
bodyDef.type = b2Body.b2_dynamicBody;
bodyDef.position.Set(p.x / PTM_RATIO, p.y / PTM_RATIO);
bodyDef.userData = sprite;
var body = this.world.CreateBody(bodyDef);
var dynamicBox = new b2PolygonShape();
dynamicBox.SetAsBox(0.5, 0.5);
var fixtureDef = new b2FixtureDef();
fixtureDef.shape = dynamicBox;
fixtureDef.density = 1.0;
fixtureDef.friction = 0.3;
body.CreateFixture(fixtureDef);
},

然后是

update: function(dt) {
var velocityIterations = 8;
var positionIterations = 1;
this.world.Step(dt, velocityIterations, positionIterations);
for (var b = this.world.GetBodyList(); b; b = b.GetNext()) {
if (b.GetUserData() != null) {
var myActor = b.GetUserData();
myActor.x = b.GetPosition().x * PTM_RATIO;
myActor.y = b.GetPosition().y * PTM_RATIO;
myActor.rotation = -1 * cc.radiansToDegress(b.GetAngle());
}
}
}

好了，方法都架好了，然后让我们来实现：

onEnter: function() {
this._super();
this.init();
},
init: function() {
var size = cc.director.getWinSize();
//添加背景
var bg = cc.LayerColor.create(cc.color(0, 0, 0));
bg.attr({
anchorX: 0,
anchorY: 0,
x: 0,
y: 0
});
this.addChild(bg);
this.initBox2d(size); //初始化物理世界

var ball = cc.Sprite.create(res.BOXPNG,cc.rect(0,PTM_RATIO,PTM_RATIO,PTM_RATIO));
this.addChild(ball, 0, TAG_SPRITE_MANAGER); //给小球标记TAG
this.addBallInWorld(cc.p(size.width / 2, size.height / 2)); //将小球加入物理世界
},

希望想学习的人和我一样写一写。
http://pan.baidu.com/s/1ntVX6nZ 源码在这里。