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 源码在这里。