`
webcode
  • 浏览: 5911286 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多

上次介绍了用box2dweb创建各种刚体,这次来介绍如何用鼠标拖拽刚体,刚体之间的碰撞,以及刚体之间的各种连接。


HTML5游戏开发-Box2dWeb应用(一)-创建各种各样的刚体

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


一,鼠标拖拽刚体

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

可以看到,我只在加入小鸟的时候,加入了鼠标拖拽,下面是测试连接

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


二,碰撞检测

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

这时候的碰撞是所有刚体之间的碰撞,包括静止的和动态的

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

以上方法就是碰撞的检测,意思是当两只小鸟之间发生碰撞的时候,输出"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之间的距离,用法如下

这里是测试连接

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

下面是运行结果



2,旋转链接(b2RevoluteJointDef)

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

这里是测试连接

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

下面是运行结果



3,滑轮链接(b2PulleyJointDef)

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

这里是测试连接

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来实现它

分享到:
评论

相关推荐

    Box2dWeb包

    HTML5 Canvas开发物理引擎Box2dWeb

    Box2dWeb-2.1.a.3.min.js

    一个js版本的box2d引擎,包含重力系统和碰撞检测,可以去github上下载,放在此处只是为了方便,侵删~

    box2dweb学习资料

    这是关于box2dweb入门学习的一些资料,是我自己上网收集,然后做成pdf格式

    Box2dWeb-2.1a.3

    重力框架Box2d的javascript版本2.1a.3。由box2dfalash改编成javascript 参考文档可以看:http://www.box2dflash.org/docs/2.1a/reference/和box2dflash的官方教程

    box2d中文教程

    box2d中文教程 cocos2d-x 中 学习物理引擎的好文档

    GIP-Box2dWeb-Tuto5-2

    Box2d Web - 教程 5:危险连接 - 第 2 部分 推介会 该项目展示了 Box2d Web 中可用的不同类型的链接(关节)。 它允许: 了解如何将对象链接在一起,对它们应用物理约束并创建机制, 完成一组使用这些链接的示例,...

    box2dweb-exporter-physicseditor:用于PhysicsEditor(CodeAndWeb)的Box2DWeb和Box2DJS自定义导出器

    box2dweb-exporter-physicseditor Box2DWeb的自定义导出器,可与CodeAndWeb的PhysicsEditor一起使用导出的脚本是ES6 / 2015模块 默认情况下,该脚本设置为导入ES2015模块box2dweb-haircut: Box2DWeb的CommonJS...

    Silverlight5轻松开启绚丽的网页3D世界2-使用Toolkit开发3DWeb应用.pdf

    Silverlight5轻松开启绚丽的网页3D世界2-使用Toolkit开发3DWeb应用.pdf

    Silverlight5轻松开启绚丽的网页3D世界2-使用Toolkit开发3DWeb应用.doc

    Silverlight5轻松开启绚丽的网页3D世界2-使用Toolkit开发3DWeb应用.doc

    GIP-Box2dWeb-Tuto5-1

    Box2d Web - 教程 5:危险连接 - 第 1 部分 推介会 这个项目是对 Box2d Web 中的链接(关节)的介绍。 它允许: 了解连接:了解它们的工作原理,了解如何创建和使用它们, 使用特殊的 MouseJoint 链接在 2D 环境中...

    GIP-Box2dWeb-Tuto3

    游戏进行中 Box2d Web - 教程 3:跳跃! 推介会 该项目介绍了如何改进对角色的控制及其与 2D 环境的交互。 它涵盖以下几点: 对物体施加力/冲量, 管理环境中对象之间的碰撞, 将多个 Fixtures 应用到 Body, ...

    GIP-Box2dWeb-Tuto1

    游戏进行中 Box2d Web - 教程 1:一个大立方体,一个小立方体,... 推介会 这个项目是对 Box2d Web 的介绍。 它介绍了库的基本功能: 在 HTML 5 画布中创建“世界”或 2D 物理环境, 向其中添加静态和动态对象, ...

    GIP-Box2dWeb-Tuto4

    游戏进行中Box2d Web - 教程 4:跳跃拼图推介会该项目提议使用在前三个项目中看到的所有概念,以创建一个小型游戏板混合平台和(一个点)反射。连接查看访问

    box2d web /js

    box2dweb box2djs 双包 zip。

    【HTML5】使用Box2d模拟飞行箭矢

    使用Box2dWeb库模拟飞行箭矢 注: 1、仅在Chrome 25.0.1323.1下测试 2、因为懒得切换输入法,所以注释均为英文

    funny-rain:网页游戏实验。 Pixijs,box2dweb,boplex v2

    有趣的雨网页游戏实验。 Pixijs,box2dweb,boplex v2。

    Box2D篮球小游戏

    Box2D的简单应用,一个投篮小程序,适合作为教学实例。

    grandbox:由box2dweb驱动的物理沙盒游戏

    大盒子 Grand Box是Box2DWeb支持的平台程序,具有内置的关卡编辑器。 将来,人们将能够建立和共享关卡,供他人发现和玩耍。 野心是创造一个游戏,人们可以创建基于物理的关卡来与世界共享,或者只是在沙盒模式下玩转...

    box2Dweb:用于HTML5的Box2D的Javascript端口

    box2Dweb 用于HTML5的Box2D的Javascript端口 支持Box2D 2.2中的绳索接头... Enjoy :)

    Box2d 最新api,英文版

    Box2d 最新api,英文版!绝对给力. 搞cocos2d-x开发的都知道,离不开的box2d,api 本来是html版的,本人制作成了chm版,便于使用! 好东西一起分享,记得给好评哦.

Global site tag (gtag.js) - Google Analytics