javascript中的box2d使用大全记录

index.html页面

<?php
?>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" >
        <title>Box2d Test</title>
        <script src="js/Box2d.min.js" type="text/javascript" charset="UTF-8"></script>
        <script src="js/box2d.js" type="text/javascript" charset="UTF-8"></script>
    </head>
    <body >
        <canvas id="canvas" width="640" height="480" style="border: 1px solid black;">Your browser does not support HTML5 Canvas</canvas>
    </body>
</html>

box2d.js页面

var world;
var scale = 30;//在canvas上的30像素表示Box2d世界中的1米

function init() {
    var gravity = new Box2D.Common.Math.b2Vec2(0,9.8);//表明重力加速度为9.8m/s平方,方向向下
    var allowSleep = true;//允许静止的物体进入休眠状态,休眠物体不参与物理仿真计算
    world = new Box2D.Dynamics.b2World(gravity,allowSleep);

    createFloor();

    //创建一些具有简单形状的物体
    createRectangularBody();
    createCircularBody();
    createSimplePolygonBody();
    createComplexbody();
    createResoluteJoint();
    createSpecialBody();
    listenForContact();
    setupDebugDraw();

    animate();
}

function drawSpecialBody() {
    var positon = specialBody.GetPosition();
    var angle = specialBody.GetAngle();

    //移动并旋转物体
    context.translate(positon.x*scale,positon.y*scale);
    context.rotate(angle);

    //绘制实心的圆面
    context.fillStyle = "rgb(200,150,250);";
    context.beginPath();
    context.arc(0,0,30,0,2*Math.PI,false);
    context.fill();

    //绘制两个矩形的眼睛
    context.fillStyle = "rgb(255,255,255);";
    context.fillRect(-15,-15,10,5);
    context.fillRect(5,-15,10,5);

    //绘制向上或向下的圆弧,根据生命值决定是否微笑
    context.strokeStyle = "rgb(255,255,255);";
    context.beginPath();
    if(specialBody.GetUserData().life > 100){
        context.arc(0,0,10,Math.PI,2*Math.PI,true);
    }else{
        context.arc(0,10,10,Math.PI,2*Math.PI,false);
    }
    context.stroke();

    context.rotate(-angle);
    context.translate(-positon.x*scale,-positon.y*scale);
}

var specialBody;
function createSpecialBody() {
    var bodyDef = new Box2D.Dynamics.b2BodyDef();
    bodyDef.type = Box2D.Dynamics.b2Body.b2_dynamicBody;
    bodyDef.position.x = 450/scale;
    bodyDef.position.y = 0/scale;

    specialBody = world.CreateBody(bodyDef);
    specialBody.SetUserData({name:"special",life:250});//设置物体的自定义属性

    var fixtureDef = new Box2D.Dynamics.b2FixtureDef();
    fixtureDef.density = 1.0;
    fixtureDef.friction = 0.5;
    fixtureDef.restitution = 0.5;

    fixtureDef.shape = new Box2D.Collision.Shapes.b2CircleShape(30/scale);
    var fixture = specialBody.CreateFixture(fixtureDef);
}

function listenForContact() {
    /*
     Box2D.Dynamics.b2ContactListener 对象的方法
    BeginContact():两个物体开始接触时被调用
    EndContact():两个物体结束接触时被调用
    PostSolve():求解器完成后调用,进行碰撞检测时很有用
    PreSolve():在求解器求解前调用
     */
    var listener = new Box2D.Dynamics.b2ContactListener;
    listener.PostSolve = function(contact,impulse){
        var body1 = contact.GetFixtureA().GetBody();
        var body2 = contact.GetFixtureB().GetBody();

        if(body1 == specialBody || body2 == specialBody){
            var impulseAlongNormal = impulse.normalImpulses[0];
            specialBody.GetUserData().life -= impulseAlongNormal;

            console.log("The special body was in a collision with impulse",impulseAlongNormal,"and its life has now become",
            specialBody.GetUserData().life);
        }
    };
    world.SetContactListener(listener);
}
//创建转动关节
function createResoluteJoint() {
    //定义第一个物体
    var bodyDef1 = new Box2D.Dynamics.b2BodyDef();
    bodyDef1.type = Box2D.Dynamics.b2Body.b2_dynamicBody;
    bodyDef1.position.x = 480/scale;
    bodyDef1.position.y = 50/scale;
    var body1 = world.CreateBody(bodyDef1);

    var fixtureDef1 = new Box2D.Dynamics.b2FixtureDef();
    fixtureDef1.density = 1.0;
    fixtureDef1.friction = 0.5;
    fixtureDef1.restitution = 0.5;
    fixtureDef1.shape = new Box2D.Collision.Shapes.b2PolygonShape();
    fixtureDef1.shape.SetAsBox(50/scale,10/scale);
    body1.CreateFixture(fixtureDef1);

    var bodyDef2 = new Box2D.Dynamics.b2BodyDef();
    bodyDef2.type = Box2D.Dynamics.b2Body.b2_dynamicBody;
    bodyDef2.position.x = 470/scale;
    bodyDef2.position.y = 50/scale;
    var body2 = world.CreateBody(bodyDef2);

    //创建第二个载具并向物体中添加多边形形状
    var fixtureDef2 = new Box2D.Dynamics.b2FixtureDef();
    fixtureDef2.density = 1.0;
    fixtureDef2.friction = 0.5;
    fixtureDef2.restitution = 0.5;
    fixtureDef2.shape = new Box2D.Collision.Shapes.b2PolygonShape();

    var points = [
        new Box2D.Common.Math.b2Vec2(0,0),
        new Box2D.Common.Math.b2Vec2(40/scale,50/scale),
        new Box2D.Common.Math.b2Vec2(50/scale,100/scale),
        new Box2D.Common.Math.b2Vec2(-50/scale,100/scale),
        new Box2D.Common.Math.b2Vec2(-40/scale,50/scale)
    ];

    fixtureDef2.shape.SetAsArray(points,points.length);
    body2.CreateFixture(fixtureDef2);

    //创建接合点连接body1和body2
    var jointDef = new Box2D.Dynamics.Joints.b2RevoluteJointDef();
    var jointCenter = new Box2D.Common.Math.b2Vec2(470/scale,50/scale);

    jointDef.Initialize(body1,body2,jointCenter);//指出接入物及接入点
    world.CreateJoint(jointDef);//创建接入点 并加入世界
}

//创建由两个物体组成的物体
function createComplexbody() {
    var bodyDef = new Box2D.Dynamics.b2BodyDef();
    bodyDef.type = Box2D.Dynamics.b2Body.b2_dynamicBody;
    bodyDef.position.x = 350/scale;
    bodyDef.position.y = 50/scale;
    var body = world.CreateBody(bodyDef);

    var fixtureDef = new Box2D.Dynamics.b2FixtureDef();
    fixtureDef.density = 1.0;
    fixtureDef.friction = 0.5;
    fixtureDef.restitution = 0.7;
    fixtureDef.shape = new Box2D.Collision.Shapes.b2CircleShape(40/scale);
    body.CreateFixture(fixtureDef);

    fixtureDef.shape = new Box2D.Collision.Shapes.b2PolygonShape();
    var points = [
      new Box2D.Common.Math.b2Vec2(0,0),
        new Box2D.Common.Math.b2Vec2(40/scale,50/scale),
        new Box2D.Common.Math.b2Vec2(50/scale,100/scale),
        new Box2D.Common.Math.b2Vec2(-50/scale,100/scale),
        new Box2D.Common.Math.b2Vec2(-40/scale,50/scale)
    ];

    fixtureDef.shape.SetAsArray(points,points.length);

    body.CreateFixture(fixtureDef);

}

function createSimplePolygonBody() {
    var bodyDef = new Box2D.Dynamics.b2BodyDef();
    bodyDef.type = Box2D.Dynamics.b2Body.b2_dynamicBody;
    bodyDef.position.x = 230/scale;
    bodyDef.position.y = 50/scale;

    var fixtureDef = new Box2D.Dynamics.b2FixtureDef();
    fixtureDef.density = 1;
    fixtureDef.friction = 0.5;
    fixtureDef.restitution = 0.2;

    fixtureDef.shape = new Box2D.Collision.Shapes.b2PolygonShape();

    var points = [
        new Box2D.Common.Math.b2Vec2(0,0),
        new Box2D.Common.Math.b2Vec2(40/scale,50/scale),
        new Box2D.Common.Math.b2Vec2(50/scale,100/scale),
        new Box2D.Common.Math.b2Vec2(-50/scale,100/scale),
        new Box2D.Common.Math.b2Vec2(-40/scale,50/scale)
    ];

    fixtureDef.shape.SetAsArray(points,points.length);

    var body = world.CreateBody(bodyDef);

    var fixture = body.CreateFixture(fixtureDef);

    /*
    所有的坐标都是相对于物体原点的.第一个点(0,0)开始于物体的原点,将被放置在物体的位置(230,50).
    无须闭合多边形,Box2D会自动帮我们完成它.
    所有的顶点必须以顺时针方向定义
     */

}

function createRectangularBody() {
   var bodydef =new Box2D.Dynamics.b2BodyDef();
    bodydef.type = Box2D.Dynamics.b2Body.b2_dynamicBody;
    bodydef.position.x = 40 / scale;
    bodydef.position.y = 100 / scale;

    var fixtureDef = new Box2D.Dynamics.b2FixtureDef();
    fixtureDef.density = 1;//密度
    fixtureDef.friction = 0.5;//摩擦系数
    fixtureDef.restitution = 0.8;//弹性恢复系数

    fixtureDef.shape = new Box2D.Collision.Shapes.b2PolygonShape();
    fixtureDef.shape.SetAsBox(30/scale,50/scale);

    var body = world.CreateBody(bodydef);
    var fixture = body.CreateFixture(fixtureDef);
}

function createCircularBody() {
    var bodyDef = new Box2D.Dynamics.b2BodyDef();
    bodyDef.type = Box2D.Dynamics.b2Body.b2_dynamicBody;

    bodyDef.position.x = 130/scale;
    bodyDef.position.y = 100/scale;

    var fixtureDef = new Box2D.Dynamics.b2FixtureDef();
    fixtureDef.density  = 1;
    fixtureDef.friction = 0.5;
    fixtureDef.restitution = 0.7;

    fixtureDef.shape = new Box2D.Collision.Shapes.b2CircleShape(30/scale);
    var body = world.CreateBody(bodyDef);
    var fixture = body.CreateFixture(fixtureDef);

}

var timeStep = 1 / 60;

//按照Box2D手册建议的迭代数,速度是8,位置是3
var velocityIterations = 8;
var positionIterations = 3;

function animate() {
    world.Step(timeStep,velocityIterations,positionIterations);
    world.ClearForces();
    world.DrawDebugData();

    if(specialBody && specialBody.GetUserData().life <= 0){
        world.DestroyBody(specialBody);//将物体从世界中移除
        specialBody = undefined;
        console.log("The special body was destroyed");
    }
    if(specialBody){
        drawSpecialBody();
    }
    setTimeout(animate,timeStep);
}

function createFloor() {
    var bodyDef = new Box2D.Dynamics.b2BodyDef;
    bodyDef.type = Box2D.Dynamics.b2Body.b2_staticBody;
    bodyDef.position.x = 640/2/scale;
    bodyDef.position.y = 450/scale;

    //fixture用来向body添加shape以实现碰撞检测
    var fixtureDef = new Box2D.Dynamics.b2FixtureDef;
    fixtureDef.density = 1.0;
    fixtureDef.friction = 0.5;
    fixtureDef.restitution = 0.2;

    fixtureDef.shape = new Box2D.Collision.Shapes.b2PolygonShape;
    fixtureDef.shape.SetAsBox(320/scale,10/scale);

    var body = world.CreateBody(bodyDef);
    var fixture = body.CreateFixture(fixtureDef);

}

var context;
function setupDebugDraw() {
    context = document.getElementById(‘canvas‘).getContext(‘2d‘);
    var debugDraw = new Box2D.Dynamics.b2DebugDraw();

    //使用canvas绘图环境来绘制调试画面
    debugDraw.SetSprite(context);
    //设置绘图比例
    debugDraw.SetDrawScale(scale);
    //填充的透明度为0.3
    debugDraw.SetFillAlpha(0.3);
    //线条的宽度为1
    debugDraw.SetLineThickness(1.0);
    //绘制所有的shape和joint
    debugDraw.SetFlags(Box2D.Dynamics.b2DebugDraw.e_shapeBit | Box2D.Dynamics.b2DebugDraw.e_jointBit);

    //设置调制绘图模式
    world.SetDebugDraw(debugDraw);
}

时间： 2024-10-05 19:04:29

javascript中的box2d使用大全记录的相关文章

Java和JavaScript中使用Json方法大全

林炳文Evankaka原创作品. 转载请注明出处http://blog.csdn.net/evankaka 摘要:JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 它基于ECMAScript的一个子集. JSON採用全然独立于语言的文本格式,可是也使用了相似于C语言家族的习惯(包含C.C++.C#.Java.JavaScript.Perl.Python等).这些特性使JSON成为理想的数据交换语言. 易于人阅读和编写.同一时候也易于机器解析和生成

javascript中字符串格式转化成json对象记录

什么是JSON JSON(JavaScript Object Notation)是一种优美的JavaScript对象创建方法.JSON也是一种轻量级数据交换格式.JSON非常易于人阅读与编写,同时利于机器解析与生成.JSON是在AJAX中代替XML交换数据的更佳方案. JSON格式与语法 var jsonobject= { //对象内的属性语法(属性名与属性值是成对出现的) propertyname:value, //对象内的函数语法(函数名与函数内容是成对出现的

随笔，记录JavaScript中的面试题

我不知道我的js水平怎么样,但是今天有点受打击,看到很多题有坑.看了一些面试题,我记录下今天遇到的坑吧. 问题1:作用域考虑以下代码,输出结果是什么? (function() { var a = b = 5; })(); console.log(b); 答案是5. 这道题我知道,陷阱在于var a = b =5,如果是声明,应该是var a,b =5;这样a,b的值都为5,由于a,b的都在函数作用域里面,所以外部是输出不出来的,则会显示b = undefined.而这里,由于js的特性,所以这

MySQL中查询、删除重复记录的方法大全

前言本文主要给大家介绍了关于MySQL中查询.删除重复记录的方法,分享出来供大家参考学习,下面来看看详细的介绍: 查找所有重复标题的记录: ? 1 select title,count(*) as count from user_table group by title having count>1; ? 1 SELECT * FROM t_info a WHERE ((SELECT COUNT(*) FROM t_info WHERE Title = a.Title) > 1) ORDER

javascript中的Function和Object

写的很好,理解了很多,特此转发记录转自:http://blog.csdn.net/tom_221x/archive/2010/02/22/5316675.aspx 在JavaScript中所有的对象都继承自Object原型,而Function又充当了对象的构造器,那么Funtion和Object到底有着什麽样的关系呢 ? 首先,一切都是对象. 1 alert(Object instanceof Object); // true 2 alert(Function instanceof Objec

学习JavaScript中的异步Generator

本文和大家分享的主要是javascript中异步Generator相关内容,一起来看看吧,希望对大家学习javascript 有所帮助. 异步的generators和异步iteration已经到来 ! 这是错误的, 它们现在还在阶段 3 ,这表示他们很有可能在JavaScript未来的一个版本中发布. 在他们发布之前,你可以通过 Babel 来在你的项目中使用还在阶段3的建议内容. 网站基本上还是一些分散运行的应用,因为任何在语言上的修改都会造成永久的影响,所以所有的未来的版本都需要向后兼容.

Javascript中关于cookie的那些事儿

Javascript-cookie 什么是cookie? 指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密).简单点来说就是:浏览器缓存. cookie由什么组成? Cookie的形式: Cookie是由name=value形式成对存在的,Cookie字符串必须以分号作为结束符,Cookie除了name属性之外还存在其他4个相关属性. 设置Cookie的语法如下: set-Cookie:name=value;[expires=date];[path=d

漫谈JavaScript中的cookie

什么是cookie?简单来说,cookie就是网站服务器存放在我们计算机上的一小段(一般大小不超过4KB)用来识别和记录用户的个人信息的文本.HTTP协议是一种没有“状态”的传输协议,也就是说,服务器无法识别任意两次访问是否有同一个来源,这样就不能判断用户信息,从而也就不能针对特定用户做出个性化设置.为了解决这个问题,cookie技术应运而生. cookie具体是怎么运行的呢?举个栗子,当我们在网页上登录了一次邮箱后,下一次再登录,会发现我们的用户名(可能还有密码)已经出现在输入框中,不用再次手

关于JavaScript中的事件代理

今天面试某家公司Web前端开发岗位,前面的问题回答的都还算凑活,并且又问了一下昨天面试时做的一道数组去重问题的解题思路(关于数组去重问题,可以观赏我前几天写的:http://www.cnblogs.com/craftsman-gao/p/4766223.html.幸好前几天专门看过这个问题,答题时才能轻松应对啊),因为这些以前都有过研究,所以回答起来并没有太大困难.然而,最后面试官又出了一道代码题让我涨姿势了.题目本身很简单:一个ul中有一千个li,如何给这一千个li绑定一个鼠标点击事件,当鼠标