01.Box2dWeb入门教程
2016-02-06 22:44
253 查看
1.下载box2dweb.直接在页面中引用即可。
-Box2D.js是未压缩版
-Box2d.min.js是压缩版
2.编写HelloWorld代码。
-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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 