1.下载box2dweb.直接在页面中引用即可。 
-Box2D.js是未压缩版 
-Box2d.min.js是压缩版

2.编写HelloWorld代码。

<!DOCTYPE HTML>

<html>

    <head>

        <title>LaiXiao Box2DWeb Test</title>

        <script type="text/javascript" src="js/Box2D.js"></script>

    </head>

    <body onload="init();">

        <canvas id="canvas" width="600" height="400" style="background-color:#333333;"></canvas>

        <script>

        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;

            //1.创建一个世界

            var world = new b2World(new b2Vec2(0,9.8),true);

            //2.创建一个矩形刚体

            //定义一个材质

            var fixDef = new b2FixtureDef;

            fixDef.density = 1.0;//密度

            fixDef.friction = 0.5;//摩擦

            fixDef.restitution = 0.2;//弹性

            fixDef.shape = new b2PolygonShape;//矩形

            fixDef.shape.SetAsBox(5, 0.5);//宽高

            //创建一个矩形地板刚体

            var bodyDef = new b2BodyDef;

            bodyDef.type = b2Body.b2_staticBody;//静态的

            bodyDef.position.x = 10;    //X轴

            bodyDef.position.y = 13;    //Y轴

            //世界中添加一个刚体

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

            //3.同上创建一个圆形刚体

            var fixDef2 = new b2FixtureDef;

            fixDef2.density = 1.0;

            fixDef2.friction = 0.5;

            fixDef2.restitution = 0.2;

            fixDef2.shape = new b2CircleShape(1);   

            var bodyDef2 = new b2BodyDef;

            bodyDef2.type = b2Body.b2_dynamicBody;

            bodyDef2.position.x = 9;

            bodyDef2.position.y = 1;

            world.CreateBody(bodyDef2).CreateFixture(fixDef2);

            //4.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);

            //5.一帧帧执行

            window.setInterval(update, 1000 / 60);

            function update() {

                 //Take a time step.

                 world.Step(

                       1 / 60   //frame-rate

                    ,  10       //velocity iterations

                    ,  10       //position iterations

                 );

                 //Call this to draw shapes and other debug draw data.

                 world.DrawDebugData();

                 //Call this after you are done with time steps to clear the forces. You normally call this after each call to Step, unless you are performing sub-steps.

                 world.ClearForces();

                 //console.log(111);

            };

        }

        </script>

    </body>

</html>

01.Box2dWeb入门教程的更多相关文章

  1. 【Zigbee技术入门教程-01】Zigbee无线组网技术入门的学习路线

    [Zigbee技术入门教程-01]Zigbee无线组网技术入门的学习路线 广东职业技术学院  欧浩源 一.引言    在物联网技术应用的知识体系中,Zigbee无线组网技术是非常重要的一环,也是大家感 ...

  2. 《Ruby语言入门教程v1.0》学习笔记-01

    <Ruby语言入门教程v1.0> 编著:张开川 邮箱:kaichuan_zhang@126.com 想要学习ruby是因为公司的自动化测试使用到了ruby语言,但是公司关于ruby只给了一 ...

  3. 无废话ExtJs 入门教程十七[列表：GridPanel]

    无废话ExtJs 入门教程十七[列表:GridPanel] extjs技术交流,欢迎加群(201926085) 在Extjs中,GridPanel用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...

  4. kafka入门教程链接

    http://www.aboutyun.com/forum.php?mod=viewthread&tid=12882 经典入门教程 1.Kafka独特设计在什么地方?2.Kafka如何搭建及创 ...

  5. 无废话WCF入门教程六[一个简单的Demo]

    一.前言 前面的几个章节介绍了很多理论基础,如:什么是WCF.WCF中的A.B.C.WCF的传输模式.本文从零开始和大家一起写一个小的WCF应用程序Demo. 大多框架的学习都是从增.删.改.查开始来 ...

  6. 安卓自动化测试（2）Robotium环境搭建与新手入门教程

    Robotium环境搭建与新手入门教程 准备工具:Robotium资料下载 知识准备: java基础知识,如基本的数据结构.语法结构.类.继承等 对Android系统较为熟悉,了解四大组件,会编写简单 ...

  7. 无废话ExtJs 入门教程十一[下拉列表：Combobox]

    无废话ExtJs 入门教程十一[下拉列表:Combobox] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个下拉列表: 1.代码如下: 1 <!DOCT ...

  8. 无废话ExtJs 入门教程十[单选组：RadioGroup、复选组：CheckBoxGroup]

    无废话ExtJs 入门教程十[单选组:RadioGroup.复选组:CheckBoxGroup] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个单选组,一个复 ...

  9. 无废话ExtJs 入门教程九[数字字段：NumberField、隐藏字段Hidden、日期字段：DataFiedl]

    无废话ExtJs 入门教程九[数字字段:NumberField.隐藏字段Hidden.日期字段:DataFiedl] extjs技术交流,欢迎加群(201926085) 继上第六节内容,我们在表单里加 ...

随机推荐

  1. [听点音乐]American Music Awards 2015 Winners

    “see you again” - wiz khalifa feat. charlie puth Lyrics   It's been a long day without you my friend ...

  2. IE6 — 你若安好，便是晴天霹雳 [ 乱弹 ]

    为什么还有人在用IE6?估计和中国的盗版业有很大关系吧.小白的电脑启不来了,请人重装系统,一张古老的Ghost搞定,IE6便落地生根.今天碰到一例报告说某网站在IE6下丑陋吓人,无心无力去解决,于是来 ...

  3. Web交互设计优化的简易check list

    Web交互设计优化的简易check list 00 | 时间: 2011-02-11 | 28,842 Views 交互设计, 用户研究   “优化已有产品的体验”,这是用户体验相关岗位职责中常见的描 ...

  4. ecshop缓存清理－限制或禁用ECShop缓存

    ecshop缓存清理-限制或禁用ECShop缓存   ECSHOP的缓存存放在templates/caches/文章夹下,时间长了这个文件夹就会非常庞大,拖慢网站速度.还有很多情况我们不需要他的缓存. ...

  5. HTML: a的僞類

    a:link a:visited a:hover a:active css中能夠分別針對a鏈接的4中狀態進行css樣式設置,這四種狀態就是a的僞類,分別是: 普通,訪問後,鼠標放在a鏈接上,鼠標按下未 ...

  6. PHP文件操作 之往一个文件写入数据

    //打开一个文件 $f = fopen($filename,'wb'); $filename:打开一个文件,不存在则自动创建,如果不能创建,说明指定的文件目录有错误 wb:写入的方式 ---- 覆盖原 ...

  7. Android获取手机制作商，系统版本等

    在开发中 我们有时候会需要获取当前手机的系统版本来进行判断,或者需要获取一些当前手机的硬件信息. android.os.Build类中.包括了这样的一些信息.我们可以直接调用 而不需要添加任何的权限和 ...

  8. new char[]和new char()的区别

    new char[1];分配一块连续的内存,也就是一个数组,里面有1个元素new   char(1);分配一块内存,有一个元素,该元素被初始化为1

  9. 关于使用UDP(TCP)跨局域网，NAT穿透的心得

    前言:        最近我用java做了一个C/S的类似QQ之类的IM系统(即时通讯系统),遇到了不能跨局域网通讯的问题,经过在网上,和书上查阅了一些资料,了解了一些情况,现在就总结一下我的解决方案 ...

  10. EChars学习-1

    Echarts,编写来自Enterprise Charts,商业级数据图表,是百度的一个开源的数据可视化工具 官网地址:http://echarts.baidu.com/ 一.引入Echarts &l ...