文档章节

HTML5游戏开发-Box2dWeb应用(二)-碰撞以及各种连接

Neo_
 Neo_
发布于 2012/06/19 13:17
字数 1044
阅读 239
收藏 1

http://blog.csdn.net/lufy_legend/article/details/7654607

一,鼠标拖拽刚体

使用lufylegend.js库件后,拖拽刚体变得很简单,只需调用LSprite的setBodyMouseJoint(true);方法即可,修改上一节中的add方法如下

[javascript]  view plain copy
  1. function add(){  
  2.     var rand = Math.random();  
  3.     if(rand < 0.33){  
  4.         cLayer = new LSprite();  
  5.         cLayer.x = 50 + Math.random()*700;  
  6.         cLayer.y = 50;  
  7.         backLayer.addChild(cLayer);  
  8.         bitmap = new LBitmap(new LBitmapData(imglist["bird1"]));  
  9.         cLayer.addChild(bitmap);  
  10.         cLayer.addBodyCircle(bitmap.getWidth()*0.5,bitmap.getHeight()*0.5,bitmap.getWidth()*0.5,1,.5,.4,.5);  
  11.         cLayer.setBodyMouseJoint(true);  
  12.     }else if(rand < 0.66){  
  13.         cLayer = new LSprite();  
  14.         backLayer.addChild(cLayer);  
  15.         bitmap = new LBitmap(new LBitmapData(imglist["bird2"]));  
  16.         cLayer.addChild(bitmap);  
  17.         var shapeArray = [  
  18.             [[0,54],[27,0],[54,54]]  
  19.         ];  
  20.         cLayer.addBodyVertices(shapeArray,27,27,1,.5,.4,.5);  
  21.         cLayer.box2dBody.SetPosition(new LGlobal.box2d.b2Vec2((50 + Math.random()*700)/LGlobal.box2d.drawScale,50/LGlobal.box2d.drawScale));  
  22.         cLayer.setBodyMouseJoint(true);  
  23.     }else{  
  24.         cLayer = new LSprite();  
  25.         cLayer.x = 50 + Math.random()*700;  
  26.         cLayer.y = 50;  
  27.         backLayer.addChild(cLayer);  
  28.         bitmap = new LBitmap(new LBitmapData(imglist["stage01"]));  
  29.         cLayer.addChild(bitmap);  
  30.         cLayer.addBodyPolygon(bitmap.getWidth(),bitmap.getHeight(),1,5,.4,.2);  
  31.     }  
  32. }  
可以看到,我只在加入小鸟的时候,加入了鼠标拖拽,下面是测试连接

http://lufy.netne.net/lufylegend-js/lufylegend-1.4/box2d/sample01/index4.html

二,碰撞检测

使用如下代码来加入碰撞检测事件

[javascript]  view plain copy
  1. LGlobal.box2d.setEvent(LEvent.BEGIN_CONTACT,beginContact);  
这时候的碰撞是所有刚体之间的碰撞,包括静止的和动态的

为了方便,我这里使用lufylegend.js中的debug方法来验证

[javascript]  view plain copy
  1. function beginContact(contact){  
  2.     if(contact.GetFixtureA().GetBody().GetUserData().name == "bird" &&   
  3.             contact.GetFixtureB().GetBody().GetUserData().name == "bird"){  
  4.         trace("bird and bird");  
  5.     }  
  6.     trace("bird and other");  
  7. };  

以上方法就是碰撞的检测,意思是当两只小鸟之间发生碰撞的时候,输出"bird and bird",小鸟和其他刚体,或者其他刚体之间发生碰撞的时候输出"bird and other"

这里是测试连接

http://lufy.netne.net/lufylegend-js/lufylegend-1.4/box2d/sample01/index5.html

下面是运行结果


三,刚体之间的各种链接

最后,我们来看看刚体之间的各种连接,这部分目前没有封装在lufylegend.js里,以后会陆续封装进去,不过现在我们先来看看如何手动实现这些连接

1,距离链接(b2DistanceJointDef)

b2DistanceJointDef可以用来约束两个body之间的距离,用法如下

[javascript]  view plain copy
  1. function add(){  
  2.     cLayer = new LSprite();  
  3.     cLayer.name = "bird";  
  4.     cLayer.x = 50 + Math.random()*700;  
  5.     cLayer.y = 50;  
  6.     backLayer.addChild(cLayer);  
  7.     bitmap = new LBitmap(new LBitmapData(imglist["bird1"]));  
  8.     cLayer.addChild(bitmap);  
  9.     cLayer.addBodyCircle(bitmap.getWidth()*0.5,bitmap.getHeight()*0.5,bitmap.getWidth()*0.5,1,.5,.4,.5);  
  10.     cLayer.setBodyMouseJoint(true);  
  11.     return cLayer;  
  12. }  
  13. var bird1 = add();  
  14. var bird2 = add();  
  15. var distanceJointDef = new LGlobal.box2d.b2DistanceJointDef();  
  16. distanceJointDef.Initialize(bird1.box2dBody, bird2.box2dBody, bird1.box2dBody.GetWorldCenter(), bird2.box2dBody.GetWorldCenter());  
  17. LGlobal.box2d.world.CreateJoint(distanceJointDef);   

这里是测试连接

http://lufy.netne.net/lufylegend-js/lufylegend-1.4/box2d/sample01/index6.html

下面是运行结果

2,旋转链接(b2RevoluteJointDef)

b2RevoluteJointDef可以给两个body设置一个轴心,让两个body绕这个轴心旋转,用法如下

[javascript]  view plain copy
  1. var bird = new LSprite();  
  2.     bird.name = "bird";  
  3.     bird.x = 200;  
  4.     bird.y = 200;  
  5.     backLayer.addChild(bird);  
  6.     bitmap = new LBitmap(new LBitmapData(imglist["bird1"]));  
  7.     bird.addChild(bitmap);  
  8.     bird.addBodyCircle(bitmap.getWidth()*0.5,bitmap.getHeight()*0.5,bitmap.getWidth()*0.5,0);  
  9.       
  10.     var pig = new LSprite();  
  11.     pig.name = "pig";  
  12.     pig.x = 200;  
  13.     pig.y = 150;  
  14.     backLayer.addChild(pig);  
  15.     bitmap = new LBitmap(new LBitmapData(imglist["pig2"]));  
  16.     pig.addChild(bitmap);  
  17.     pig.addBodyCircle(bitmap.getWidth()*0.5,bitmap.getHeight()*0.5,bitmap.getWidth()*0.5,1,.5,.4,.5);  
  18.   
  19.     var revoluteJointDef  = new LGlobal.box2d.b2RevoluteJointDef();  
  20.     revoluteJointDef .Initialize(pig.box2dBody, bird.box2dBody, bird.box2dBody.GetWorldCenter());  
  21.     LGlobal.box2d.world.CreateJoint(revoluteJointDef );   

这里是测试连接

http://lufy.netne.net/lufylegend-js/lufylegend-1.4/box2d/sample01/index7.html

下面是运行结果

3,滑轮链接(b2PulleyJointDef)

b2PulleyJointDef类似滑轮效果,用法如下

[javascript]  view plain copy
  1. var bird = new LSprite();  
  2.     bird.name = "bird";  
  3.     bird.x = 200;  
  4.     bird.y = 200;  
  5.     backLayer.addChild(bird);  
  6.     bitmap = new LBitmap(new LBitmapData(imglist["bird1"]));  
  7.     bird.addChild(bitmap);  
  8.     bird.addBodyCircle(bitmap.getWidth()*0.5,bitmap.getHeight()*0.5,bitmap.getWidth()*0.5,1,.5,.4,.5);  
  9.     bird.setBodyMouseJoint(true);  
  10.       
  11.     var bird01 = new LSprite();  
  12.     bird01.name = "bird";  
  13.     bird01.x = 400;  
  14.     bird01.y = 150;  
  15.     backLayer.addChild(bird01);  
  16.     bitmap = new LBitmap(new LBitmapData(imglist["bird1"]));  
  17.     bird01.addChild(bitmap);  
  18.     bird01.addBodyCircle(bitmap.getWidth()*0.5,bitmap.getHeight()*0.5,bitmap.getWidth()*0.5,1,.5,.4,.5);  
  19.     bird01.setBodyMouseJoint(true);  
  20.   
  21.     var anchor1 = bird.box2dBody.GetWorldCenter();    
  22.     var anchor2 = bird01.box2dBody.GetWorldCenter();    
  23.   
  24.     var groundAnchor1 = new LGlobal.box2d.b2Vec2(anchor1.x, anchor1.y - (100 / LGlobal.box2d.drawScale));  
  25.     var groundAnchor2 = new LGlobal.box2d.b2Vec2(anchor2.x, anchor2.y - (100 / LGlobal.box2d.drawScale));  
  26.   
  27.     var ratio = 1.0;    
  28.   
  29.     var pulleyJointDef = new LGlobal.box2d.b2PulleyJointDef();    
  30.     pulleyJointDef.Initialize(bird.box2dBody, bird01.box2dBody, groundAnchor1, groundAnchor2, anchor1, anchor2, ratio);    
  31.     pulleyJointDef.maxLengthA = 300 / LGlobal.box2d.drawScale;    
  32.     pulleyJointDef.maxLengthB = 300 / LGlobal.box2d.drawScale;   
  33.   
  34.     LGlobal.box2d.world.CreateJoint(pulleyJointDef);  

这里是测试连接

http://lufy.netne.net/lufylegend-js/lufylegend-1.4/box2d/sample01/index8.html

下面是运行结果

其余的连接还有,b2GearJoint,b2PrismaticJoint,b2LineJoint,b2WeldJoint等多种链接,这些等以后封装到lufylegend.js后再详细介绍,这里不细说了,想了解的朋友可以查阅一下相关资料

最后给出这两次内容的所有源代码

http://fsanguo.comoj.com/download.php?i=box2d_sample01.rar

注意,上面只是源码,如果想要在本地运行这些源码的话,需要自己下载lufylegend.js库件以及box2dweb,然后进行配置

有了上面的介绍,应该可以做一个物理游戏了,相信大家都知道一款非常有名的游戏《愤怒的小鸟》,下次咱们来研究一下如何用html5来实现它

© 著作权归作者所有

Neo_

Neo_

粉丝 27
博文 153
码字总数 145328
作品 5
广州
程序员
私信 提问
2016年 最火的 15 款 HTML5 游戏引擎

HTML5游戏从2014年Egret引擎开发的神经猫引爆朋友圈之后,就开始一发不可收拾,今年《传奇世界》更是突破流水2000万!从两年多的发展来看,游戏开发变得越来越复杂,需要制作各种炫丽的效果,...

qixinghaitang
2016/04/01
43.3K
8
2014 不能错过的 10+ 个 JavaScript 游戏引擎

在过去几年里,JavaScript 变得越来越流行,现在被认为是 Github 上面最受欢迎的编程语言。JavaScript 和 HTML5 这个流行的组合和 HTML5 的最新发展催生了各种 JavaScript 游戏引擎。这个组合...

oschina
2014/03/20
6.4K
13
2016第五届HTML5峰会“iWeb峰会”暨攻城狮嘉年华(北京站)

由中国最大的HTML5社区——HTML5梦工场主办的iWeb峰会暨HTML5峰会,已历经四届。2012年携手W3C主办的主题为“HTML5在路上”的峰会,HTML5行业的关注焦点还集中于工具、应用市场、浏览器与渠道...

H5梦工场
2016/07/19
1K
7
2016第五届HTML5峰会“iWeb峰会”暨攻城狮嘉年华(北京站)

由中国最大的HTML5社区——HTML5梦工场主办的iWeb峰会暨HTML5峰会,已历经四届。2012年携手W3C主办的主题为“HTML5在路上”的峰会,HTML5行业的关注焦点还集中于工具、应用市场、浏览器与渠道...

H5梦工场
2016/07/19
17
0
好程序员告诉你HTML好在哪里,为什么值得我们学习

好程序员告诉你HTML好在哪里,为什么值得我们学习,HTML5对于用户来说,提高了用户体验,加强了视觉感受。HTML5技术在移动端,能够让应用程序回归到网页,并对网页的功能进行扩展,用户不需要...

好程序员IT
04/28
29
0

没有更多内容

加载失败,请刷新页面

加载更多

springboot2.0 maven打包分离lib,resources

springboot将工程打包成jar包后,会出现获取classpath下的文件出现测试环境正常而生产环境文件找不到的问题,这是因为 1、在调试过程中,文件是真实存在于磁盘的某个目录。此时通过获取文件路...

陈俊凯
今天
6
0
BootStrap

一、BootStrap 简洁、直观、强悍的前端开发框架,让web开发更加迅速、简单 中文镜像网站:http://www.bootcss.com 用于开发响应式布局、移动设备优先的WEB项目 1、使用boot 创建文件夹,在文...

wytao1995
今天
10
0
小知识:讲述Linux命令别名与资源文件的区别

别名 别名是命令的快捷方式。为那些需要经常执行,但需要很长时间输入的长命令创建快捷方式很有用。语法是: alias ppp='ping www.baidu.com' 它们并不总是用来缩短长命令。重要的是,你将它...

老孟的Linux私房菜
今天
8
0
《JAVA核心知识》学习笔记(6. Spring 原理)-5

它是一个全面的、企业应用开发一站式的解决方案,贯穿表现层、业务层、持久层。但是 Spring 仍然可以和其他的框架无缝整合。 6.1.1. Spring 特点 6.1.1.1. 轻量级 6.1.1.2. 控制反转 6.1.1....

Shingfi
今天
8
0
Excel导入数据库数据+Excel导入网页数据【实时追踪】

1.Excel导入数据库数据:数据选项卡------>导入数据 2.Excel导入网页数据【实时追踪】:

东方墨天
今天
11
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部