/LGC物理引擎/javascript 版的 Box2D

最新推荐文章于 2024-08-15 10:08:16 发布
转载 最新推荐文章于 2024-08-15 10:08:16 发布 · 1k 阅读 · 0
文章标签：

#引擎 #function #stylesheet #javascript #浏览器 #safari

本文介绍如何使用JavaScript实现Box2D物理引擎，并通过实例演示如何创建2D物理场景，包括自由落体碰撞和悬挂小球摆动。
javascript 版的 Box2D
作者: 刘鹏
日期: 2009-03-09
本文介绍了用 javascript 实现的 2d 物理引擎 Box2D，利用它可以在浏览器中实现带丰富物理效果的游戏和 UI。
简介

Box2DJS 是用 Javascript 实现的 Box2D 物理引擎 ，事实上它的代码由 Box2DFlashAS3 1.4.3.1 转换而来。

Box2DJS 使用 2D 命令往 canvas 标签定义的区域中绘制，Firefox、 Safari 和 Opera 9 都支持 canvas 标签，同时Box2DJS 也实现了一个 ExploreCanvas 标签供不支持 Canvas 标签的 IE 浏览器使用。

Box2DJS 的源码主要包括如下内容：

  • js，这里是物理引擎的核心代码，包括几何形状的绘制、动态效果的实现以 及碰撞检测等；
  • lib，这里实现了 ExploreCanvas 标签，在 IE 浏览器中使用；
  • style，这里保存了源码用到的 CSS 样式表；
  • demos，这里提供了一个 demo。

使用 Box2DJS 遵循下面两个步骤：

  1. 把 js/ 和 lib/ 目录拷到你的应用程序目录中；
  2. 在你的 index.html 源码 head 标签中增加 script 标签。
摆动的小球

这个例子是一个小球悬挂在空中左右摆动，随着摆动时间越来越长，小球摆动振 幅越来越小。截图如下所示:

程序序列图如下所示：

源代码如下所示：

index.html 代码如下所示：

/* index.html */



 <html>

  <head>

    <!--=============================-->

    <!-- Copy this part to your app. -->

    <!-- START                       -->

    <!--=============================-->

    <!-- libs -->

    <!--[if IE]><script type="text/javascript" src="lib/excanvas.js"></script><![endif]-->

    <script src="lib/prototype-1.6.0.2.js"></script>



        <!-- box2djs -->

    <script src='js/box2d/common/b2Settings.js'></script>

    <script src='js/box2d/common/math/b2Vec2.js'></script>

    <script src='js/box2d/common/math/b2Mat22.js'></script>

    <script src='js/box2d/common/math/b2Math.js'></script>

    <script src='js/box2d/collision/b2AABB.js'></script>

    <script src='js/box2d/collision/b2Bound.js'></script>

    <script src='js/box2d/collision/b2BoundValues.js'></script>

    <script src='js/box2d/collision/b2Pair.js'></script>

    <script src='js/box2d/collision/b2PairCallback.js'></script>

    <script src='js/box2d/collision/b2BufferedPair.js'></script>

    <script src='js/box2d/collision/b2PairManager.js'></script>

    <script src='js/box2d/collision/b2BroadPhase.js'></script>

    <script src='js/box2d/collision/b2Collision.js'></script>

    <script src='js/box2d/collision/Features.js'></script>

    <script src='js/box2d/collision/b2ContactID.js'></script>

    <script src='js/box2d/collision/b2ContactPoint.js'></script>

    <script src='js/box2d/collision/b2Distance.js'></script>

    <script src='js/box2d/collision/b2Manifold.js'></script>

    <script src='js/box2d/collision/b2OBB.js'></script>

    <script src='js/box2d/collision/b2Proxy.js'></script>

    <script src='js/box2d/collision/ClipVertex.js'></script>

    <script src='js/box2d/collision/shapes/b2Shape.js'></script>

    <script src='js/box2d/collision/shapes/b2ShapeDef.js'></script>

    <script src='js/box2d/collision/shapes/b2BoxDef.js'></script>

    <script src='js/box2d/collision/shapes/b2CircleDef.js'></script>

    <script src='js/box2d/collision/shapes/b2CircleShape.js'></script>

    <script src='js/box2d/collision/shapes/b2MassData.js'></script>

    <script src='js/box2d/collision/shapes/b2PolyDef.js'></script>

    <script src='js/box2d/collision/shapes/b2PolyShape.js'></script>

    <script src='js/box2d/dynamics/b2Body.js'></script>

    <script src='js/box2d/dynamics/b2BodyDef.js'></script>

    <script src='js/box2d/dynamics/b2CollisionFilter.js'></script>

    <script src='js/box2d/dynamics/b2Island.js'></script>

    <script src='js/box2d/dynamics/b2TimeStep.js'></script>

    <script src='js/box2d/dynamics/contacts/b2ContactNode.js'></script>

    <script src='js/box2d/dynamics/contacts/b2Contact.js'></script>

    <script src='js/box2d/dynamics/contacts/b2ContactConstraint.js'></script>

    <script src='js/box2d/dynamics/contacts/b2ContactConstraintPoint.js'></script>

    <script src='js/box2d/dynamics/contacts/b2ContactRegister.js'></script>

    <script src='js/box2d/dynamics/contacts/b2ContactSolver.js'></script>

    <script src='js/box2d/dynamics/contacts/b2CircleContact.js'></script>

    <script src='js/box2d/dynamics/contacts/b2Conservative.js'></script>

    <script src='js/box2d/dynamics/contacts/b2NullContact.js'></script>

    <script src='js/box2d/dynamics/contacts/b2PolyAndCircleContact.js'></script>

    <script src='js/box2d/dynamics/contacts/b2PolyContact.js'></script>

    <script src='js/box2d/dynamics/b2ContactManager.js'></script>

    <script src='js/box2d/dynamics/b2World.js'></script>

    <script src='js/box2d/dynamics/b2WorldListener.js'></script>

    <script src='js/box2d/dynamics/joints/b2JointNode.js'></script>

    <script src='js/box2d/dynamics/joints/b2Joint.js'></script>

    <script src='js/box2d/dynamics/joints/b2JointDef.js'></script>

    <script src='js/box2d/dynamics/joints/b2DistanceJoint.js'></script>

    <script src='js/box2d/dynamics/joints/b2DistanceJointDef.js'></script>

    <script src='js/box2d/dynamics/joints/b2Jacobian.js'></script>

    <script src='js/box2d/dynamics/joints/b2Jacobian.js'></script>

    <script src='js/box2d/dynamics/joints/b2GearJoint.js'></script>

    <script src='js/box2d/dynamics/joints/b2GearJointDef.js'></script>

    <script src='js/box2d/dynamics/joints/b2MouseJoint.js'></script>

    <script src='js/box2d/dynamics/joints/b2MouseJointDef.js'></script>

    <script src='js/box2d/dynamics/joints/b2PrismaticJoint.js'></script>

    <script src='js/box2d/dynamics/joints/b2PrismaticJointDef.js'></script>

    <script src='js/box2d/dynamics/joints/b2PulleyJoint.js'></script>

    <script src='js/box2d/dynamics/joints/b2PulleyJointDef.js'></script>

    <script src='js/box2d/dynamics/joints/b2RevoluteJoint.js'></script>

    <script src='js/box2d/dynamics/joints/b2RevoluteJointDef.js'></script>

        <!--=============================-->

        <!-- Copy this part to your app. -->

        <!-- END                         -->

        <!--=============================-->



    /* my app */

    <script src='mytest/mytest.js'></script>



    <link href="style/distant-planet.css" rel="stylesheet" type="text/css" />

    <link href="style/box2d.css" rel="stylesheet" type="text/css" />



  <head>

 </html>

javascript 代码如下所示：

/* mytest.js*/



var world;

var ctx;

var canvasWidth;

var canvasHeight;

var canvasTop;

var canvasLeft;



function createGround(world) {

    var groundSd = new b2BoxDef();

    groundSd.extents.Set(1000, 50);

    groundSd.restitution = 0.2;

    var groundBd = new b2BodyDef();

    groundBd.AddShape(groundSd);

    groundBd.position.Set(-500, 340);

    return world.CreateBody(groundBd)

}



function createBox(world, x, y, width, height, fixed) {

    if (typeof(fixed) == 'undefined') fixed = true;

    var boxSd = new b2BoxDef();

    if (!fixed) boxSd.density = 1.0;

    boxSd.extents.Set(width, height);

    var boxBd = new b2BodyDef();

    boxBd.AddShape(boxSd);

    boxBd.position.Set(x,y);

    return world.CreateBody(boxBd)

}



function createCircle (world, x, y) {

    var circleSd = new b2CircleDef();

    circleSd.density = 1.0;

    circleSd.radius = 20;

    circleSd.restitution = 1.0;

    circleSd.friction = 0;

    var circleBd = new b2BodyDef();

    circleBd.AddShape(circleSd);

    circleBd.position.Set(x,y);

    return world.CreateBody(circleBd);



}



function createJoint (world, circleBody, x, y) {

    var jointDef = new b2RevoluteJointDef();

    jointDef.anchorPoint.Set(x, y);

    jointDef.body1 = world.GetGroundBody();

    jointDef.body2 = circleBody;

    world.CreateJoint(jointDef);

}



function createWorld() {

    var worldAABB = new b2AABB();

    worldAABB.minVertex.Set(-1000, -1000);

    worldAABB.maxVertex.Set(1000, 1000);

    var gravity = new b2Vec2(0, 300);

    var doSleep = true;

    var world = new b2World(worldAABB, gravity, doSleep);

    /*bottom box*/

    createGround(world);

    /*left box*/

    createBox(world, 0, 125, 10, 250);

    /*right box*/

    createBox(world, 500, 125, 10, 250);

    var circleBody = createCircle (world, 150, 10);

    createJoint (world, circleBody, 200, 100);

    return world;

}





function step(cnt) {

    var stepping = false;

    var timeStep = 1.0/60;

    var iteration = 1;

    world.Step(timeStep, iteration);

    ctx.clearRect(0, 0, canvasWidth, canvasHeight);

    drawWorld(world, ctx);

    setTimeout('step(' + (cnt || 0) + ')', 10);

}



Event.observe(window, 'load', function() {

    world = createWorld ();



    ctx = $('canvas').getContext('2d');

    var canvasElm = $('canvas');

    canvasWidth = parseInt(canvasElm.width);

    canvasHeight = parseInt(canvasElm.height);

    canvasTop = parseInt(canvasElm.style.top);

    canvasLeft = parseInt(canvasElm.style.left);

    step ();

});

代码下载地址：http://guitestbed.googlecode.com/files/box2d-js.tar.gz

碰撞

这个例子是一个小球自由落体落下，与一个矩形 box 碰撞后落到地面，截图如下所示：

碰撞前自由落体
碰撞前自由落体
碰撞后自由落体
碰撞后自由落体

js代码：

var world;

var ctx;

var canvasWidth;

var canvasHeight;

var canvasTop;

var canvasLeft;



function createGround(world) {

    var groundSd = new b2BoxDef();

    groundSd.extents.Set(1000, 50);

    groundSd.restitution = 0.2;

    var groundBd = new b2BodyDef();

    groundBd.AddShape(groundSd);

    groundBd.position.Set(-500, 340);

    return world.CreateBody(groundBd)

}





function createBox(world, x, y, width, height, fixed) {

    if (typeof(fixed) == 'undefined') fixed = true;

    var boxSd = new b2BoxDef();

    if (!fixed) boxSd.density = 1.0;

    /*if density of body is 0, then the body is static. */

    //boxSd.density = 1.0;

    boxSd.extents.Set(width, height);

    var boxBd = new b2BodyDef();

    boxBd.AddShape(boxSd);

    boxBd.position.Set(x,y);

    return world.CreateBody(boxBd)

}



function createCircle (world, x, y) {

    var circleSd = new b2CircleDef();

    circleSd.density = 1.0;

    circleSd.radius = 10;

    circleSd.restitution = 0.5;

    circleSd.friction = 0.1;

    var circleBd = new b2BodyDef();

    circleBd.AddShape(circleSd);

    circleBd.position.Set(x,y);

    return world.CreateBody(circleBd);

}



function createWorld() {

    var worldAABB = new b2AABB();

    worldAABB.minVertex.Set(-1000, -1000);

    worldAABB.maxVertex.Set(1000, 1000);

    var gravity = new b2Vec2(0, 300);

    var doSleep = true;

    var world = new b2World(worldAABB, gravity, doSleep);

    /*bottom box*/

    createGround(world);

    /*left box*/

    createBox(world, 0, 125, 10, 250);

    /*right box*/

    createBox(world, 500, 125, 10, 250);



    /*The falling ball*/

    var circleBody = createCircle (world, 150, 10);

    /*The static box*/

    var boxBody = createBox (world, 156, 100, 5, 5);





    return world;

}



function step(cnt) {

    var stepping = false;

    var timeStep = 1.0/60;

    var iteration = 1;

    world.Step(timeStep, iteration);

    ctx.clearRect(0, 0, canvasWidth, canvasHeight);

    drawWorld(world, ctx);

    setTimeout('step(' + (cnt || 0) + ')', 10);

}





Event.observe(window, 'load', function() {



    world = createWorld ();



    ctx = $('canvas').getContext('2d');

    var canvasElm = $('canvas');

    canvasWidth = parseInt(canvasElm.width);

    canvasHeight = parseInt(canvasElm.height);

    canvasTop = parseInt(canvasElm.style.top);

    canvasLeft = parseInt(canvasElm.style.left);

    step ();

});
Reference
Box2d的javascript版本Box2dWeb-2.1a.3学习笔记（一）
notCharming的专栏
12-06 3059
Box2d是一个物理引擎框架可以制作2D动画模拟真实物理环境，可以在HTML5的canvas中实现动画效果（但更好的完成这点需要借助别的技术，后面会说到，但其内置的debugDraw可以生成简单的视图，方便我们开发预览）。这是官方的demo地址：http://code.google.com/p/box2dweb/。看完Demo是不是立刻激动人心了呢。另外提一个，关于box2d的版本js有两个，一个
js版的box2D
weixin_30520015的博客
07-13 183
http://sourceforge.net/projects/box2d-js/files/ 受不了了 转载于:https://www.cnblogs.com/vilyLei/articles/1522800.html
box2d.js
weixin_34348805的博客
11-28 593
https://github.com/kripken/box2d.js/ Demo: http://kripken.github.io/box2d.js/webgl_demo/box2d.html 演示: http://kripken.github.io/box2d.js/webgl_demo/box2d.html Example code to give you an idea of the A...
2D物理引擎 Box2d.js
04-02
Box2DJS是Box2D物理引擎的JavaScript端口。如何引入laya 参考 https://blog.csdn.net/weixin_41316824/article/details/88965058
Box2D.js 教程
最新发布
gitblog_01184的博客
08-15 1060
Box2D.js 教程 1. 项目介绍 Box2D.js 是一个基于 JavaScript 的 2D 物理引擎，它是对 C++ 版本的 Box2D 的直接移植。由 Erin Catto 创建的原版 Box2D 被广泛用于游戏开发中实现复杂的物理效果。Box2D.js 通过 Emscripten 将 C++ 代码编译成可以在浏览器环境中运行的 JavaScript 代码。 项目主页: http://...
Box2dWeb-2.1.a.3.min.js
07-21
一个js版本的box2d引擎，包含重力系统和碰撞检测，可以去github上下载，放在此处只是为了方便，侵删~
WARNING: The scripts pip, pip3 and pip3.9 are installed in '/home/lgc/.local/bin' which is not on PATH. Consider adding this directory to PATH or, if you prefer to suppress this warning, use --no-warn-script-location.
07-07
关于您的问题，您可以通过将'/home/lgc/.local/bin'目录添加到您的PATH环境变量中来解决此警告。这样做的方法会因操作系统而有所不同，下面是一些常见操作系统的解决方法： 对于Linux和macOS用户： 1. 打开终端。 2...
lgc:为Stubo启用旧版API的代理
05-13
设置好之后-它将所有旧版API调用转换为新格式的REST API调用。 例子 LGC代理在端口3000和Stubo上运行，API v2在端口8001上运行。 客户电话： 然后将其翻译为： LGC获取响应（带有响应代码），并将其发送回客户端...
Inconsolata-LGC：Inconsolata LGC扩展
02-05
Inconsolata-LGC：Inconsolata LGC扩展
LGC算法-SCI经典
09-16
LGC算法，全称为Learning with Local and Global Consistency，是一种图学习算法，主要用于图上的半监督学习。该算法利用图的结构特征来传播标签信息，使具有相似结构的节点标签趋于一致。LGC算法的提出，是为了更好...
介于许多小伙伴 打开lua官网很慢，下载lua源代码很慢，传一个lua5.4.6最新版本的源代码
10-23
7. `lgc.c`: 垃圾回收算法的实现。 8. `llex.c`: 词法分析器，将输入分解为令牌。 9. `lparser.c`: 语法解析器，构建抽象语法树（AST）。 10. `lstate.c`: Lua状态管理，包括全局变量和线程。 11. `lstring.c`: 字符...
box2d web /js
12-01
box2dweb box2djs 双包 zip。
box2d--1.0.js很好的物理引擎
01-03
很好的2d物理引擎，用起来绝对会赞不绝口
Box2dWeb-2.1a.3
12-06
重力框架Box2d的javascript版本2.1a.3。由box2dfalash改编成javascript 参考文档可以看：http://www.box2dflash.org/docs/2.1a/reference/和box2dflash的官方教程
box2d小球碰撞--js代码
04-17
jquery开发的游戏引擎box3d小球碰撞的源代码，通过它进一步了解了jquery的浅显易懂和博大精深。
box2d.js:使用Emscripten将Box2D移植到JavaScript
04-13
box2d.js 演示： : WebAssembly演示： : 示例代码可让您对API有所了解： : box2d.js是使用Emscripten将Box2D 2D物理引擎直接连接到JavaScript的端口。 源代码直接翻译为JavaScript，无需人工重写，因此功能应与原始Box2D相同。 box2d.js和Box2D一样，都是zlib许可的。 讨论在Mozilla服务器（irc.mozilla.org）上的#emscripten上的IRC上进行。 细节 自动生成的绑定已经过测试，可以在“测试床”中的示例中找到。 有关使用绑定的一般说明，请参见项目（使用Emscripten的Bullet到JavaScript的移植），包装类的许多等等都是相同的。 至少在以下方面似乎可以正常运行： 台式机（Linux）-Chrome22，Opera12，Firefox16
【亲测免费】 Box2D.js - 一个强大的JavaScript物理引擎
gitblog_00001的博客
03-11 946
Box2D.js - 一个强大的JavaScript物理引擎 Box2D.js是一个开源的JavaScript物理引擎，它允许你在网页上创建复杂的物理模拟场景。 Box2D.js 可以用来做什么？ Box2D.js可以用来实现各种物理效果，如碰撞检测、重力、摩擦力等，非常适合用于开发基于Web的游戏或交互式应用。你可以使用Box2D.js创建如下场景： 物理弹球游戏 物体碰撞模拟 实时动态交互设...
html5 box2d引擎,基于HTML5的WebGL结合Box2DJS物理应用
weixin_34717586的博客
06-03 237
上篇咱们基于HT for Web呈现了A* Search Algorithm的3D寻路效果，这篇咱们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果，同上篇其实Box2DJS只是二维的平面碰撞物理引擎，但一样经过3D的呈现能让人更直观的体验到碰撞效果，最终例子效果：javascriptBox2D最先是Erin Catto在GDC大会上的一个展现例子，后来不断完善成C++的开源...
python box2d模拟平抛运动_[HTML5]使用Box2dWeb模拟飞行箭矢
weixin_39574720的博客
02-09 177
Box2d是一个2D游戏物理引擎，由Erin Catto开发，于2007年发布。很多2D游戏都用过Box2d，其中最有名的自然是愤怒的小鸟。Box2d本身是C++编写，但在不同平台都有它的衍生版本，像Flash版的Box2dFlash，JS版的Box2dJS和Box2dWeb。最近偶然看到一篇使用Box2dFlash模拟箭矢飞行效果的文章：很有意思，想尝试使用下Box2d。之前从没接触过Flash...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值