Box2D.js简易示例


<html>

	<head>
		<title>Box2dWeb example</title>
	</head>
	
	<body onload="init();">
	
		<canvas id="canvas" width="640" height="480" style="background:url(sceneback.jpg);background-repeat:no-repeat; background-size:100% 100%;"></canvas>
		
		<!--把图片预先加载隐藏-->
		<div id="assets" style="display:none">
			<img id="villa" src="villa.png" />
			<img id="house" src="house.png" />
		</div>

	</body>

<script type="text/javascript" src="Box2D.js"></script>

<script type="text/javascript">

//在页面加载完毕后启动整个Box2D程序

function init() {

	//简化缩写各个对象名称
	var b2Vec2 = Box2D.Common.Math.b2Vec2;
	var b2AABB = Box2D.Collision.b2AABB;
	var b2BodyDef = Box2D.Dynamics.b2BodyDef;
	var b2Body = Box2D.Dynamics.b2Body;
	var b2FixtureDef = Box2D.Dynamics.b2FixtureDef;
	var b2Fixture = Box2D.Dynamics.b2Fixture;
	var b2World = Box2D.Dynamics.b2World;
	var b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape;
	var b2DebugDraw = Box2D.Dynamics.b2DebugDraw;
	
	//获取画布对象和上下文环境
	var canvas = document.getElementById("canvas");
	var context = canvas.getContext("2d");
	
	//设置缩放比例
	var worldScale = 30;
	
	//创建物理世界,设定纵横重力加速度
	var world = new b2World(new b2Vec2(0, 10),true);
	
	//获取画布的起始坐标
	var canvasPosition=new Object();
	canvasPosition.x=8;
	canvasPosition.y=8;

	//调试绘制并持续刷新
	debugDraw();             
	window.setInterval(update,1000/30);
	
	//绘制四面墙壁
	createBox(640,30,320,480,b2Body.b2_staticBody,null);
	createBox(640,30,320,0,b2Body.b2_staticBody,null);
	createBox(30,480,0,240,b2Body.b2_staticBody,null);
	createBox(30,480,640,240,b2Body.b2_staticBody,null);
	//先行绘制几个物体
	createBox(64,64,100,400,b2Body.b2_staticBody,document.getElementById("house"));
	createBox(64,64,300,100,b2Body.b2_dynamicBody,document.getElementById("house"));
	
	//监听鼠标事件
	document.addEventListener("mousedown",function(e){
		createBox(64,64,e.clientX-canvasPosition.x,e.clientY-canvasPosition.y,b2Body.b2_dynamicBody,document.getElementById("villa"));
	});
	
	//绘制物体
	function createBox(width,height,pX,pY,type,data){
		var bodyDef = new b2BodyDef;
		bodyDef.type = type;
		bodyDef.position.Set(pX/worldScale,pY/worldScale);
		//这个userData就是用来存放图片对象或其它用户数据的
		bodyDef.userData=data;
		//设置物体多边形形状,此处为矩形
		var polygonShape = new b2PolygonShape;
		polygonShape.SetAsBox(width/2/worldScale,height/2/worldScale);
		//设置物体的各种物理属性
		var fixtureDef = new b2FixtureDef;
		fixtureDef.density = 1.0;
		fixtureDef.friction = 0.5;
		fixtureDef.restitution = 0.5;
		fixtureDef.shape = polygonShape;
		//依据物体的形状和属性在世界中创建出来
		var body=world.CreateBody(bodyDef);
		body.CreateFixture(fixtureDef);
	}
	
	//绘制调试场景和辅助线框
	function debugDraw(){
		var debugDraw = new b2DebugDraw();
		debugDraw.SetSprite(document.getElementById("canvas").getContext("2d"));
		debugDraw.SetDrawScale(30.0);
		debugDraw.SetFillAlpha(0);
		debugDraw.SetLineThickness(1);
		//此处命令可以控制debugDraw显示各种辅助线标示
		//debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit | b2DebugDraw.e_aabbBit | b2DebugDraw.e_pairBit | b2DebugDraw.e_centerOfMassBit);
		world.SetDebugDraw(debugDraw);
	}

	//实时刷新显示
	function update() { 
		world.Step(1/30,10,10);
	    world.DrawDebugData();
		//context.drawImage(document.getElementById("sceneback"),0,0);
		//绘制渲染到canvas上的过程,其实就是读取世界种所有物体的坐标和角度数据,然后以此绘制物体图片
		//world.m_bodyList存储了世界中各个物体的数据
	     for(var b = world.m_bodyList; b != null; b = b.m_next){
			if(b.GetUserData()){
				context.save();
				context.translate(b.GetPosition().x*worldScale,b.GetPosition().y*worldScale);
				context.rotate(b.GetAngle());
				context.drawImage(b.GetUserData(),-b.GetUserData().width/2,-b.GetUserData().height/2);
				context.restore();
			}
		}
	    world.ClearForces();
	};
	

};


</script>

</html>

阅读更多
想对作者说点什么? 我来说一句

Box2dWeb-2.1a.3

2012年12月06日 104KB 下载

box2d web /js

2017年12月01日 312KB 下载

box2d-web.js

2015年04月09日 420KB 下载

没有更多推荐了,返回首页

不良信息举报

Box2D.js简易示例

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭