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

quasiceo 2014-02-09

展开全文

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

分类：【Lufylegend.js】【Html5&Javascript】 2014-02-05 16:47 1567人阅读评论(3) 收藏举报

Html5 JavaScript box2dweb lufylegend 物理效果

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

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

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

首先看截图吧，如下：

测试链接：http://game./20141952ee70ee9c117/

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

一，准备工作

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

box2dweb可以到这里下载：

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

lufylegend可以到这里：

http:///lufylegend

关于lufylegend怎么用，可以到这里看看API文档：

http:///lufylegend/api

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

二，原理

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

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

三，含详细注释的源代码

[javascript] view plain copy

<!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原生方法。添加关节的代码如下：

[javascript] view plain copy

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这个变量，它在这里是一个向量对象，实例化代码如下：

[javascript] view plain copy

var vec = new LStage.box2d.b2Vec2();

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

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

[javascript] view plain copy

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

欢迎继续关注我的博客