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

最近开始研究Box2dweb,Box2dweb是一款物理引擎,主要是对物理刚体和关节连接进行了封装,box2dweb很强大当然也有些复杂,不过幸好lufylegend.js做了这方面的封装,在制作时如果用lufylegend配合Box2dweb,那就简单多了。要学习box2dWeb我还是给大家推荐拉登大叔的博客,地址:http://www.ladeng6666.com/blog,写得相当好,话说他的文章中还运用了相当多的修辞手法呢,看他的文章边学技术,边学写作,哈哈。顺便也提一提,本次实现的效果也是模仿拉登大叔一篇文章中的效果,不过大叔的是ActionScript版本的,我是Js版的。

最后还是祝大家新年快乐吧~虽然这祝福来晚了,不过还是满含我的诚意……偷笑

好了,费话不多说,直接进入正题。

首先看截图吧,如下:

【HTML5物理小Demo】用Box2dWeb实现锁链+弹簧效果_第1张图片

【HTML5物理小Demo】用Box2dWeb实现锁链+弹簧效果_第2张图片

测试链接:http://yuehaowang.github.io/demo/box2d_linkage/

接下来就来讲一讲实现步骤。


一,准备工作

首先你需要下载lufylegend和box2dweb 这两个引擎。

box2dweb可以到这里下载:

http://code.google.com/p/box2dweb/downloads/list

lufylegend可以到这里:

http://lufylegend.com/lufylegend

关于lufylegend怎么用,可以到这里看看API文档:

http://lufylegend.com/lufylegend/api

Box2dWeb怎么用?其实我也不太清楚,这次主要用lufylegend封装的API,用到原生API的时候我自己来讲讲吧,讲的差不要骂喔~


二,原理

这个小demo的原来其实很简单,就是将几块矩形小刚体用旋转关节连接起来。当然,说起来很容易,其实做起来还是要深究的。在我看到拉登大叔的文章之前,其实我也没有想到什么方法,于是就借鉴了大叔的文章,原理不是我独创的,所以呢,不好直说,免得大叔看到了不高兴,大家看一看拉登大叔的文章就能明白原理了。

文章地址如下:http://www.ladeng6666.com/blog/2012/11/25/create-box2d-linkage-or-bridge-effect-using-b2joint/


三,含详细注释的源代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>box2d demo</title>
	<script type="text/javascript" src="./Box2dWeb-2.1.a.3.min.js"></script>
	<script type="text/javascript" src="./lufylegend-1.8.7.min.js"></script>
	
	<script type="text/javascript">
		init(50,"mylegend",600,400,pageInit);
		function pageInit(){
			LStage.setDebug(true);
			LStage.box2d = new LBox2d();

			if(LStage.canTouch == true){
				document.body.style.margin = "0px 0px";
				LStage.stageScale = LStageScaleMode.SHOW_ALL;
				LSystem.screen(LStage.FULL_SCREEN);
			}

			var mainObj = new Main();
			addChild(mainObj);
		}

		/**
		 *Main
		 *@author: Yorhom
		 *@http://blog.csdn.net/yorhomwang
		*/
		function Main(){
			var s = this;
			base(s,LSprite,[]);

			/**加入围墙*/
			s.addWall();
			/**加入锁链桥*/
			s.addBridge();
			/**随机加入其他物体*/
			s.addRandomObj();
		}
		Main.prototype.addWall = function(){
			var s = this;
			
			//设置围墙大小
			var wallSize = 10;
			//设置围墙数据
			var wallList = [
				//左边
				[wallSize*0.5, LStage.height*0.5, wallSize, LStage.height],
				//右边
				[LStage.width-wallSize*0.5, LStage.height*0.5, wallSize, LStage.height],
				//上面
				[LStage.width*0.5, wallSize*0.5, LStage.width, wallSize],				
				//下面
				[LStage.width*0.5, LStage.height-wallSize*0.5, LStage.width, wallSize],
			];
			//通过遍历围墙数据,添加四面围墙
			for(var key in wallList){
				//获取数据
				var item = wallList[key];
				//创建围墙对象
				var wallLayer = new LSprite();
				//设定对象位置
				wallLayer.x = item[0];
				wallLayer.y = item[1];
				//加入刚体
				wallLayer.addBodyPolygon(item[2],item[3],0);
				//加入显示列表
				s.addChild(wallLayer);
			}
		};
		Main.prototype.addBridge = function(){
			var s = this;

			//关节向量
			var vec = new LStage.box2d.b2Vec2();
			//添加对象数量
			var amount = 6;
			//设置对象宽度和高度
			var bw=50,bh=15;
			//获取锁链桥总长度
			var bridgeWidth = bw*amount;
			//设置锁链桥开始位置
			var initX=(LStage.width-bridgeWidth)*0.5,
				initY=(LStage.height-bh)*0.5+30;
			//设置用于固定锁链桥的定点半径
			var anchorR = 15;

			/**用于固定锁链桥的定点A*/
			var anchorA = new LSprite();
			anchorA.x = initX-anchorR;
			anchorA.y = initY-anchorR;
			anchorA.addBodyCircle(anchorR,anchorR,anchorR,0);
			s.addChild(anchorA);
			/**用于固定锁链桥的定点B*/
			var anchorB = new LSprite();
			anchorB.x = bridgeWidth+initX-anchorR;
			anchorB.y = initY-anchorR;
			anchorB.addBodyCircle(anchorR,anchorR,anchorR,0);
			s.addChild(anchorB);

			//上一个对象
			var previousBlock = anchorA;

			/**循环添加刚体*/
			for(var i=0; i<amount; i++){
				//实例化对象
				var block = new LSprite();
				//设定对象位置
				block.x = initX+i*bw+bw*0.5;
				block.y = initY;
				//加入刚体
				block.addBodyPolygon(bw,bh,1);
				//设置鼠标拖动
				block.setBodyMouseJoint(true);
				//加入显示列表
				s.addChild(block);
				//加入关节
				var revoluteJoint = new LStage.box2d.b2RevoluteJointDef();
				vec.Set((initX+i*bw)/30, initY/30);
				revoluteJoint.Initialize(previousBlock.box2dBody,block.box2dBody,vec);
				LStage.box2d.world.CreateJoint(revoluteJoint);
				//更改上一个对象
				previousBlock = block;
			}
			//将最后一个刚体固定
			var revoluteJoint = new LStage.box2d.b2RevoluteJointDef();
			vec.Set((initX+i*bw)/30, initY/30);
			revoluteJoint.Initialize(previousBlock.box2dBody,anchorB.box2dBody,vec);
			LStage.box2d.world.CreateJoint(revoluteJoint);
		};
		Main.prototype.addRandomObj = function(){
			var s = this;
			for(var i=0; i<10; i++){
				//创建对象
				var obj = new LSprite();
				//设置对象位置
				obj.x = Math.floor(Math.random()*(400-200+1)+200);
				obj.y = 0;
				//加入显示列表
				s.addChild(obj);
				//根据随机数添加不同的刚体
				if(Math.random() > 0.5){
					//获取随机宽度和高度
					var w = Math.floor(Math.random()*10)+25;
					var h = Math.floor(Math.random()*10)+25;
					//重现设置y坐标
					obj.y += h*0.5;
					//添加矩形刚体
					obj.addBodyPolygon(w,h,1);
				}else{
					//获取随机半径
					var r = Math.floor(Math.random()*20)+5;
					//重现设置y坐标
					obj.y += r;
					//添加圆形刚体
					obj.addBodyCircle(r,r,r,1);
				}
				//设置鼠标拖动
				obj.setBodyMouseJoint(true);
			}
		};
	</script>
</head>
<body>
	<div id="mylegend"></div>
</body>
</html>
所有代码都在这里了,还是很少的,对吧。看了拉登大叔的原理讲解,再来看我写的js代码就非常容易了。主要是注意以下几个地方。

1,添加刚体

在box2dweb中添加刚体超级麻烦,把整个创建过程告诉大家估计大家都会觉得不耐烦,所以,我用到了lufylegend.js添加刚体,这样一来添加刚体就被简化成一步了。非常方便,不是吗?在lufylegend中添加刚体一共有这几个函数:

addBodyCircle() 添加原形刚体
addBodyPolygon() 添加矩形刚体
addBodyVertices() 添加不规则图形刚体

具体的参数说明和使用举例可以参见lufylegend的API文档中LSprite的API。文档地址已在文章的准备工作一栏写出。

2,添加关节

在lufylegend虽然也有添加关节的封装,但是不能设置关节点。所以我还是用了box2dweb原生方法。添加关节的代码如下:

var revoluteJoint = new LStage.box2d.b2RevoluteJointDef();
vec.Set((initX+i*bw)/30, initY/30);
revoluteJoint.Initialize(previousBlock.box2dBody,block.box2dBody,vec);
LStage.box2d.world.CreateJoint(revoluteJoint);
其他的好理解,主要是vec这个变量,它在这里是一个向量对象,实例化代码如下:

var vec = new LStage.box2d.b2Vec2();
其实这个b2Vec2这个类可以传参数,和它的成员函数Set的参数是一样的。但是这里又多个关节,所以就没有直接设置,而是在后面用Set方法设置。这个向量可以看成一个json吧,传的参数就是设定关节的位置(x,y)。

在创建了关节之后,千万别忘记下面的代码:

LStage.box2d.world.CreateJoint(revoluteJoint);
另外,Initialize方法传的参数是box2dweb的刚体对象,在LSprite中的 box2dBody就可以获取该LSprite添加的刚体。

3,固定动态刚体

在box2dweb中,刚体分动态和静态。静态刚体比较老实,就呆在原地不动;动态刚体很活泼,不停地在做运动。

拉登大叔其实也写过相关的文章,但是我没怎么看,于是就自己想了一个方法:首先在锁链的两端建立两个圆形静态刚体,然后把锁链两端的两块矩形刚体分别连在附近的圆形静态刚体上,圆形静态刚体就会帮忙把锁链拽着,不让它乱跑。但由于锁链中每个矩形刚体是动态的,所以他们还是可以互相牵扯的。

4,如果你自己在用lufylegend+box2dweb编写时看不到图象,该怎么办?

首先你要检测一下是否在最底层上加了一个LSprite,并且用这个LSprite的graphics画了一个不透明的背景。如果是的话,你可以把这个LSprite去掉,然后再看看有没有。如果还没有,可能有以下几种原因:(1)没有在用之前加入LStage.setDebug(true); (2)没有在使用box2dweb之前加入LStage.box2d = new LBox2d();


源代码在上面已经全部给出了,运行时需要配置一下引擎box2dweb和lufylegend,然后把引擎的压缩版本(文件名含.min)放在与html同级的文件目录下即可运行,测试愉快~


好了,今天就先讲到这里。如果大家有不懂的地方可以用微博@Yorhom或者用邮箱联系我wangyuehao1999(at)gmail.com(这年头写e-mail地址再不把@换成(at)垃圾邮件多得甚至会把你用的邮件程序弄得黑白不分呢)。希望大家多支持。下次还会继续给大家带来更多有趣的小玩意。敬请期待~


----------------------------------------------------------------

欢迎大家转载我的文章。

转载请注明:转自Yorhom's Game Box

http://blog.csdn.net/yorhomwang

欢迎继续关注我的博客

你可能感兴趣的:(JavaScript,html5,lufylegend,box2dweb,物理效果)