首頁 > 開發者 > JavaScript
標籤：box2d js html5
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 onload="init();"> <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,位置是3var 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);}
javascript中的box2d使用大全記錄
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
