前言:
　　之前博文"台球游戏的核心算法和AI(1)" 中, 提到过想用HTML5+Box2d来编写实现一个台球游戏. 以此来对比感慨一下游戏物理引擎的巨大威力.
　　做为H5+box2d的初学者, 将简单讲讲box2d的一些基础概念, 并对一个sample样例做下讲解. 权作学习笔记.

资料:
　　box2d源自flash版, 后迁移到各个语言版本, box2dweb是与最新flash版本同步的js 2D物理引擎库.
　　box2dweb版网址: http://code.google.com/p/box2dweb/.
　　box2d官网: http://box2d.org/.

基本概念:
　　世界: b2world
　　box2d物体依托的世界存在, 其需指定重力向量, 以及静止物体的休眠开关.

var world = new b2World(gravity, doSleep);

　　刚体: b2body
　　物理世界中的具体物体, 有动态/静态物体之分.
　　夹具: b2fixture
　　定义物体的形状,材质属性(密度, 摩擦系数,弹性系数)等等.

代码样例:
　　box2dweb库采用当前最新的Box2dWeb-2.1a.3. 该库只包含一个js文件, 并附带了样例.
　　文件组织结构如下所示:
　　
　　我们以sample.html为例, 对box2dweb库做下简单的讲解.
　　展示的效果如下:
　　

　　具体代码如下:

<html>

   <head>

      <title>Box2dWeb example</title>

   </head>

   <body onload="init();">

      <canvas id="canvas" width="600" height="400"></canvas>

   </body>

   <script type="text/javascript" src="Box2dWeb-2.1.a.3.min.js"></script>

   <script type="text/javascript">

      var world;

      function init() {

         var   b2Vec2 = Box2D.Common.Math.b2Vec2

         	,	b2BodyDef = Box2D.Dynamics.b2BodyDef

         	,	b2Body = Box2D.Dynamics.b2Body

         	,	b2FixtureDef = Box2D.Dynamics.b2FixtureDef

         	,	b2Fixture = Box2D.Dynamics.b2Fixture

         	,	b2World = Box2D.Dynamics.b2World

         	,	b2MassData = Box2D.Collision.Shapes.b2MassData

         	,	b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape

         	,	b2CircleShape = Box2D.Collision.Shapes.b2CircleShape

         	,	b2DebugDraw = Box2D.Dynamics.b2DebugDraw

            ;

         world = new b2World(

               new b2Vec2(0, 10)    //gravity

            ,  true                 //allow sleep

         );

         var fixDef = new b2FixtureDef;

         fixDef.density = 1.0;

         fixDef.friction = 0.5;

         fixDef.restitution = 0.2;

         var bodyDef = new b2BodyDef;

         //create ground

         bodyDef.type = b2Body.b2_staticBody;

         bodyDef.position.x = 9;

         bodyDef.position.y = 13;

         fixDef.shape = new b2PolygonShape;

         fixDef.shape.SetAsBox(10, 0.5);

         world.CreateBody(bodyDef).CreateFixture(fixDef);

         //create some objects

         bodyDef.type = b2Body.b2_dynamicBody;

         for(var i = 0; i < 10; ++i) {

            if(Math.random() > 0.5) {

               fixDef.shape = new b2PolygonShape;

               fixDef.shape.SetAsBox(

                     Math.random() + 0.1 //half width

                  ,  Math.random() + 0.1 //half height

               );

            } else {

               fixDef.shape = new b2CircleShape(

                  Math.random() + 0.1 //radius

               );

            }

            bodyDef.position.x = Math.random() * 10;

            bodyDef.position.y = Math.random() * 10;

            world.CreateBody(bodyDef).CreateFixture(fixDef);

         }

         //setup debug draw

         var debugDraw = new b2DebugDraw();

			debugDraw.SetSprite(document.getElementById("canvas").getContext("2d"));

			debugDraw.SetDrawScale(30.0);

			debugDraw.SetFillAlpha(0.3);

			debugDraw.SetLineThickness(1.0);

			debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);

			world.SetDebugDraw(debugDraw);

         window.setInterval(update, 1000 / 60);

      };

      function update() {

         world.Step(

               1 / 60   //frame-rate

            ,  10       //velocity iterations

            ,  10       //position iterations

         );

         world.DrawDebugData();

         world.ClearForces();

      };

   </script>

</html>

　　js应该没有类似java和c#的命令空间的概念, 为避免冲突, 往往通过添加前缀名来解决, 比如box2dweb的采用b2前缀. 另一方面, 其通过简写的技巧来缩短类和函数的引用.

var b2Vec2 = Box2D.Common.Math.b2Vec2

　　, b2BodyDef = Box2D.Dynamics.b2BodyDef

　　, b2Body = Box2D.Dynamics.b2Body

　　, b2FixtureDef = Box2D.Dynamics.b2FixtureDef

　　, b2Fixture = Box2D.Dynamics.b2Fixture

　　, b2World = Box2D.Dynamics.b2World

　　, b2MassData = Box2D.Collision.Shapes.b2MassData

　　, b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape

　　, b2CircleShape = Box2D.Collision.Shapes.b2CircleShape

　　, b2DebugDraw = Box2D.Dynamics.b2DebugDraw

;

　　注: 通过简写来缩短类名和函数对象的引用.
　　• 创建世界

world = new b2World(

　　new b2Vec2(0, 10) //gravity

　　, true //allow sleep

);

　　• 创建地面

var bodyDef = new b2BodyDef;

//create ground

bodyDef.type = b2Body.b2_staticBody;

bodyDef.position.x = 9;

bodyDef.position.y = 13;

fixDef.shape = new b2PolygonShape;

fixDef.shape.SetAsBox(10, 0.5);

world.CreateBody(bodyDef).CreateFixture(fixDef);

　　注: b2Body.b2_staticBody标示该物体为静态物体(固定物), 一个物体由b2BodyDef和b2FixtureDef来确定.
　　• 创建刚体

//create some objects

bodyDef.type = b2Body.b2_dynamicBody;

for(var i = 0; i < 10; ++i) {

　　if(Math.random() > 0.5) {

　　　　fixDef.shape = new b2PolygonShape;

　　　　fixDef.shape.SetAsBox(

　　　　　　Math.random() + 0.1 //half width

　　　　　　, Math.random() + 0.1 //half height

　　　　);

　　} else {

　　　　fixDef.shape = new b2CircleShape(

　　　　　　Math.random() + 0.1 //radius

　　　　);

　　}

　　bodyDef.position.x = Math.random() * 10;

　　bodyDef.position.y = Math.random() * 10;

　　world.CreateBody(bodyDef).CreateFixture(fixDef);

}

　　注: 这边随机创建了10个圆形/矩形的物体
　　• box2dweb的调试器(可视化)

//setup debug draw

var debugDraw = new b2DebugDraw();

debugDraw.SetSprite(document.getElementById("canvas").getContext("2d"));

debugDraw.SetDrawScale(30.0);

debugDraw.SetFillAlpha(0.3);

debugDraw.SetLineThickness(1.0);

debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);

world.SetDebugDraw(debugDraw);

　　注: DrawScale为物理世界和像素的比例值, 以及Sprite的canvas的2d上下文.
　　• 事件驱动
　　注册定时器, 定时更新. 而物理引擎的world.step函数是整个box2d的核心, 其模拟/驱动了物理世界的运行.

window.setInterval(update, 1000 / 60);

function update() {

　　world.Step(

　　　　1 / 60 //frame-rate

　　　　, 10 //velocity iterations

　　　　, 10 //position iterations

　　);

　　world.DrawDebugData();

　　world.ClearForces();

};

总结:
　　从这个sample代码中, 学习到了很多. 实践出真知, 希望自己作为一个html5er的初学者能快速成长.

写在最后：
　　如果你觉得这篇文章对你有帮助, 请小小打赏下. 其实我想试试, 看看写博客能否给自己带来一点小小的收益. 无论多少, 都是对楼主一种由衷的肯定.

　　

box2dweb 学习笔记--sample讲解的更多相关文章

  1. tensorflow学习笔记----TensorBoard讲解

    TensorBoard简介 TensorBoard是TensorFlow自带的一个强大的可视化工具,也是一个Web应用程序套件.TensorBoard目前支持7种可视化,Scalars,Images, ...

  2. C++内存管理学习笔记（3）

    /****************************************************************/ /*            学习是合作和分享式的! /* Auth ...

  3. 网络协议学习笔记(二)物理层到MAC层，交换机和VLAN，ICMP与ping原理

    概述 之前网络学习笔记主要讲解了IP的诞生,或者说整个操作系统的诞生,一旦有了IP,就可以在网络的环境里和其他的机器展开沟通了.现在开始给大家讲解关于网络底层的相关知识. 从物理层到MAC层:如何在宿 ...

  4. R︱shiny实现交互式界面布置与搭建（案例讲解+学习笔记）

    要学的东西太多,无笔记不能学~~ 欢迎关注公众号,一起分享学习笔记,记录每一颗"贝壳"~ --------------------------- 看了看往期的博客,这个话题竟然是第 ...

  5. 2.《Spring学习笔记-MVC》系列文章，讲解返回json数据的文章共有3篇，分别为：

    转自:https://www.cnblogs.com/ssslinppp/p/4528892.html 个人认为,使用@ResponseBody方式来实现json数据的返回比较方便,推荐使用. 摘要 ...

  6. 1.《Spring学习笔记-MVC》系列文章，讲解返回json数据的文章共有3篇，分别为：

    转自:https://www.cnblogs.com/ssslinppp/p/4528892.html [Spring学习笔记-MVC-3]SpringMVC返回Json数据-方式1:http://w ...

  7. 串的应用与kmp算法讲解--学习笔记

    串的应用与kmp算法讲解 1. 写作目的 平时学习总结的学习笔记,方便自己理解加深印象.同时希望可以帮到正在学习这方面知识的同学,可以相互学习.新手上路请多关照,如果问题还请不吝赐教. 2. 串的逻辑 ...

  8. 3.《Spring学习笔记-MVC》系列文章，讲解返回json数据的文章共有3篇，分别为：

    转自:https://www.cnblogs.com/ssslinppp/p/4528892.html 概述 在文章:<[Spring学习笔记-MVC-3]SpringMVC返回Json数据-方 ...

  9. WeX5学习笔记

    目录 WeX5学习笔记... 1 1.轻松看透WeX5产品能力和技术... 1 2.WeX5可以怎么玩?... 3 一.纯本地App. 3 二.关联一个网站,希望默认就打开某页... 4 三.UI设计 ...

随机推荐

  1. [Js]跟随鼠标移动的div

    例子:鼠标移动到一块东西上,出现提示文本框,并且提示文本框跟着鼠标的位置动 document.onmouseover=function(ev){ var oEvent=ev||event; var b ...

  2. ncs安装及初次运行

    Tail-f NCS 作为网络配置程序和基础设备之间的接口,能够展现各种服务,修改各开发商不相同的设备配置,同时能及时同步网络设备状态到cdb(configuration database,配置数据库 ...

  3. format 字符串

    http://www.cnblogs.com/mumble/archive/2011/05/25/2056462.html ShowMessage( Format('this is %.0f',[ t ...

  4. 【海量视频】2013年上半年BPM厂商'K2'市场活动资料集锦

    3月01日         中广核K2 &SAP流程解决方案分享 活动报道:http://www.k2software.cn/k2events_content/items/k2-sap-346 ...

  5. 蓝桥杯 algo——6 安慰奶牛 (最小生成树)

    问题描述 Farmer John变得非常懒,他不想再继续维护供奶牛之间供通行的道路.道路被用来连接N个牧场,牧场被连续地编号为1到N.每一个牧场都是一个奶牛的家.FJ计 划除去P条道路中尽可能多的道路 ...

  6. 创建和运行shell脚本程序

    转载请标明http://www.cnblogs.com/winifred-tang94/ 要创建一个shell脚本程序,首先新建一个文本文件,然后在这个文本文件中按照shell编程规则输入shell命 ...

  7. [microsoft]PE和COFF文件格式

    前言 我们知道,vs的C/C++编译工具把每一个编译单元(一个.c或.cpp源文件)编译成一个对象文件(.obj文件):然后用链接器把这些对象文件组合一个单个文件(.exe文件),称为可移植的可执行文 ...

  8. DataNode,NameNode,JobTracker,TaskTracker用jps查看无法启动解决办法

    查看tasktracker的50060的地址无法正常查看,主要有两个原因,一个是在/tmp目录下有以前使用2.02版本留下的文件没有删除,二个是因为端口被占用了 解决方法: 一.删除/tmp目录下所有 ...

  9. 《day14---多线程入门_进阶》

    /* 多线程: 进程:正在执行中的程序,一个应用程序启动后在内存中运行的那片空间.进程具有动态性和并发性. 线程:进程中的一个执行单元.负责进程中的程序的运行的.一个进程中至少要有一个线程. 一个进程 ...

  10. Linux安装IDA神器

    1.下载windows版的IDA 版本:6.6.141224打包绿色版:http://pan.baidu.com/s/1kTsXZiJ 密码:jj5q 2.复制全部文件到Linux的文件夹中 3.使用 ...