Box2D.js简易示例

原创 2015年09月18日 10:45:20


<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>

box2d 初识 强大的物理碰撞引擎 结合canvas

一个小的Demo http://jsfiddle.net/qAjPt/ Box2D是一个用于模拟2D刚体物体的C++引擎。作者为Erin Catto。Box2D使用zlib许可。z...
  • u012844719
  • u012844719
  • 2014年03月10日 16:42
  • 1816

【HTML5物理小Demo】用Box2dWeb实现锁链+弹簧效果

最近开始研究Box2dweb,Box2dweb是一款物理引擎,主要是对物理刚体和关节连接进行了封装,box2dweb很强大当然也有些复杂,不过幸好lufylegend.js做了这方面的封装,在制作时如...
  • yorhomwang
  • yorhomwang
  • 2014年02月05日 16:47
  • 12882

百度富文本编辑器UEditor使用简单示例

百度富文本编辑器UEditor使用简单示例
  • a491857321
  • a491857321
  • 2016年04月28日 15:26
  • 2023

基于FLASH BOX2D的一个弹珠示例

  • 2015年08月26日 11:19
  • 4.79MB
  • 下载

简单的Box2D示例

  • 2015年08月10日 12:40
  • 8KB
  • 下载

box2d web /js

  • 2017年12月01日 09:51
  • 312KB
  • 下载

box2d小球碰撞--js代码

  • 2014年04月17日 22:39
  • 44KB
  • 下载

<转载>android box2d物理引擎示例

package com.ray.test; import org.jbox2d.collision.AABB; import org.jbox2d.collision.CircleDef; ...
  • Kowalski_0
  • Kowalski_0
  • 2014年08月26日 18:43
  • 305

《Box2dDemo》(Cocos2d-js)

  • 2016年09月02日 16:55
  • 7.45MB
  • 下载

Box2D中的b2DebugDraw使用示例

http://www2.flash8.net/teach/7399.htm b2DebugDraw提供调试功能,由于Box2D中所有对象都是不可见的,要创建可见对象我们得用刚体定义中的userDat...
  • qingqichiyu
  • qingqichiyu
  • 2011年09月07日 13:09
  • 864
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Box2D.js简易示例
举报原因:
原因补充:

(最多只允许输入30个字)